我有一个带有回调的下拉组件 onSelect:(option: string) => void
我将其用作一个应用程序中的排序选择器，其中的选项属于枚举类型：
enum SORT_OPTIONS {
LATEST = 'LATEST',
OLDEST = 'OLDEST'
}
const onSortSelect = (val: SORT_OPTIONS) => {...}
<MyDropdown onSelect={onSortSelect} ... />
和打字稿抱怨：
Type '(val: SORT_OPTIONS) => void' is not assignable to type '(option: string) => void'.
Types of parameters 'val' and 'option' are incompatible.
Type 'string' is not assignable to type 'SORT_OPTIONS'. TS2322
这有点违反直觉，但很有意义，因为在MyDropdown字符串option中将传递给onSortSelect回调，这需要枚举值。
问题是在这里修复类型的最佳方法是什么？IMO两个函数的键入均正确，onSelect应接受任何字符串，因为MyDropdown可以在任何上下文中使用。onSortSelect应该只接受SORT_OPTIONS。
目前，我正在转换onSortSelect的类型：<MyDropdown onSelect={onSortSelect as (val:string) => void} ... />但是感觉很冗长
我设法用泛型修复了类型，没有打字稿错误
enum SORT_OPTIONS {
NEWEST='1',
OLDEST='2'
}
interface DropdownProps<T extends string> {
onSelect: (val: T) => void;
options: T[];
}
const Dropdown = <T extends string>(props: DropdownProps<T> & {children?: React.ReactNode}) =>{
const {onSelect, options} = props;
return <select onChange={(evt) => onSelect(evt.target.value as T)}>
{options.map(option => <option>{option}</option>)}
</select>
};
const TestComp:React.FC = () => {
const onSelect = (val: SORT_OPTIONS) => {
switch (val) {
case SORT_OPTIONS.OLDEST:
console.log('old');
break;
case SORT_OPTIONS.NEWEST:
console.log('new');
break;
}
};
const onSelect2 = (val: string) => {
console.log(val);
};
return <>
<Dropdown
options={[SORT_OPTIONS.NEWEST, SORT_OPTIONS.OLDEST]}
onSelect={onSelect}
/>
<Dropdown
options={['aaa', 'bbb']}
onSelect={onSelect2}
/>
</>
};
注意
Dropdown使用常规输入React.FC，请参见此处的讨论：如何在功能组件的React中的props中使用泛型？如果您从链接中找到不同的结论，请发表评论。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句