TypeScript泛型未校验组件与参数类型匹配，如何修正？

原来的代码里，ComponentType被定义成了(...args: any) => any，这种宽泛的类型会让TypeScript把Parameters<TIcon>[0]推导成any，所以不管给arg传什么类型的值，都不会触发错误，自然没法校验组件和参数的类型匹配性。

调整泛型约束，让组件和参数的类型能被TypeScript正确关联起来，修改后的代码如下：

// 删掉原来宽泛的ComponentType，直接在泛型里约束组件为函数类型
type PlatformNotificationProps<TIcon extends (...args: any[]) => any> = {
  component: TIcon;
  // 取组件的第一个参数类型，组件没参数的话就是never类型
  arg: Parameters<TIcon>[0];
};

// 给PlatformNotification加上泛型，让TS能自动推导传入的组件类型
const PlatformNotification = <TIcon extends (...args: any[]) => any>(props: PlatformNotificationProps<TIcon>) => {};

const Icon = (name: string) => '';

// 这时候TS就会报错：类型“number”不能赋给类型“string”的参数
const result = PlatformNotification({
  component: Icon,
  arg: 100,
});

如果你的场景里，组件只会接收单个参数，可以进一步限制类型，避免组件有多个参数时arg只取第一个的情况：

// 约束组件为仅接收单个参数的函数
type SingleArgComponent<TArg> = (arg: TArg) => any;

type PlatformNotificationProps<TArg> = {
  component: SingleArgComponent<TArg>;
  arg: TArg;
};

const PlatformNotification = <TArg>(props: PlatformNotificationProps<TArg>) => {};

const Icon = (name: string) => '';

// 同样会触发类型不匹配的错误
const result = PlatformNotification({
  component: Icon,
  arg: 100,
});

这样改完之后，只要arg的类型和组件要求的参数类型不匹配，TypeScript就会立刻抛出错误，实现你要的类型校验效果。

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