如何在带有 React 的 Typescript/JSX 中使用带有箭头函数的泛型？

Question

使用 Typescript，在 Visual Studio 中键入“.ts”文件，考虑以下声明：

export const foo = <T>(myObject: T) => myObject.toString();

这很好用，类型检查很好，一切都很好。

现在将完全相同的代码放入用于 JSX 和 React 的“.tsx”文件中。

Intellisense 非常沮丧并抱怨，因为它试图将 变成一个 React JSX 元素。但我的意图是让编译器将其视为泛型类型指示符。

编译器抱怨：

[gulp-typescript] 17008 JSX 元素 'T' 没有对应的结束标记。

我尝试了许多语法变通方法，试图让 IDE 和编译器让我摆脱 JSX 并强制编译器将 理解为泛型，就像不使用 JSX 时一样.但我找不到能做到这一点的魔法酱。

有比我聪明的人能解决这个问题吗？

Answer 1

当您只有一个类型参数时，TypeScript 不确定它是否是 JSX 开始标记。它必须选择一个，所以它与 JSX 一起使用。

如果你想要一个语义完全相同的函数，可以显式列出T的约束：

const foo = <T extends {}>(myObject: T) => myObject.toString();

这打破了 TypeScript 的歧义，因此您可以使用泛型类型参数。它还具有相同的语义，因为类型参数始终具有 {} 的隐式约束。

Answer 2

通常的解决方法是添加尾随逗号：

export const foo = <T,>(myObject: T) => myObject.toString();

Answer 3

我个人使用extends unknown。听起来对我来说最安全

const foo = <T extends unknown>(myObject: T) => myObject.toString();

Answer 4

我想不出办法解决这个问题，我会很高兴你知道这一点。
但是，这里有一种不同的方法来实现相同的目的：

export const foo = function<T>(myObject: T) { return myObject.toString(); }

编译器不会抱怨泛型。