Question

我刚开始使用打字稿进行反应项目，并问自己我应该如何处理常规类文件？我应该使用.ts或.tsx文件，然后我找不到任何理由不使用.tsx文件，即使它不是反应项目！是否有任何理由或具体情况我们不应该使用.tsx文件？如果没有为什么打字稿团队添加全新的扩展？

Answer 1

当您的JavaScript处于x模式时，最终会使用JSX Harmony。也就是说，当它有效时：

doSomething(<div>My div</div>);

但是，只要您的预处理器知道您的决定（browserify或webpack），您的文件扩展名就不重要了。就我而言，我使用.js来表示我的所有JavaScript，即使它们是React。这同样适用于TypeScript ts/tsx。

Answer 2

您可以使用tsx代替ts，两者之间的差别很小。 tsx显然允许在打字稿中使用jsx标签，但这引入了一些解析歧义，使tsx略有不同。根据我的经验，这些差异不是很大：

带有<>的类型断言不起作用，因为它是jsx标记的标记。

Typescript对于类型断言有两种语法。他们俩都做完全相同的事情，但是一个可以在tsx中使用，而另一个则不能：

let a: any;
let s = a as string // ok in tsx and ts
let s2 = <string>a // only valid in ts

我也会在ts文件中使用as而不是<>来保持一致性。 as实际上是在Typescript中引入的，因为<>在tsx中不可用

无约束的通用箭头函数无法正确解析

下面的箭头功能在ts中是可以的，但是tsx中<T>的错误被解释为tsx中标记的开始

 const fn = <T>(a: T) => a

您可以通过添加约束或不使用箭头功能来解决此问题：

 const fn = <T extends any>(a: T) => a
 const fn = <T,>(a: T) => a // this also works but looks weird IMO
 const fn = function<T>(a: T) { return a;}

注意

虽然您可以使用tsx而不是ts，但我还是建议您不要使用tsx。惯例是有力的一环，人们将tsx与jsx联系起来，您可能会惊讶于您没有任何jsx标签，最好将开发人员的惊讶降到最低。

尽管上面的歧义（尽管可能不是完整列表）并不大，但它们可能在决定使用专用文件扩展名的新语法以保持ts文件向后兼容的决定中起了很大的作用。

Answer 3

之所以引入.jsx扩展名，是因为JSX是JS语法的扩展，因此.jsx文件不包含有效的JavaScript。

TypeScript通过引入.ts和.tsx扩展名遵循相同的约定。一个实际的区别是.tsx不允许<Type>类型的断言，因为该语法与JSX标签冲突。 as Type断言是对<Type>的替代，由于.ts和.tsx中出于一致性原因，它们被认为是首选。如果.tsx文件中使用了.ts中的代码，则<Type>将需要修复。

.tsx扩展名的使用意味着模块与React相关，并使用JSX语法。如果没有，扩展名可能会给模块内容和项目中的角色带来错误的印象，这是默认情况下反对使用.tsx扩展名的理由。

另一方面，如果文件与React相关并且在某个时候很有可能包含JSX，则可以从一开始就将其命名为.tsx，以避免以后重命名。

例如，与React组件一起使用的实用程序功能可能在任何时候都涉及JSX，因此可以安全地使用.tsx名称，而Redux code structure不应直接使用React组件，可以使用并经过了React的测试，可以使用.ts名称。

Answer 4

我相信使用.tsx文件，您可以使用所有JSX（JavaScript XML）代码。而在.ts文件中，您只能使用打字稿。

Answer 5

.ts文件具有<AngleBracket>类型的断言语法，该语法与JSX语法冲突。为了避免造成大量人员伤亡，我们将.tsx用于JSX，并添加了foo as Bar和.ts文件中都允许的.tsx语法。

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

另一个是语法：

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

我们可以将{.1}与.ts一起使用，但是as-syntax很酷！

在打字稿中一直使用.tsx而不是.ts是否有任何不足之处？

5 个答案: