如何在带有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的歧义，因此您可以使用通用类型参数。它也具有相同的语义，因为类型参数始终具有的隐式约束{}。