javascript - Kesalahan Typescript dan operator spread yang muncul dari ...props?

Hai, saya mengalami masalah saat mencoba menggunakan operator spread dengan Typescript.

Saya memiliki fungsi di mana fungsi useFormikContext() dan useField() berasal dari pustaka Formik. Ketika saya menambahkan //@ts-ignore semuanya berjalan dengan sangat baik seperti yang diinginkan, namun, tanpa baris itu saya menerima sebuah kesalahan:

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

Dari yang saya pahami, fungsi ini menerima operator spread, jadi itu dimaksudkan untuk mengatakan bahwa fungsi ini menerima objek/array dengan 0 atau lebih properti. Secara otomatis jenisnya ditetapkan sebagai { [x: string]: any; } yang dimaksudkan untuk mengatakan bahwa ada sebuah kunci (x) dengan tipe nilai apa pun. Namun, saya tidak tahu bagaimana cara memperbaiki kesalahan ini yang diberikan oleh TypeScript.

Jawaban #1

Oke setelah beberapa penelitian, ini yang saya temukan untuk memperbaiki kesalahan-kesalahan tersebut.

Sintaks '{ [x: string]: any; }' memberi tahu saya bahwa objek ini memiliki kunci x yang merupakan string dengan nilai apapun. Saya tidak tahu ini pada saat pertanyaan, saya sedikit bingung. https://www.typescriptlang.org/docs/handbook/advanced-types.html <-- tipe indeks dan tanda tangan indeks

Typescript juga memberitahuku bahwa fungsi useField() memerlukan nama properti dari tipe string. Jadi aku mengetiknya menggunakan pengetahuan baru ini dan menghapus fungsi selected yang tidak digunakan, dan kode baru sekarang terlihat seperti ini:

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