如何用TypeScript定义支持Props类型重载的React组件？

当然可以，通过TypeScript的泛型就能实现这个需求——让组件的Props与传入的value类型绑定，确保同一组件实例仅处理单一类型，且onChange回调始终返回与value同类型的新值。

修正后的实现代码 #

import { useState } from 'react'

// 定义泛型Props类型，绑定value和onChange的参数类型
type IMyComponentProps<T> = {
    value: T
    onChange: (value: T) => void
}

// 组件使用泛型T，并约束为string或number类型
function MyComponent<T extends string | number>({
    value,
    onChange
}: IMyComponentProps<T>) {
    const onClickHandler = () => {
        // 通过typeof判断当前value类型，生成对应类型的新值
        if (typeof value === 'number') {
            onChange((value + 1) as T)
        } else {
            onChange((value + 'A') as T)
        }
    }

    return (
        <>
            <div>{value}</div>
            <div>
                <button onClick={onClickHandler}>修改值</button>
            </div>
        </>
    )
}

function Parent() {
    const [x, setX] = useState<string>('A')
    const [y, setY] = useState<number>(1)

    return (
        <div>
            {/* 传入string类型，onChange自动匹配string类型回调 */}
            <MyComponent value={x} onChange={setX} />
            {/* 传入number类型，onChange自动匹配number类型回调 */}
            <MyComponent value={y} onChange={setY} />
        </div>
    )
}

export default Parent

关键说明 #

• 泛型约束：T extends string | number限定组件仅接受字符串或数字类型的value，避免传入其他不支持的类型
• 类型绑定：IMyComponentProps<T>让onChange的参数类型与value完全一致，确保回调返回值类型匹配
• 类型守卫：通过typeof value判断当前类型，生成对应逻辑的新值，结合类型断言as T让TypeScript正确识别返回值类型

内容的提问来源于stack exchange，提问作者Emmanuel P.