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

Question

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

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

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

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

编译器不会抱怨泛型。

Answer 2

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

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

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

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

的隐式约束

Answer 3

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

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

Answer 4

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

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

How to use generics with arrow functions in Typescript/JSX with React?