Ошибка машинописи и оператор распространения, возникающий из ... реквизита? - PullRequest
Новая
       6

Ошибка машинописи и оператор распространения, возникающий из ... реквизита?

0 голосов
/ 20 апреля 2020

Привет, у меня возникают проблемы, когда я пытаюсь использовать оператор распространения с 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. Однако я не знаю, как исправить эту ошибку, приведенную машинописным шрифтом.

1 Ответ

1 голос
/ 20 апреля 2020

Хорошо, после некоторых исследований я обнаружил, что исправил ошибки.

Синтаксис '{[x: string]: any; } 'сообщает мне, что у этого объекта есть ключ x, который является строкой со значением any. Я не знал этого во время вопроса, я был немного смущен. https://www.typescriptlang.org/docs/handbook/advanced-types.html <- типы индекса и подписи индекса </p>

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);
      }}
    />
  );
...