使用ts作为tsx反应文件

Question

是否可以在没有IDE和编译器疯狂的情况下对React typescript .ts文件使用.tsx扩展名？

Answer 1

现在，没有。存在.tsx扩展名的技术原因。

当涉及到TypeScript的原始类型断言语法时，JSX引入了一个含糊不清的地方 - 具体来说，不清楚<Foo>xyz是否是JSX标记或类型断言的开头。这就是我们必须采用as类型断言语法（即xyz as Foo）并引入.tsx文件扩展名的原因。

除此之外，支持JSX意味着TypeScript必须决定如何消除类似通用箭头功能的歧义。例如，在这种情况下

let identity = <T>(x: T) => x

TypeScript将其解析为JSX标记的开头。用户必须将其转换为非模糊形式才能获得等效代码：

let identity = <T extends {}>(x: T) => x

简而言之：支持JSX会在编译器中产生重大变化或大量不必要的复杂性，而JSX的错误恢复会更糟。

Answer 2

通过 Babel，你可以使用这个开关：

https://babeljs.io/docs/en/babel-preset-typescript#istsx

无论如何我们都应该使用新的类型断言语法...