Definitelytyped: reaccionar-seleccionar: Select.onChange mecanografía mal (?)

Encontré esto completamente confuso.

value en el identificador es la matriz de opciones seleccionadas (cuando se usa isMuli prop).

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

El primer argumento del controlador onChange no puede ser simplemente del tipo OptionType , ya que puede ser uno, varios o ningún valor de OptionType .

Consulte https://github.com/JedWatson/react-select/issues/2902 para obtener una discusión más detallada sobre el controlador onChange en combinación con TypeScript.

@rvanlaarhoven : OP actualizado para aceptar single o array. En mi opinión, se debe pasar una matriz al controlador independientemente de si se selecciona o no isMulti . Solo deberíamos esperar una matriz y no tener que verificar si el parámetro es una matriz. Pero, oh, bueno...

Estoy de acuerdo con @JoshMcCullough
Sería más fácil si solo tuviéramos que tratar con un solo tipo de datos, en este caso, Arrays.
Si usamos selección única, simplemente tomamos el elemento individual de la matriz, de lo contrario, trabajamos con la matriz, no se necesitan verificaciones adicionales. Al mismo tiempo, entiendo que este no es un cambio simple cuando se trata de una biblioteca como esta.

La mayor molestia para mí es que se devuelve una matriz o un valor único dependiendo del valor de isMulti . Esto significa que el sistema de tipos ya debería conocer el tipo de onChange .

¿Podríamos hacer algún tipo de unión o mecanografía condicional para resolver esto? (advertencia: ideas no probadas)

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<...>

o quizás

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;

EDITAR: después de pensar un poco más en esto, el tipo es inferible si codifica isMulti (por ejemplo, <Select isMulti={false} /> pero no si proporciona una declaración como <Select isMulti={getValue()} /> , entonces esta estrategia probablemente no funcione.

¿Cómo utilizo la definición actual sin errores del compilador?

Parece que la comprobación isArray ya no es suficiente porque el tipo no es OptionType | OptionType[] y el mecanografiado no puede inferirlo.

Usé una afirmación de tipo como solución aquí:

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

¿Hay una interfaz (Typecript) disponible para el valor múltiple undefined, Array<Option>, Option ?

@hoetmaaiers Podrías hacer un ayudante:

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

Como solución temporal, definí una interfaz:
interface iOption { label: string; value: string; };

Y luego, emitió el parámetro:
onChange={(option) => myMethod((option as iOption).value) }

usar as anula todo el propósito de usar mecanografiado. ¿Quién se supone que debo sacar el valor de un

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

sin usar as ? la solución alternativa actual no es una solución y puede (probablemente lo hará) provocar errores en el futuro.

Todavía tengo este problema y es realmente molesto hacerlo en cada onChange (porque no estoy usando ninguna selección múltiple) la conversión al tipo de opción única ...

Cada vez que debo usar item => (item as OptionTypeBase) .value. Muy mal.