在打字稿中一直使用.tsx而不是.ts有什么缺点吗

我刚刚开始使用 TypeScript 的 React 项目,并问自己应该如何处理常规类文件?我应该使用.ts或.tsx文件,然后我找不到任何理由不使用.tsx文件所有的时间,即使它不是一个 React 项目!

我刚刚开始使用 TypeScript 的 React 项目,并问自己应该如何处理常规类文件?我应该使用.ts.tsx文件,然后我找不到任何理由不使用.tsx文件所有的时间,即使它不是一个 React 项目!

是否有任何原因或具体情况,我们不应该使用.tsx文件?如果没有,为什么 TypeScript 团队添加全新的扩展?

271

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

为了保持一致性,在ts文件中使用as而不是<>as实际上是在 TypeScript 中引入的,因为<>tsx中不可用。

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

的箭头函数在ts中是可以的,但是tsx中的错误<T>被解释为tsx中标签的开始:

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

虽然您可以使用tsx而不是ts,但我建议不要这样做。惯例是一个强大的东西,人们将tsxjsx相关联,并且可能会惊讶您没有任何jsx标签,最好将开发人员的惊喜降至最低。

虽然上面的歧义(虽然可能不是一个完整的列表)并不大,但它们可能在决定为新语法使用专用文件扩展名以保持ts文件向后兼容。

68

当您的 JavaScript 处于JSX Harmony模式时,最终使用x是一种惯例。

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

但是,只要您的预处理器知道您的决定(browserify 或 webpack),您的文件扩展名并不重要。例如,我对所有 JavaScript 使用.js,即使它们是 React。同样适用于 TypeScript,ts/tsx

EDIT

现在,我强烈建议使用 JSX for Javascript with React 语法和 TSX for TypeScript with React,因为大多数编辑器 / IDE 将使用扩展来启用或不启用 React 语法。它也被认为更具表现力。

9

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

TypeScript 通过引入.ts 和.tsx 扩展遵循相同的约定。实际的区别是.tsx 不允许<Type>类型断言,因为语法与 JSX 标记冲突。as Type断言是作为<Type>的替换引入的,并且由于一致性原因,它被认为是.ts 和.tsx>中的首选。

.tsx 扩展的使用意味着一个模块与 React 相关并使用 JSX 语法。如果没有,扩展可能会对模块内容和项目中的角色产生错误的印象,这是默认情况下反对使用.tsx 扩展的参数。

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

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

8

我相信使用.tsx 文件可以使用所有 JSX(JavaScript XML)代码。而在.ts 文件中,您只能使用 typescript。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(832)
确定设备是否是平板电脑的最佳方法是什么 (phone or tablet)
上一篇
在 LateX中更改引文样式
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(19条)