[英]Is there any downside to using .tsx instead of .ts all the times in typescript?
I just start working on a React project with TypeScript and ask myself what should I do with regular class files?我刚刚开始使用 TypeScript 处理一个 React 项目,并问自己应该如何处理常规类文件? Should I use
.ts
or .tsx
files and then I couldn't find any reason to do not using .tsx
file all the times even when it's not a React project!我应该使用
.ts
还是.tsx
文件,然后我找不到任何理由不使用.tsx
文件,即使它不是 React 项目!
Is there any reason or specific situation that we shouldn't use .tsx
files?是否有任何原因或特定情况我们不应该使用
.tsx
文件? if no, why TypeScript team add whole new extension?如果不是,为什么 TypeScript 团队要添加全新的扩展?
You can use tsx
instead of ts
with very little difference.您可以使用
tsx
而不是ts
,差别很小。 tsx
obviously allows the usage of jsx
tags inside TypeScript, but this introduces some parsing ambiguities that make tsx slightly different. tsx
显然允许在 TypeScript 中使用jsx
标签,但这引入了一些解析歧义,使 tsx 略有不同。 In my experience these differences are not very big:根据我的经验,这些差异不是很大:
Type assertions with <>
don't work as that is the marker for a jsx tag.带有
<>
类型断言不起作用,因为它是 jsx 标记的标记。
TypeScript has two syntaxes for type assertions. TypeScript 有两种类型断言语法。 They both do the exact same thing but one is usable in tsx the other is not:
他们都做完全相同的事情,但一个在 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 as
instead of <>
in ts
files as well for consistency.为了保持一致性,我也会在
ts
文件中使用as
而不是<>
。 as
was actually introduced in TypeScript because <>
was not usable in tsx
. as
在 TypeScript 中实际引入的那样,因为<>
在tsx
中不可用。
Generic arrow functions with no constraint are not parsed correctly没有正确解析没有约束的通用箭头函数
The arrow function below is ok in ts
but an error in tsx
as <T>
is interpreted as the start of a tag in tsx
:下面的箭头函数在
ts
中是可以的,但是tsx
的错误<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.虽然您可以使用
tsx
而不是ts
,但我建议不要使用它。 Convention is a powerful thing, people associate tsx
with jsx
and will probably be surprised you don't have any jsx
tags, best keep developer surprise to a minimum.约定是一个强大的东西,人们将
tsx
与jsx
联系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 ts
files backward compatible.虽然上面的歧义(虽然可能不是完整列表)并不大,但它们可能在决定为新语法使用专用文件扩展名以保持
ts
文件向后兼容的过程中发挥了重要作用。
It's kind of a convention to use x
in the end when your JavaScript is in JSX Harmony
mode.当您的 JavaScript 处于
JSX Harmony
模式时,最后使用x
是一种约定。 That is, when this is valid:也就是说,当它有效时:
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).然而,你的文件扩展名并不重要,只要你的预处理器知道你的决定(浏览器或 webpack)。 I, for one, use
.js
for all my JavaScript, even when they are React.一方面,我将
.js
用于我所有的 JavaScript,即使它们是 React。 The same applies for TypeScript, ts/tsx
.这同样适用于 TypeScript,
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.现在,我强烈建议对带有 React 语法的 Javascript 使用 JSX,对带有 React 的 TypeScript 使用 TSX,因为大多数编辑器/IDE 将使用扩展来启用或不启用 React 语法。 It is also consider it to be more expressive.
它也被认为更具表现力。
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. TypeScript 通过引入 .ts 和 .tsx 扩展遵循相同的约定。 A practical difference is that .tsx don't allow
<Type>
type assertions because the syntax is in conflict with JSX tags.一个实际的区别是 .tsx 不允许
<Type>
类型断言,因为语法与 JSX 标签冲突。 as Type
assertions was introduced as a replacement for <Type>
and considered a preferred choice for consistency reasons in both .ts and .tsx. as Type
断言被引入作为<Type>
的替代品,并被认为是 .ts 和 .tsx 中一致性原因的首选。 In case the code from .ts is used in .tsx file, <Type>
will need to be fixed.如果 .ts 中的代码用于 .tsx 文件,则需要修复
<Type>
。
The use of .tsx extension implies that a module is related to React and uses JSX syntax. .tsx 扩展名的使用意味着模块与 React 相关并使用 JSX 语法。 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 扩展的论据。
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 structure isn'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 名称。
I believe with the .tsx files you could use the all JSX (JavaScript XML) code.我相信对于 .tsx 文件,您可以使用所有 JSX(JavaScript XML)代码。 Whereas in the .ts file you can only use just typescript.
而在 .ts 文件中,您只能使用打字稿。
.ts
files have an <AngleBracket>
type assertion syntax which conflicts with the JSX grammar. .ts
文件具有与 JSX 语法冲突的<AngleBracket>
类型断言语法。 In order to avoid breaking a ton of people, we use .tsx
for JSX, and added the foo as Bar
syntax which is allowed in both .ts
and .tsx
files.为了避免破坏很多人,我们使用
.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-syntax
but <string>someValue
is cool!我们可以将 .ts 与
as-syntax
一起使用,但是<string>someValue
很酷!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.