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

Question

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

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

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

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

Intellisense非常沮丧和抱怨，因为它试图让＆lt; T＆gt;进入React JSX元素。但我的目的是让编译器将其视为通用类型指示符。

编译器抱怨：

  

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

我尝试了很多语法解决方法，试图让IDE和编译器让我逃脱J​​SX并强制使用＆lt; T＆gt;编译器将其理解为通用，就像JSX未使用时一样。但我找不到这种神奇的酱油。

任何比我更聪明的人能够解决这个问题吗？

Answer 1

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

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

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

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

Answer 2

我无法想到解决这个问题的方法，并且在您了解其中之后会很高兴 但是，这是实现相同目标的另一种方式：

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

编译器不会抱怨泛型。

Answer 3

不漂亮，但通常的解决方法是在类型参数中添加一个尾随逗号：

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