Definitelytyped: react-select: Select.onChange salah ketik (?)

Saya menemukan ini sepenuhnya membingungkan.

value di pegangan adalah larik opsi yang dipilih (saat menggunakan prop isMuli ).

_onTagChange(
  value: ReactSelectTypes.ValueType<{value: number; label: string}>,
  action: ReactSelectTypes.ActionMeta
) {
  console.log('l68:', value, ' action:', action);
  switch(action.action) {
    case 'pop-value':
    case 'remove-value':
  }
  if (value && value.length > 0) {
   e let firstOption = value[0]; // Errors here with: Element implicitly has an 'any' type because type '{ value: number; label: string; } | { value: number; label: string; }[]' has no index signature.

  }
  // this.setState({ categoryTags: tags });
}

Argumen pertama dari onChange handler tidak bisa begitu saja bertipe OptionType , karena dapat berupa satu-, banyak- atau tidak ada nilai OptionType .

Lihat https://github.com/JedWatson/react-select/issues/2902 untuk diskusi lebih mendalam tentang handler onChange yang dikombinasikan dengan TypeScript.

@rvanlaarhoven -- Diperbarui OP untuk menerima tunggal atau array. IMO array harus diteruskan ke handler terlepas dari apakah pilih isMulti . Kita seharusnya hanya mengharapkan sebuah array dan tidak perlu memeriksa apakah parameternya adalah sebuah array. Tapi wah...

Saya setuju dengan @JoshMcCullough
Akan lebih mudah jika kita hanya berurusan dengan satu tipe data, dalam hal ini, Array.
Jika kami menggunakan pilihan tunggal, kami hanya mengambil satu item dari array, jika tidak, kami bekerja dengan array - tidak diperlukan pemeriksaan tambahan. Pada saat yang sama, saya mengerti ini bukan perubahan sederhana ketika berhadapan dengan perpustakaan seperti ini.

Gangguan terbesar bagi saya adalah bahwa array atau nilai tunggal dikembalikan tergantung pada nilai isMulti . Ini berarti sistem tipe seharusnya sudah mengetahui tipe onChange .

Bisakah kita melakukan semacam penyatuan atau pengetikan bersyarat untuk menyelesaikan ini? (peringatan: ide yang belum teruji)

interface BaseProps<OptionType extends OptionTypeBase = { label: string; value: string }> extends SelectComponentsProps {
  ... /* all existing fields except isMulti and onChange */
}

interface SingleValueProps<...> extends BaseProps<...> {
  isMulti: false;
  onChange: (value: OptionType | null | undefined, action: ActionMeta) => void;
}

interface MultiValueProps<...> extends BaseProps<...> {
  isMulti: true;
  onChange: (value: OptionsType<OptionType> | null | undefined, action: ActionMeta) => void;
}

/* where the props are defined */
selectProps: SingleValueProps<...> | MultiValueProps<...>

atau mungkin

interface Props<IsMulti extends boolean, OptionType extends OptionTypeBase = { label: string; value: string }> extends SelectComponentsProps {
  ...
  isMulti: IsMulti,
  onChange: (value: ValueType<IsMulti, OptionType>, action: ActionMeta) => void;
  ...
}

export type ValueType<IsMulti extends boolean, OptionType extends OptionTypeBase> =
  (IsMulti extends false ? OptionType : OptionsType<OptionType>) | null | undefined;

EDIT: setelah memikirkan ini lagi, tipenya dapat disimpulkan jika Anda melakukan hard-code isMulti (misalnya <Select isMulti={false} /> tetapi tidak jika Anda memberikan pernyataan seperti <Select isMulti={getValue()} /> , jadi strategi ini mungkin tidak akan berhasil.

Bagaimana cara menggunakan definisi saat ini tanpa kesalahan kompiler?

Tampaknya pemeriksaan isArray tidak lagi memadai karena tipenya bukan OptionType | OptionType[] dan TypeScript tidak dapat menyimpulkannya.

Saya menggunakan pernyataan tipe sebagai solusi di sini:

props.onChange((v as YourOptionTypeHere).value);

Apakah antarmuka (TypeScript) tersedia untuk multi nilai undefined, Array<Option>, Option ?

@hoetmaaiers Anda bisa membuat pembantu:

type Nullable<T> = T | null | undefined;

Sebagai solusinya, saya mendefinisikan antarmuka:
interface iOption { label: string; value: string; };

Dan kemudian, cast parameternya:
onChange={(option) => myMethod((option as iOption).value) }

menggunakan as mengalahkan seluruh tujuan menggunakan TypeScript. Dari siapa saya harus mendapatkan nilai?

option: ValueType<{value :string, label: string}>

tanpa menggunakan as ? solusi saat ini bukanlah solusi dan mungkin (mungkin akan) menyebabkan bug di masa mendatang.

Saya masih mengalami masalah ini dan itu sangat menjengkelkan untuk dilakukan pada setiap onChange (karena saya tidak menggunakan multi pilih) pemeran ke jenis opsi tunggal ....

Setiap kali saya harus menggunakan item => (item sebagai OptionTypeBase).value. Sangat buruk.