在打字稿中一直使用.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。

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

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

相关推荐

  • ios设备性能榜最新iPhone 12 Pro Max登顶

    iOS设备性能榜是一种可以帮助用户快速评估iOS设备的性能的工具。它提供了一个排行榜,将不同的iOS设备按照性能进行排序,从而帮助用户快速了解哪款设备最适合他们的需求。…

    2023-01-20 03:26:08
    0 16 54
  • droid4x模拟器ios:在Droid4X模拟器上体验iOS的乐趣

    Droid4X模拟器是一款免费的安卓模拟器,可以用来模拟iOS设备。它可以帮助开发者在Windows上模拟iOS应用程序,以便在PC上测试和调试应用程序。…

    2023-01-19 10:49:31
    0 56 58
  • ios 日历邀请:参加 XX 活动,一起共度美好时光!

    iOS 日历邀请是指使用 iOS 系统的日历应用发送会议邀请的功能。使用 iOS 日历邀请,可以将会议邀请发送给多个人,并且可以让受邀者接受或拒绝邀请,也可以提醒受邀者在会议开始前提醒受邀者。…

    2023-01-04 16:07:59
    0 71 68
  • 手机sd卡分区:自动安装 SD卡的可用分区(linux partition mount)

    关于手机sd卡分区的问题,在linux partition mount中经常遇到,我正在使用 linux 系统,我需要在启动期间自动挂载最大的可用 SD 卡分区块。我能够通过调整 / etc / fstab 来挂载特定的分区,例如 / dev / mmcblk0p2。但如果我更改 SD 卡的类型,例如使用 B 类 SD 卡代替 A 类,这将不起作用。…

    2022-12-15 13:55:17
    0 33 49
  • Pu xi:IntelliJPlantUML插件不检测*.pu文件

    关于Pu xi的问题,在plantuml intellij中经常遇到,我在 IntelliJ Ultimate 2020.2 中安装了PlantUML plugin。我有一个带有一堆 *.pu 文件的 repo,但这些都没有被渲染。但是如果我将文件扩展名更改为 *.puml 它的工作原理。有没有办法配置插件,以便它也可以读取 *.pu 文件?…

    2022-12-06 08:27:06
    0 41 14
  • 巫师3修改负重代码:为什么“未修改”是重定向(“3xx”)状态代码

    关于巫师3修改负重代码的问题,在3xx status code中经常遇到,如果您对资源执行GET请求,那么您可以获得未修改响应以避免不必要的流量。…

    2022-12-20 08:33:50
    0 36 87
  • 微分销源码:矩阵微分(matrix differentiation)

    关于微分销源码的问题,在matrix differentiation中经常遇到,鉴于我们可能会使用这些规则来简化复杂的导数,我相信下面只有一个是正确的-否则,量纲分析会被折腾。…

    2022-12-09 05:35:10
    0 25 87
  • Win7默认程序无法修改:基于Win7构建的程序无法在WinXP上运行

    关于Win7默认程序无法修改的问题,在upgrade xp win 7中经常遇到,我有一个项目,我正在使用 Visual Studio 2005 在 Windows 7 (32 位) 上构建。该程序构建良好,我可以将其移动到另一台 Windows 7 机器并运行它就好了。当我尝试将其移动到 Windows XP Pro 机器时出现问题。当我尝试运行该文件时,出现以下错误:…

    2022-12-22 00:56:49
    0 30 73

发表评论

登录 后才能评论

评论列表(69条)