正在将onChange值设置为泛型类型，而TypeScript中没有类型断言

Question

我创建了一个具有如下选项元素的通用react组件：从"React"导入*作为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中使用类型断言。CCD_ 1。此外，我看到整个createSelect突然变得非常冗长，到处都是对OptionValues的引用，但我想这是没有办法的。解决问题的其他方法也很受欢迎。这就是确保值是预先确定的类型。

Answer 1

在您的情况下，您实际上需要一个类型保护，因为类型脚本并不那么智能。

如果你的Select组件在内心深处就是我认为的那样，它永远不会工作。

参见类型保护

type OptionValues = 'FOO' | 'BAR' | 'BAZ' | 'NO_ANSWER'
const isOptionValue = (value: unknown): value is OptionValues =>
typeof value === 'string' && ['FOO', 'BAR', 'BAZ', 'NO_ANSWER'].includes(value)
const createSelect = (selectedOption: OptionValues, onChange: (v: OptionValues) => void): JSX.Element => {
const changeHandler = (event: React.ChangeEvent<HTMLSelectElement>): void => {
const value = event.currentTarget.value
if(isOptionValue(value))
onChange(value);
}
...