Javascript 在typescript中始终使用.tsx而不是.ts有什么缺点吗？

我刚开始用TypeScript做一个React项目，然后问自己我应该如何处理常规类文件？我应该使用

.ts

或

.tsx

文件，然后我找不到任何理由不一直使用

.tsx

文件，即使它不是React项目

---

是否有任何原因或特定情况下我们不应该使用

.tsx

文件？如果没有，为什么TypeScript团队要添加全新的扩展

当JavaScript处于

JSX和谐模式时，最后使用
x
是一种惯例。也就是说，当这是有效的：

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

doSomething（我的部门）；

不过，您的文件扩展名并不重要，只要您的预处理器知道您的决定（browserify或webpack）。一、 首先，对我的所有JavaScript使用
.js
，即使它们是有反应的。这同样适用于TypeScript，
ts/tsx

编辑

现在，我强烈建议对带有React语法的Javascript使用JSX，对带有React语法的TypeScript使用TSX，因为大多数编辑器/IDE将使用扩展来启用或不启用React语法。它也被认为是更具表现力。 我相信使用.tsx文件可以使用所有JSX（JavaScript XML）代码。而在.ts文件中，您只能使用typescript。
您可以使用
tsx
而不是
ts
，差别很小
tsx
显然允许在TypeScript中使用
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

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

 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;}

const fn=（a:T）=>a
const fn=（a:T）=>a//这同样有效，但在我看来很奇怪
const fn=函数（a:T）{返回a；}

注意

虽然您可以使用
tsx
而不是
ts
，但我建议您不要使用它。约定是一个强大的东西，人们将
tsx
与
jsx
联系在一起，并且可能会惊讶于您没有任何
jsx
标记，最好将开发人员的惊喜降到最低

尽管上述含糊不清之处（虽然可能不是一个完整的列表）它们可能在决定为新语法使用专用文件扩展名以保持
ts
文件向后兼容的过程中扮演了重要角色。
引入.jsx扩展名的原因是jsx是JS语法的扩展，因此.jsx文件不包含有效的JavaScript

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

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

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

例如，与React组件一起使用的实用程序函数在任何时候都可能涉及JSX，因此可以安全使用。tsx名称，而不应该直接使用React组件，除了React之外，还可以使用和测试。ts名称。
。ts
文件具有与JSX语法冲突的
类型断言语法。为了避免造成大量人员伤亡，我们对JSX使用了
.tsx
，并添加了
foo-as-Bar
语法，这在
.ts
和
.tsx
文件中都是允许的

让someValue:any=“这是一个字符串”；
设strLength:number=（someValue）.length；

另一个是as语法：

让someValue:any=“这是一个字符串”；
让strLength:number=（someValue作为字符串）；

我们可以使用带有
的.ts作为语法，但是
someValue
很酷
 “TypeScript也是如此”--这不是真的，大部分答案都是针对JavaScript的，并不是关于
ts
和
tsx
的原始问题的好答案。在TypeScript中，编译器仅在
.tsx
文件中启用JSX语法，因为该语法会对TS语法产生一些歧义（例如
断言语法），为了解决这个问题，编译器在
tsx
文件中与在
TS
文件中做出不同的假设。查看Titian Cernicova Dragomir的答案。想知道类型断言符号是否总是在对象之前，我看到了一些类似product（）的代码，想知道这是否是一个类型断言too@Mr-编程不同的问题，但这不是作为泛型类型参数列表的类型断言。泛型类型参数位于标识符之后，
之前（
，其中JSX标记不能出现，因此没有歧义。React Native中的样式表如何？它也是JSX标记吗？我想创建一个仅包含和导出样式表的样式文件，但我不确定是否应该使用.tsx命名它。
 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;}