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

发布时间：2020-12-15 20:12:56 所属栏目：百科来源：网络整理

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

使用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和编译器让我逃脱J??SX并强制< T>编译器将其理解为通用,就像JSX未使用时一样.但我找不到这种魔法酱.

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

解决方法

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!