在打字稿中一直使用.tsx而不是.ts是否有任何不足之处？

Question

我刚刚开始使用打字稿进行反应项目,并问自己我应该如何处理常规类文件？我应该使用.ts或.tsx文件,然后我找不到任何理由不使用.tsx文件,即使它不是反应项目!是否有任何理由或具体情况我们不应该使用.tsx文件？如果没有为什么打字稿团队添加全新的扩展？

Answer 1

你可以使用tsx而不是ts差别很小.tsx显然允许jsx在typescript中使用标签,但这会引入一些解析歧义,使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

我会使用as而不是<>ts文件来保持一致性.ts实际上是在Typescript中引入的,因为as它不可用<>

没有约束的通用箭头函数未正确解析

下面的箭头功能正常,tsx但是错误中的tsas tsx被解释为标签的开头<T>

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

注意

虽然您可以使用tsx而不是ts,但我建议不要使用它.公约是一个强大的东西,人们联想tsx到tsx并且可能会惊讶你没有任何jsx标签,最好让开发人员惊喜到最低限度.

虽然上面的含糊不清(虽然可能不是一个完整的列表)并不大,但它们可能在决定为新语法使用专用文件扩展名以保持jsx文件向后兼容方面发挥了重要作用.

Answer 2

x当JavaScript处于JSX Harmony模式时,最终会使用它.也就是说,当它有效时:

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

但是,只要您的预处理器知道您的决定(browserify或webpack),您的文件扩展名就无关紧要了.就我而言,我使用.js我的所有JavaScript,即使它们是React.这同样适用于TypeScript ts/tsx.

Answer 3

引入 .jsx 扩展名的原因是 JSX 是 JS 语法的扩展，因此 .jsx 文件不包含有效的 JavaScript。

TypeScript 通过引入 .ts 和 .tsx 扩展遵循相同的约定。一个实际的区别是 .tsx 不允许<Type>类型断言，因为语法与 JSX 标签冲突。as Type断言被引入作为<Type>.ts 和 .tsx 中一致性原因的替代并被认为是首选。如果 .ts 中的代码用于 .tsx 文件，<Type>则需要修复。

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

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

例如，与 React 组件一起使用的实用程序函数可能在任何时候都涉及 JSX，因此可以安全地使用 .tsx 名称，而Redux 代码结构不应该直接使用 React 组件，可以与 React 分开使用和测试并且可以使用 .ts 名称。

Answer 4

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

Answer 5

.ts文件具有<AngleBracket>与 JSX 语法冲突的类型断言语法。为了避免打扰很多人，我们使用.tsxJSX，并添加了和文件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;

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