Typescript 错误和由...props 引起的传播运算符？

Question

嗨，当我尝试将扩展运算符与 Typescript 一起使用时，我运行遇到了问题。

我有函数，其中 useFormikContext() 和 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; } 类型，这意味着有一个键 (x) 的值类型为 any。但是，我不知道如何解决打字稿给出的这个错误。

Answer 1

好的，经过一番研究，我找到了修复错误的方法。

语法'{ [x: string]: any; }' 让我知道这个对象有一个 x 键，它是一个值为 any 的字符串。在提出问题时我不知道这一点，我有点困惑。 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);
      }}
    />
  );

Typescript 错误和由...props 引起的传播运算符？

Typescript Error and the spread operator arising from ...props?

javascript

node.js

typescript

reactjs

formik