您好,当我尝试将扩展运算符与 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(使用前将#替换为@)