Typescript 錯誤和擴展運算符由……道具引起？

Question

嗨，當我嘗試將擴展運算符與 Typescript 一起使用時，我遇到了問題。

我有 function 其中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

據我了解，此 function 接受擴展運算符，這意味着它接受具有 0 個或多個屬性的 object / 數組。 它自動被分配了類型{ [x: string]: any; } { [x: string]: any; }這意味着有一個值類型為 any 的鍵 (x)。 但是，我不知道如何修復 typescript 給出的這個錯誤。

Answer 1

好的，經過一番研究，我發現可以修復這些錯誤。

語法 '{ [x: string]: any; }' 讓我知道這個 object 的鍵 x 是一個值為 any 的字符串。 在提出問題時我不知道這一點，我有點困惑。 https://www.typescriptlang.org/docs/handbook/advanced-types.html <--索引類型和索引簽名

Typescript 還讓我知道useField() function 需要值字符串的屬性名稱。 所以我使用這個新發現的知識輸入它並刪除了一個未使用的 function 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);
      }}
    />
  );