Javascript 在打字稿中一直使用 .tsx 而不是 .ts 有什么缺点吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34224007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there any downside to using .tsx instead of .ts all the times in typescript?
提问by Ostad
I just start working on a React project with TypeScript and ask myself what should I do with regular class files? Should I use .tsor .tsxfiles and then I couldn't find any reason to do not using .tsxfile all the times even when it's not a React project!
我刚刚开始使用 TypeScript 处理一个 React 项目，并问自己应该如何处理常规类文件？我应该使用.tsor.tsx文件然后我找不到任何理由不一直使用.tsx文件，即使它不是 React 项目！
Is there any reason or specific situation that we shouldn't use .tsxfiles? if no, why TypeScript team add whole new extension?
是否有任何原因或特定情况我们不应该使用.tsx文件？如果不是，为什么 TypeScript 团队要添加全新的扩展？
回答by Titian Cernicova-Dragomir
You can use tsxinstead of tswith very little difference. tsxobviously allows the usage of jsxtags inside typescript, but this introduces some parsing ambiguities that make tsx slightly different. In my experience these differences are not very big:
您可以使用tsx而不是ts几乎没有区别。tsx显然允许jsx在打字稿中使用标签，但这会引入一些解析歧义，使 tsx 略有不同。根据我的经验，这些差异不是很大：
Type assertions with <>don't work as that is the marker for a jsx tag.
输入断言<>不起作用，因为它是 jsx 标签的标记。
Typescript has two syntaxes for type assertions. They both do the exact same thing but one is usable in tsx the other is not:
Typescript 有两种类型断言语法。他们都做完全相同的事情，但一个在 tsx 中可用，另一个则不是：
let a: any;
let s = a as string // ok in tsx and ts
let s2 = <string>a // only valid in ts
I would use asinstead of <>in tsfiles as well for consistency. aswas actually introduced in Typescript because <>was not usable in tsx
为了一致性，我也会在文件中使用as代替。实际上是在 Typescript 中引入的，因为在<>tsas<>tsx
Generic arrow functions with no constraint are not parsed correctly
没有正确解析没有约束的通用箭头函数
The arrow function below is ok in tsbut an error in tsxas <T>is interpreted as the start of a tag in tsx
下面的箭头函数是可以的，ts但是tsxas 中的错误<T>被解释为中标签的开始tsx
const fn = <T>(a: T) => a
You can get around this either by adding a constraint or not using an arrow function :
您可以通过添加约束或不使用箭头函数来解决这个问题：
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;}
Note
笔记
While you can use tsx instead of ts, I would recommend against it. Convention is a powerful thing, people associate tsxwith jsxand will probably be surprised you don't have any jsxtags, best keep developer surprise to a minimum.
虽然您可以使用 tsx 而不是 ts，但我建议您不要使用它。约定是一种强大的东西，人们会联想tsx到jsx并且可能会惊讶于您没有任何jsx标签，最好将开发人员的惊喜降到最低。
While the ambiguities above (although probably not a complete list) are not big they probably played a big part in the decision to use a dedicated file extension for the new syntax in order to keep tsfiles backward compatible.
虽然上面的歧义（虽然可能不是一个完整的列表）并不大，但它们可能在决定为新语法使用专用文件扩展名以保持ts文件向后兼容方面发挥了重要作用。
回答by André Pena
It's kind of a convention to use xin the end when your JavaScript is in JSX Harmonymode. That is, when this is valid:
x当您的 JavaScript 处于JSX Harmony模式时，这是最终使用的一种约定。也就是说，当它有效时：
doSomething(<div>My div</div>);
However, your file extension doesn't really matter, as long as your pre-processors are aware of your decision (browserify or webpack). I, for one, use .jsfor all my JavaScript, even when they are React. The same applies for TypeScript, ts/tsx.
然而，你的文件扩展名并不重要，只要你的预处理器知道你的决定（浏览器或 webpack）。一方面，.js我使用我所有的 JavaScript，即使它们是 React。这同样适用于打字稿，ts/tsx。
EDIT
编辑
Now, I would strongly recommend using JSX for Javascript with React syntax and TSX for TypeScript with React because most editors/IDEs will use the extension to enable or not the React syntax. It is also consider it to be more expressive.
现在，我强烈建议对带有 React 语法的 Javascript 使用 JSX，对带有 React 的 TypeScript 使用 TSX，因为大多数编辑器/IDE 将使用扩展来启用或不启用 React 语法。它也被认为更具表现力。
回答by Estus Flask
The reason why .jsx extension was introduced is that JSX is an extension of JS syntax and thus .jsx files don't contain valid JavaScript.
引入 .jsx 扩展名的原因是 JSX 是 JS 语法的扩展，因此 .jsx 文件不包含有效的 JavaScript。
TypeScript follows the same convention by introducing .ts and .tsx extensions. A practical difference is that .tsx don't allow <Type>type assertions because the syntax is in conflict with JSX tags. as Typeassertions was introduced as a replacement for <Type>and considered a preferred choice for consistency reasons in both .ts and .tsx. In case the code from .ts is used in .tsx file, <Type>will need to be fixed.
TypeScript 通过引入 .ts 和 .tsx 扩展遵循相同的约定。一个实际的区别是 .tsx 不允许<Type>类型断言，因为语法与 JSX 标签冲突。as Type断言被引入作为<Type>.ts 和 .tsx 中一致性原因的替代并被认为是首选。如果 .ts 中的代码用于 .tsx 文件，<Type>则需要修复。
The use of .tsx extension implies that a module is related to React and uses JSX syntax. In case it doesn't, the extension may give false impression about module contents and the role in the project, this is the argument against using .tsx extension by default.
.tsx 扩展名的使用意味着模块与 React 相关并使用 JSX 语法。如果没有，扩展可能会给模块内容和项目中的角色留下错误的印象，这是默认情况下反对使用 .tsx 扩展的论据。
On the other hand, if a file is related to React and has good chances to contain JSX at some point, it can be named as .tsx from the beginning to avoid renaming later.
另一方面，如果一个文件与 React 相关并且在某个时候很有可能包含 JSX，它可以从一开始就命名为 .tsx 以避免以后重命名。
For instance, utility functions that are used together with React components may involve JSX at any point and thus can be safely use .tsx names, while Redux code structureisn't supposed to use React components directly, can be used and tested apart from React and can use .ts names.
例如，与 React 组件一起使用的实用程序函数可能在任何时候都涉及 JSX，因此可以安全地使用 .tsx 名称，而Redux 代码结构不应该直接使用 React 组件，可以与 React 分开使用和测试并且可以使用 .ts 名称。
回答by theITvideos
I believe with the .tsx files you could use the all JSX (JavaScript XML) code. Whereas in the .ts file you can only use just typescript.
我相信对于 .tsx 文件，您可以使用所有 JSX（JavaScript XML）代码。而在 .ts 文件中，您只能使用打字稿。
回答by Arjun Kava
.tsfiles have an <AngleBracket>type assertion syntax which conflicts with the JSX grammar. In order to avoid breaking a ton of people, we use .tsxfor JSX, and added the foo as Barsyntax which is allowed in both .tsand .tsxfiles.
.ts文件的<AngleBracket>类型断言语法与 JSX 语法冲突。为了避免破坏大量人，我们使用.tsx了 JSX，并添加了和文件foo as Bar中都允许的语法。.ts.tsx
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
And the other is the as-syntax:
另一个是 as 语法：
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
We can use .ts with as-syntaxbut <string>someValueis cool!
我们可以使用 .ts ，as-syntax但是<string>someValue很酷！
