Typescript错误和... props引起的传播算子?

问题描述

我在尝试将Spread运算符与Typescript一起使用时遇到问题.

Hi I am running into issues when I am trying to use the spread operator with Typescript.

我具有useFormikContext()和useField()函数来自Formik库的函数.当我添加//@ts-ignore时，一切都按预期运行，但是没有该行，我会收到错误消息:

I have the function where the useFormikContext() and useField() functions are from Formik's library. When I add the //@ts-ignore everything works superbly as intended however, without that line I receive an error:

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.但是，我不知道如何解决打字稿给出的错误.

From what I understand this function accepts a spread operator, so that is meant to say it accepts an object / array with 0 or more properties. it automatically got assigned the type { [x: string]: any; } which is meant to say that there is a key (x) with a value type of any. However, I don't know how to fix this error given by typescript.

推荐答案

好的，在这里进行了一些研究之后，我发现可以解决这些错误.

Okay after some researching here is what I found to fix the errors.

语法'{[x:string]:任意； }'让我知道该对象具有x的键，x是一个字符串，其值为any.在提问时我不知道这一点，我有点困惑. https://www.typescriptlang.org/docs/handbook/advanced-types. html <-索引类型和索引签名

The syntax '{ [x: string]: any; }' is letting me know that this object has a key of x which is a string with a value of any. I didn't know this at the time of the question I was confused a little bit.https://www.typescriptlang.org/docs/handbook/advanced-types.html <-- index types and index signatures

Typescript也让我知道useField()函数需要值字符串的属性名称.所以我使用这个新发现的知识键入了它，并摆脱了未使用的函数selected，新代码现在看起来像这样:

Typescript was also letting me know that the useField() function required the property name of value string. so I typed it using this newfound knowledge and got rid of an unused function selected and the new code now looks like this:

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引起的传播算子?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！