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

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

1> Titian Cerni..：

---

你可以使用tsx而不是ts差别很小.tsx显然允许jsx在typescript中使用标签,但这会引入一些解析歧义,使tsx略有不同.根据我的经验,这些差异不是很大:

类型断言<>不起作用,因为它是jsx标记的标记.

Typescript有两种类型断言的语法.他们都做了完全相同的事情,但一个在tsx中可用,另一个不是:

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

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

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

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

 const fn = (a: T) => a

您可以通过添加约束或不使用箭头函数来解决这个问题:

 const fn = (a: T) => a
 const fn = (a: T) => a // this also works but looks weird IMO
 const fn = function(a: T) { return a;}

注意

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

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

2> André Pena..：

---

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

doSomething(
My div
);

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

---

“同样适用于TypeScript”-并不是真的，大多数答案是特定于JavaScript的，而不是真正的有关“ ts”和“ tsx”的原始问题的好答案。在TypeScript中，编译器仅在`.tsx'文件中启用JSX语法，因为该语法与TS语法（例如`<>`断言语法）产生了一些歧义，为了解决此问题，编译器在`tsx`文件中做出了不同的假设与“ ts”文件相反。**请参阅Titian Cernicova-Dragomir的答案。**