如何在TSX组件中显式指定泛型参数类型？

结论 #

你提到的<GenericComponent<'foo' | 'bar'> />写法完全可行，这是TypeScript 2.9及以上版本原生支持的标准语法，比给单个prop加类型断言的写法更简洁严谨。

正确使用示例 #

针对你给出的场景，直接在JSX标签上显式传入泛型参数即可解决类型推导过宽的问题，不需要额外对value做类型断言：

class GenericComponent<T> extends React.Component<{
    value: T;
    update: (value: T) => void;
}, any> {
    // 组件逻辑
}

class AnotherComponent extends React.Component<any, any> {
    render() {
        let foobar: 'foo' | 'bar';
        return <View>
            <GenericComponent<'foo' | 'bar'>
                value={'foo'} 
                // 此处update的入参自动推导为 'foo' | 'bar' 类型，无报错
                update={value => foobar = value} 
            />
        </View>
    }
}

低版本兼容方案 #

如果你的项目使用TypeScript 2.9以下版本（不支持JSX直接传泛型参数），可以使用以下两种替代方案，比单独给value加断言更易维护：

• 提前定义固定泛型的组件别名，适合多处复用同类型泛型组件的场景

// 预先声明绑定了固定泛型的组件类型
const FooBarComponent = GenericComponent as new () => GenericComponent<'foo' | 'bar'>;

// 使用时直接调用别名组件，无需重复标注类型
<FooBarComponent value={'foo'} update={val => foobar = val} />

• 对整体props做类型标注，适合单次使用的场景

const componentProps: React.ComponentProps<typeof GenericComponent<'foo' | 'bar'>> = {
    value: 'foo',
    update: value => foobar = value
};
<GenericComponent {...componentProps} />

无效写法说明 #

你提到的<GenericComponent/> as GenericComponent<'foo' | 'bar'>写法不可行，as类型断言仅作用于完整表达式，JSX开始标签不属于独立表达式，该写法会直接触发语法错误。

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