Definitelytyped: 반응 선택: Select.on잘못된 입력 변경(?)

나는 이것이 완전히 혼란스럽다는 것을 알았다.

핸들의 value 는 선택한 옵션의 배열입니다( 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 });
}

onChange 핸들러의 첫 번째 인수는 OptionType 유형이 될 수 없습니다. OptionType 값이 하나, 여러 개 또는 전혀 없을 수 있기 때문입니다.

TypeScript와 결합된 onChange 핸들러에 대한 보다 심층적인 논의는 https://github.com/JedWatson/react-select/issues/2902 를 참조

@rvanlaarhoven -- 단일 또는 배열을 허용하도록 OP를 업데이트했습니다. IMO 배열은 isMulti 선택 여부에 관계없이 핸들러에 전달되어야 합니다. 우리는 배열을 예상하고 매개변수가 배열인지 확인할 필요가 없습니다. 하지만 음...

@JoshMcCullough에 동의합니다.
단일 데이터 유형(이 경우에는 배열)만 처리하면 더 쉬울 것입니다.
단일 선택을 사용하는 경우 배열에서 단일 항목만 가져오고 그렇지 않으면 배열로 작업합니다. 추가 검사가 필요하지 않습니다. 동시에, 이와 같은 라이브러리를 다룰 때 이것이 단순한 변화가 아님을 이해합니다.

나에게 가장 큰 성가심은 isMulti 값에 따라 배열 또는 단일 값이 반환된다는 것입니다. 이는 유형 시스템이 이미 onChange 유형을 알고 있어야 함을 의미합니다.

이 문제를 해결하기 위해 일종의 통합 또는 조건부 입력을 수행할 수 있습니까? (경고: 검증되지 않은 아이디어)

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

또는 아마도

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;

편집: 이것에 대해 더 생각한 후에 isMulti 를 하드 코딩하면 유형을 유추할 수 있습니다(예: <Select isMulti={false} /> 하지만 <Select isMulti={getValue()} /> 와 같은 명령문을 제공하는 경우에는 그렇지 않으므로 이 전략 아마 작동하지 않을 것입니다.

컴파일러 오류 없이 현재 정의를 어떻게 사용합니까?

유형이 OptionType | OptionType[] 가 아니고 typescript가 이를 유추할 수 없기 때문에 isArray 검사가 더 이상 충분하지 않은 것 같습니다.

여기서 해결 방법으로 형식 어설션을 사용했습니다.

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

다중 값 undefined, Array<Option>, Option 대해 인터페이스(Typescript)를 사용할 수 있습니까?

@hoetmaaiers 도우미를 만들 수 있습니다.

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

해결 방법으로 인터페이스를 정의했습니다.
interface iOption { label: string; value: string; };

그런 다음 매개 변수를 캐스팅했습니다.
onChange={(option) => myMethod((option as iOption).value) }

as 를 사용하면 typescript를 사용하는 모든 목적이 무효화됩니다. 나는 누구에게서 가치를 얻어야 하는가?

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

as 를 사용하지 않고? 현재 해결 방법은 솔루션이 아니며 향후 버그가 발생할 수 있습니다(아마도).

나는 여전히이 문제를 겪고 있으며 모든 onChange에서 수행하는 것은 정말 성가신 일입니다 (다중 선택을 사용하지 않기 때문에) 단일 옵션 유형으로 캐스트 ....

매번 item =>(item as OptionTypeBase).value를 사용해야 합니다. 정말 나빠.