Typescript 错误和展开运算符是由 ...props 引起的?

2024-01-06

您好,当我尝试将扩展运算符与 Typescript 一起使用时,我遇到了问题。

我的功能是useFormikContext() and useField()函数来自 Formik 的库。当我添加//@ts-ignore一切都按预期工作得很好,但是,如果没有该行,我会收到错误:

const DatePickerField = ({ ...props }) => {
  const { setFieldValue } = useFormikContext();
  //@ts-ignore
  const [field] = useField(props);
  return (
    <DatePicker
      {...field}
      {...props}
      selected={(field.value && new Date(field.value)) || null}
      onChange={(val) => {
        setFieldValue(field.name, val);
      }}
    />
  );
};
Argument of type '{ [x: string]: any; }' is not assignable to parameter of type 'string | (ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & FieldConfig<any>) | (ClassAttributes<...> & ... 1 more ... & FieldConfig<...>) | (ClassAttributes<...> & ... 1 more ... & FieldConfig<...>)'.
  Type '{ [x: string]: any; }' is not assignable to type 'ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & FieldConfig<any>'.
    Property 'name' is missing in type '{ [x: string]: any; }' but required in type 'FieldConfig<any>'.  TS2345

据我了解,这个函数接受扩展运算符,这意味着它接受具有 0 个或多个属性的对象/数组。它自动被分配了类型{ [x: string]: any; }这意味着存在一个值类型为any 的键(x)。但是,我不知道如何修复打字稿给出的这个错误。


好吧,经过一番研究后,我发现可以修复这些错误。

语法 '{ [x: string]: any; }' 让我知道这个对象有一个键 x,它是一个值为 any 的字符串。我在提问时不知道这一点,我有点困惑。https://www.typescriptlang.org/docs/handbook/advanced-types.html https://www.typescriptlang.org/docs/handbook/advanced-types.html

Typescript 还让我知道useField()函数需要值字符串的属性名称。所以我用这个新发现的知识输入它并摆脱了一个未使用的功能selected新代码现在如下所示:

const DatePickerField = ({ ...props }: { [x: string]: any; name: string }) => {
  const { setFieldValue } = useFormikContext();

  const [field] = useField(props);
  return (
    <DatePicker
      {...field}
      {...props}
      // selected={(field.value && new Date(field.value)) || null}
      onChange={(val) => {
        setFieldValue(field.name, val);
      }}
    />
  );
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Typescript 错误和展开运算符是由 ...props 引起的? 的相关文章

随机推荐

  • Laravel 4:to_array() 在哪里?

    伙计 这真是令人沮丧 在 Laravel 4 中 使用 Eloquent 可以实现以下效果 var dump Worker find 1 但如果我尝试使用to array 它崩溃了 var dump Worker find 1 gt to
  • ffmpeg 可以将音频从原始 PCM 转换为 WAV 吗?

    我可以将 wav 文件转换为 pcm ffmpeg i file wav f s16le acodec pcm s16le file pcm 我怎样才能恢复这个操作 wav 容器只是向原始 PCM 数据添加一个简单的标头 标头包括格式 采样
  • Django 中的单表继承

    Django 中是否明确支持单表继承 据我所知 该功能仍在开发和争论中 是否有我可以同时使用的库 黑客来捕获基本行为 我有一个混合不同对象的层次结构 具有 Employee 类 员工类型的子类和 manager id parent id 的
  • JPQL:查询多列时,什么样的对象包含结果列表?

    我正在尝试在 PHP Co 中做一些简单的事情 选择 COUNT x 作为 numItems AVG y 作为平均值 FROM Z 在 PHP 中 我会得到一个像 numItems 0 average 0 这样的简单数组 我可以像这样使用它
  • “找不到文件... bin\roslyn\csc.exe”[重复]

    这个问题在这里已经有答案了 In Visual Studio 2017 when hitting Ctrl F5 to run my ASP NET Framework Web API server I get Could not find
  • Perl 对数组引用的数组进行排序

    我对 Perl 比较陌生 我有一个名为 TransRef 的数组的引用 其中包含对数组的引用 我的目标是编写一个子程序 它将 TransRef 参数作为唯一参数 按第二个元素 字符串 对底层数组的引用进行排序 并将输出设置回 TransRe
  • for 循环和 for-each 循环之间有性能差异吗?

    以下两个循环之间的性能差异是什么 如果有 for Object o objectArrayList o DoSomething and for int i 0 i
  • 如何在 Apollo 客户端中使用没有 JSX 组件的 client.query?

    我正在尝试使用 React 在 Apollo 客户端中进行查询 而不返回 JSX 组件 只是一个对象 data对 Apollo 服务器进行公共查询时收到的对象 我尝试使用
  • C++11 元组性能

    我只是想通过使用使我的代码更加通用std tuple在很多情况下包括单个元素 我的意思是例如tuple
  • 如何在python中为一个if语句设置多个条件[重复]

    这个问题在这里已经有答案了 所以我正在 python 3 1 5 中编写一些代码 需要有多个条件才能发生某事 例子 def example arg1 arg2 arg3 if arg1 1 if arg2 2 if arg3 3 print
  • 以编程方式设置单选按钮的自定义绘图

    我正在 Android 中开发一个基本的绘画应用程序 但我似乎无法以编程方式为我的单选按钮设置自定义绘图 这些单选按钮由LayerDrawable与一个白色的ColorDrawable对于边框和插入黄色 或任何颜色 ColorDrawabl
  • 每种应用的样式都会发生一次回流吗?

    当我在 JavaScript 中执行此操作时 element style width 100px element style height 100px 我说文档中有 2 次回流对吗 如果我这样做 element setAttribute s
  • UICollectionViewCell 注册类失败,但注册笔尖有效

    创建自定义UICollectionViewCell for my UICollectionViewController 它通过注册笔尖来工作 但是 无法按班级注册 使用 registerClass 失败 按类注册似乎是正确的 它可以构建 但
  • 计算Excel行中的连续条纹

    我正在尝试计算 2 个值 当前连续和长期连续 每条记录位于 1 行并包含名称和值 每列的值都在 1 到 200 之间 例子 John Doe 14 16 25 18 40 65 101 85 14 19 18 9 3 Jane Doe 24
  • NavigationView 的自定义后退按钮文本

    如何更改后退按钮文本NavigationView当一个新的View被推 默认显示 返回 但我想将其更改为其他内容 目前在 SwiftUI 中可以实现吗 完整代码 struct SampleDetails View Environment p
  • Django 1.5 自定义用户模型 - 信号限制

    写的是在文档中 https docs djangoproject com en 1 5 topics auth customizing custom users and signals that 自定义用户模型的另一个限制是您不能使用 dj
  • 如何在mysql表中插入汉字?

    我想在mysql表中保存中文数据 谁能告诉我我必须在 mysql 和 PHP 中对其进行哪些设置 我的表将以英文和中文保存数据 某些列是英文 其他列是中文 单表可以吗 任何帮助将不胜感激 创建表时使用UTF 8 create table x
  • 是否可以直接在 ODBC 连接字符串中指定驱动程序 dll?

    我正在尝试使用 pyodbc 在便携式应用程序中连接到 SQL Server MS SQL Server 通过 FreeTDS 因为它应该是独立的 所以我想避免必须在系统上显式安装驱动程序 只需将 ODBC 驱动程序 dll 与应用程序一起
  • 在列之间添加空格而不丢失网格系统布局

    我想在列之间添加空格而不丢失网格系统布局 当我向卡片添加边距时 布局变成 3 张卡片而不是 4 张 这是代码 问题是我无法控制卡片之间的间距 每行应该有四张卡片 div class container div class row div c
  • Typescript 错误和展开运算符是由 ...props 引起的?

    您好 当我尝试将扩展运算符与 Typescript 一起使用时 我遇到了问题 我的功能是useFormikContext and useField 函数来自 Formik 的库 当我添加 ts ignore一切都按预期工作得很好 但是 如果