为什么传入泛型组件时React的as属性会导致TypeScript类型推断失效？

问题成因 #

1. 你当前定义的ComponentWithAs的泛型推导逻辑为：优先推导as参数对应组件的Props类型，再校验其余传入属性是否匹配该Props类型。
2. 当as传入未绑定具体泛型参数的泛型组件时，TypeScript不会主动使用后续传入的value、options等属性反向推导泛型组件的泛型参数，只会将泛型组件的Props默认推断为unknown，因此触发类型不匹配报错。

修复方案 #

方案1：调用时显式指定泛型参数 #

不需要修改原有组件类型定义，调用时手动绑定泛型即可解决报错：

// 方式1：给TestWithAs指定泛型参数
TestWithAs<GenericProps<string>>({
    as: GenericComp,
    value: "",
    options: [""],
    genericFunc: (test) => {}, // test会自动推导为string类型
})

// 方式2：直接给泛型组件绑定具体类型
TestWithAs({
    as: GenericComp<string>,
    value: "",
    options: [""],
    genericFunc: (test) => {},
})

方案2：调整ComponentWithAs类型定义，支持自动推导 #

修改类型定义逻辑，让TypeScript可以从所有传入的属性自动推导泛型：

// 替换原有ComponentWithAs定义即可
type ComponentWithAs = <C extends React.ComponentType<any>>(
  props: React.ComponentProps<C> & { as: C }
) => any;

let TestWithAs: ComponentWithAs = () => null;

修改后无需改动原有调用代码，TypeScript会自动根据传入的value、options等属性推导泛型组件的泛型参数，类型校验和推断都可以正常工作。

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