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

来源：互联网收集：自由互联发布时间：2021-06-15

使用Typescript,在Visual Studio中键入“.ts”文件,请考虑以下声明： export const foo = T(myObject: T) = myObject.toString(); 这很好用,类型检查很好,一切都很棒. 现在将完全相同的代码放入用于JSX和Rea

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

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

这很好用,类型检查很好,一切都很棒.

现在将完全相同的代码放入用于JSX和React的“.tsx”文件中.

Intellisense非常沮丧和抱怨,因为它试图使< T>进入React JSX元素.但我的目的是让编译器将其视为通用类型指示符.

编译器抱怨：

[gulp-typescript] 17008 JSX element ‘T’ has no corresponding closing tag.

我已经尝试了许多语法解决方法,试图让IDE和编译器让我逃脱JSX并强制< T>编译器将其理解为通用,就像JSX未使用时一样.但我找不到这种魔法酱.

谁比我更聪明谁能想到这一点？

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

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

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

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

相关文章