Typescript带泛型JSX用法中函数参数隐式为any类型问题

问题原因 #

这是TypeScript处理JSX泛型组件的已知类型推断限制：解析JSX属性时，无法像普通函数调用那样先通过as属性推导出泛型T的具体类型，再反向推导回调函数的参数类型，因此会触发隐式any报错。而普通函数调用的参数推断优先级更高，因此可以正常工作。

解决方案 #

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

在使用JSX调用组件时，手动传入泛型的具体类型，即可触发正常的类型推断：

<Test<'a'> as="a" href="#" onClick={(arg) => {}} />
// 此时arg会自动被推断为React.MouseEvent<HTMLAnchorElement, MouseEvent>类型

方案2：将泛型Props改写为联合类型（推荐） #

不需要修改组件调用逻辑，从定义层解决推断问题：

interface Dictionary {
  a: JSX.IntrinsicElements['a'];
  button: JSX.IntrinsicElements['button'];
}

// 生成Props联合类型，替代原有泛型定义
type Props = {
  [K in keyof Dictionary]: Dictionary[K] & { as: K }
}[keyof Dictionary]

// 组件不再需要声明泛型
function Test(args: Props) {
  return null;
}

// 直接调用即可自动推断参数类型，无报错
<Test as="a" href="#" onClick={(arg) => {}} /> 

方案3：手动标注回调参数类型 #

如果不想修改原有组件定义，也可以直接给回调参数加类型标注：

<Test as="a" href="#" onClick={(arg: React.MouseEvent<HTMLAnchorElement>) => {}} />

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