在typescript中一直使用.tsx而不是.ts有什么缺点吗？

您可以使用而不是几乎没有区别。 显然允许在TypeScript中使用标签，但这引入了一些解析歧义，使tsx略有不同。根据我的经验，这些差异不是很大：tsxtstsxjsx

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

TypeScript 有两种用于类型断言的语法。它们都做完全相同的事情，但一个在tsx中可用，另一个不是：

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

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

未正确解析没有约束的泛型箭头函数

下面的箭头函数在 中是可以的，但是 as 中的错误被解释为 中标记的开头：tstsx<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;}

注意

虽然你可以使用而不是，但我建议不要使用它。约定俗成是一件很强大的事情，人们联想起来，可能会惊讶于你没有任何标签，最好把开发者的惊喜降到最低。tsxtstsxjsxjsx

虽然上面的歧义（尽管可能不是一个完整的列表）并不大，但它们可能在决定为新语法使用专用文件扩展名以保持文件向后兼容方面发挥了重要作用。ts

这是一种约定，当你的JavaScript处于模式时，最终会使用。也就是说，当这有效时：xJSX Harmony

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

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

编辑

现在，我强烈建议将 JSX 用于 Javascript 和 React 语法，将 TSX 用于 TypeScript 和 React，因为大多数编辑器/IDE 将使用扩展来启用或不启用 React 语法。它也被认为更具表现力。