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

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

另一种是as语法：

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

我们可以使用.ts as-syntax但<string>someValue很酷！

之所以引入.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代码结构不应直接使用React组件，可以与React分开使用和测试并可以使用.ts名称。

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

x最后，当您的JavaScript处于JSX Harmony模式下时，这是一种约定。也就是说，当这是有效的时：

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

但是，只要您的预处理程序知道您的决定（浏览器或webpack），文件扩展名实际上并不重要。我使用.js了我所有的JavaScript，即使它们是React。TypeScript也是如此ts/tsx。

编辑

现在，我强烈建议您将JavaScript的JSX用于React语法，将TSX的TypeScript与React一起使用，因为大多数编辑器/ IDE都会使用扩展名来启用或不启用React语法。它也被认为更具表现力。