generics - 如何在带有 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 element 'T' has no corresponding closing tag.

我已经尝试了很多语法变通办法来尝试让 IDE 和编译器都让我转义 JSX 并强制编译器将 理解为通用的，就像在没有使用 JSX 的情况下一样.但我找不到执行此操作的神奇方法。

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

Answer 1

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

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

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

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