reactjs - 在 TypeScript 中将 onChange 值设为没有类型断言的泛型类型

Question

我已经创建了一个带有选项元素的通用反应组件，如下所示： import * as React from "react";

  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，但我想没有办法解决它。解决问题的替代方法也受到欢迎。那就是确保价值是预先确定的类型。