如何从传入Props推导TypeScript React组件的函数参数类型

你遇到的问题是因为用React.FC包裹泛型接口时，必须显式指定泛型参数，导致无法自动推导。正确的做法是把组件定义为泛型函数，让TypeScript从传入的items自动推断类型。

优化后的代码实现 #

interface DropdownProps<T> {
    items: {
        value: T;
        title: string;
    }[];
    defaultSelected?: number;
    // 直接用T更简洁，和items里的value类型完全一致
    onSelected: (value: T) => void;
}

// 把组件定义为泛型函数，不用React.FC
export function Dropdown<T>(props: DropdownProps<T>) {
    // 组件逻辑...
    return <div>{/* 渲染内容 */}</div>;
}

使用示例（自动推导类型） #

当你传入不同类型的items时，onSelected的参数类型会自动匹配：

// 示例1：value为string类型
<Dropdown
    items={[
        { value: "apple", title: "苹果" },
        { value: "banana", title: "香蕉" }
    ]}
    onSelected={(value) => {
        // value类型自动推导为string
        console.log(value.toUpperCase());
    }}
/>

// 示例2：value为number类型
<Dropdown
    items={[
        { value: 1, title: "选项1" },
        { value: 2, title: "选项2" }
    ]}
    defaultSelected={0}
    onSelected={(value) => {
        // value类型自动推导为number
        console.log(value + 1);
    }}
/>

为什么这样可行？ #

• 泛型函数Dropdown<T>在调用时，TypeScript会根据props.items中value的实际类型，自动推断出T的具体类型。
• 相比React.FC<DropdownProps<T>>，泛型函数的写法不需要在定义组件时指定T，完全由传入的props决定类型，保留了类型安全的同时也更灵活。

内容的提问来源于stack exchange，提问作者Nikitorius