Получение значения onChange общего типа без подтверждения типа в TypeScript - PullRequest
Новая
       9

Получение значения onChange общего типа без подтверждения типа в TypeScript

0 голосов
/ 11 декабря 2018

Я создал общий компонент реагирования с такими элементами опций, как: import * as React из "act "; 

  export interface Option {
    value: string;
    label: string;
    disabled?: boolean;
  }

  export interface SelectProps<CustomOption extends Option> {
    options: CustomOption[];
    onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
    selectedValue: string;
  }

  export const Select: React.FunctionComponent<SelectProps<Option>> = (props): JSX.Element => {
    const options = props.options.map(o => {
      return (
        <option key={o.value} value={o.value} disabled={o.disabled}>
          {o.label}
        </option>
      );
    });

    return (
      <select onChange={props.onChange} value={props.selectedValue}>
        {options}
      </select>
    );
  };

Я использую это так: 

  type OptionValues = "FOO" | "BAR" | "BAZ" | "NO_ANSWER";

  const createSelect = (selectedOption: OptionValues, onChange: (v: OptionValues) => void): JSX.Element => {
    const changeHandler = (event: React.ChangeEvent<HTMLSelectElement>): void => onChange(event.currentTarget.value as OptionValues);
    interface SelectOptions extends Option {
      value: OptionValues;
    }

    const selectProps: SelectProps<SelectOptions> = {
      onChange: changeHandler,
      selectedValue: selectedOption,
      options: [
        {
          value: "FOO",
          label: "foo"
        },
        {
          value: "BAR",
          label: "bar"
        },
        {
          value: "BAZ",
          label: "baz"
        },
        {
          value: "NO_ANSWER",
          label: " -- ",
          disabled: true
        }
      ]
    };
    return <Select {...selectProps} />;
  };

Есть ли способ избежать использования утверждения типа в changeHandler.event.currentTarget.value as OptionValues.Также я вижу, что весь createSelect неожиданно очень многословен со ссылками на OptionValues ​​везде, но я думаю, что нет никакого способа обойти это.Альтернативные способы решения проблемы также приветствуются.Это означает, что значение имеет предопределенные типы.

...