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

Posted 2023-03-13

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

【英文标题】：How to use generics with arrow functions in Typescript/JSX with React?

【发布时间】：2017-04-27 23:53:24

【问题描述】：

使用 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 时一样.但我找不到能做到这一点的魔法酱。

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

【问题讨论】：

见***.com/questions/32308370/…

【参考方案1】：

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

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

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

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

【讨论】：

这是一个非常好的解决方案。谢谢。注意：Resharper 错误地将其标记为错误。但事实并非如此。

不要使用这个。如今（TS 3.5 及更高版本）隐式约束为 unknown: devblogs.microsoft.com/typescript/announcing-typescript-3-5/…

【参考方案2】：

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

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

【参考方案3】：

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

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

【参考方案4】：

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

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

编译器不会抱怨泛型。

【讨论】：

确实 this 会起作用，但当然它不会像箭头函数那样在任何方面都表现得像箭头函数，并且必须使用正确的“this”绑定来解决问题。但话虽如此，它可能是唯一的解决方案。不幸的是！

声明export const时没有this范围