如何将仿制药与Arrow函数在打字稿/JSX中与React一起使用

Question

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

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

这可以正常工作，类型检查很好，一切都很好。

现在将完全相同的代码放入用于JSX并进行反应的" .tsx"文件中。

IntelliSense变得非常沮丧和抱怨，因为它试图将＆lt; t>变成React JSX元素。但我的目的是让编译器将其视为通用类型的指定器。

编译器抱怨：

[Gulp-typescript] 17008 JSX元素" T"没有相应的关闭标签。

我已经尝试了许多句法解决方法来试图使IDE和编译器同时让我逃脱JSX，并强迫编译器将编译器理解为通用，就像JSX不在使用。但是我找不到魔术酱。

比我在那里聪明的人可以弄清楚这个吗？

Answer 1

当您拥有单个类型参数时，打字稿不确定它是否可能是JSX打开标签。它必须选择一个，因此与JSX一起进行。

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

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

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

Answer 2

一个解决方法是添加尾随逗号：

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

Answer 3

我亲自使用 extends unknown。听起来最安全

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

Answer 4

我想不出一种方法，在您学习一个方面会很高兴。
但是，这是实现同样的不同方法：

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

编译器不会抱怨仿制药。