带有泛型的 Typescript JSX - 参数隐式具有“任何”类型

Posted 2023-02-22

【中文标题】带有泛型的 Typescript JSX - 参数隐式具有“任何”类型

【英文标题】：Typescript JSX with Generics - Parameter implicitly has an 'any' type

【发布时间】：2022-01-07 13:23:19

【问题描述】：

当使用带有泛型的 JSX 语法时，Typescript 能够正常推断属性，但函数参数的类型除外。

示例代码：

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


type Props<T extends 'a' | 'button'> = Dictionary[T] & 
  as: T;
;

function Test<T extends 'a' | 'button'>(args: Props<T>) 
  return null;


<Test as="a" href="#" onClick=(arg) =>  />; // Parameter 'arg' implicitly has an 'any' type.

Test(
  as: 'a',
  href: '#',
  onClick: (arg) => , // No error
);

TS Playground

如果我将鼠标放在 onClick 属性上，它可以知道 onClick 的类型（React.MouseEventHandler），但仍然无法推断参数的类型。

【问题讨论】：

看起来像一个 TS 错误，请参阅 github.com/microsoft/TypeScript/issues/44596。

如果您提供明确的泛型参数，它会按预期工作：<Test<'a'> as="a" href="#" onClick=(e) => />;。

@captain-yossarian 我认为它可能与github.com/microsoft/TypeScript/issues/44596 相同，无论如何，OP 显然已经在github.com/microsoft/TypeScript/issues/46961 完成了此操作，所以 ????‍♂️。

@jcalz 你是对的，它看起来对我来说也是重复的。

@jcalz 我很欣赏你搜索打字稿问题的能力。我试图找到相关问题但没有成功：D

【参考方案1】：

只需使用args: any 将其明确定义为any，它就会停止将其显示为错误:)