还没用熟 TypeScript 社区已经开始抛弃了

根据 rich-harris-talks-sveltekit-and-whats-next-for-svelte 这篇文章报道, Svelte 计划要把代码从 TS 换到 JS 了。

The team is switching the underlying code from TypeScript to JavaScript. That and the update will then allow the team to incorporate “big ideas” for Svelte 5 later this year, he added.

这种震惊劲爆的信息,当然的核实下是不是准确的,于是去 svelte 框架的作者 Rich Harris 的推特去求证下,好奇的不止我一个,已经有人提问了,并且作者给出了答案,非常确定

还没用熟 TypeScript 社区已经开始抛弃了

事实上,这不是社区第一次放弃 TypeScript 了,比如 Deno 远在 2020 年就弃用了 TS,并给出三大理由:

  1. 减少了构建时间
  2. 发布代码变小了
  3. 写的代码大大减少了

那个时候 TyepScript 的发展正在如日中天的时候,广大库的作者普遍拥抱 TS,比如于2020年9月18日正式发布的Vue3 ,代号为 One Piece(海贼王)。

三年过去了,再好看的媳妇也看腻了,大家就开始挑毛病了,你(TyepScript)可能并不完美。

回归了理性,大家就开始思考使用 TyepScript 的初心是什么了,意识吼出了灵魂一问?我们为什么使用 TypeScript?

没错,这个问题很简单,因为 TypeScript 提供了类型检查,弥补了 JavaScript 只有逻辑没有类型的问题,也就是讲我们不需要 TypeScript 的逻辑,只需要它的的类型提示功能。但是不知不觉之间,我们在逻辑的道路上越走越远。

比如下面是 Vue3 watch API 的类型声明,我估计给一天时间,大多数人可能都不太能整的明白里面的逻辑:

export declare function watch<T extends MultiWatchSources, Immediate extends Readonly<boolean> = false>(sources: [...T], cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>, options?: WatchOptions<Immediate>): WatchStopHandle;

export declare function watch<T extends Readonly<MultiWatchSources>, Immediate extends Readonly<boolean> = false>(source: T, cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>, options?: WatchOptions<Immediate>): WatchStopHandle;

export declare function watch<T, Immediate extends Readonly<boolean> = false>(source: WatchSource<T>, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchOptions<Immediate>): WatchStopHandle;

export declare function watch<T extends object, Immediate extends Readonly<boolean> = false>(source: T, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchOptions<Immediate>): WatchStopHandle;
复制代码

而且如果项目引用了用 TypeScript 编写的库,需要频繁借助 VSCode 等编辑器查看源代码,才能进行类型声明继续编写逻辑代码。

以前我也是 TypeScript 的拥趸,但是使用了一两年之后,我改变了看法,平时应付业务逻辑已经够费脑子了,现在需要花不少时间去调整代码来适应需求。

除此之外,dev 开发代码进行类型检查也比较费时间,项目大了可能需要顿个几秒才能检查完成,再进行代码编译输出到浏览器。

现在明白了最初的需求,完全可以用 JavaScript + JSDoc 来解决类型声明,现代编辑器是认的 JSDoc,友好支持程度一点不比 TS 差,如果是编写库,需要导出给安装者使用,那就在 .d.ts 文件中定义导出给使用者。

使用 JSDoc 表达类型,不仅省去了构建步骤,不打包都可以直接用,还可以避免编写复杂的类型逻辑,太方便了有没有,代码可以复制到任何 JS 的运行环境心动没有。

我们来实践看看行不行的通,光说不练,假把式。

这里以 Svgo 的一个函数 removeLeadingZero 为例,这个函数可以删除小数的前导零并作为字符串返回,比如 0.5 → .5-0.5 → -.5

const removeLeadingZero = (num) => {
	let strNum = num.toString();

	if (0 < num && num < 1) {
		strNum = strNum.slice(1);
	} else if (-1 < num && num < 0) {
		strNum = "-" + strNum.slice(2);
	}
	
	return strNum;
};
复制代码

我们添加如何注释:

/**
 * Remove floating-point numbers leading zero.
 *
 * @example
 * 0.5 → .5
 *
 * @example
 * -0.5 → -.5
 *
 * @type {(num: number) => string}
 */
复制代码

非常好用:

还没用熟 TypeScript 社区已经开始抛弃了

实际上 VSCode 有智能推断,简单的代码都能推断出来,比如,const num = 23; 会自动感应出来方法:

还没用熟 TypeScript 社区已经开始抛弃了

说回来 removeLeadingZero 函数,当我们调用的时候,传入错误的参数,没有像 TS 类型强制报错:

还没用熟 TypeScript 社区已经开始抛弃了

解决办法也很简单,比如:

  1. 利用的 TS @ts-check 注释
  2. 添加 tsconf.json / jsconfig.json 并让 checkJs 为 true。
{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}
复制代码
  1. 添加"js/ts.implicitProjectConfig.checkJs": true到您的工作区或用户设置里面即 settings.json 文件。
  2. 更多参考 type-checking-javascript

改正后的效果:

还没用熟 TypeScript 社区已经开始抛弃了

事实上 JSDoc 的类型注释非常丰富比如还有 @param@const 等等,但不复杂,学习成本很低。

参考

作者:蜡笔小伟
链接:https://juejin.cn/post/7218117377052377143
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。商机网仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 tenspace2022@163.com 举报,一经查实,本站将立刻删除。 本文链接:https://www.315965.com/n/53670.html 聚才发 母婴好物

(0)
上一篇 2023年12月16日 上午4:11
下一篇 2023年12月16日 上午4:20

相关推荐

  • 大白菜u盘装系统教程图解(大白菜用u盘装系统的操作全程图解)

    老白菜u盘重装系统步骤,今天教大家用老白菜工具进行系统安装,首先,我们将u盘插入电脑 按开机键然后不停的按u盘启动盘快捷键【f12键】,然后来到老白菜pe引导界面 直接选择win8pe,回车 等待加载pe系统,进入到pe系统后,选择打开老白菜装机pe 选择我们放入的系统镜像文件,选择c盘作为安装的盘符,确定 弹出一键恢复,点击确定 现在就等安装了,安装系统整…

    2023年7月30日
    251
  • 一些常用的 Git 进阶知识与技巧

    1. 同一电脑存在多个 Git 账号 假设我们在同一电脑上拥有多个 Git 账号,例如公司内部使用的是 Gitlab,个人使用的是 Github 或者 Gitee。那就会遇到一种情况,上班时想给个人开源项目提交代码,但是 Git 绑定的是公司的账号。 在这种情况下,我们可以让 Git 绑定多个不同的 ssh key,每个 ssh key 对应一个不同的 Gi…

    2023年12月15日
    158
  • 包粽子教程慢动作(一步一步包粽子的步骤)

    过端午节吃粽子是中华民族的传统习俗,目前在宜昌市夷陵区小溪塔各个农贸市场,到处都在卖粽叶、包粽子,卖粽子。节日气氛越来越浓#宜昌头条# @知名三峡在小溪塔夷陵三巷农贸市场看到,近期卖包粽子叶的市场十分火热。几乎大街小巷都有卖粽子叶的身影。主要是箬叶居多。 粽子叶 粽子叶 包粽子取用的食材及包粽的方式因地域不同,所以有多种多样,在此介绍长江三峡地区比较常见的一…

    2023年8月2日
    220
  • App制作教程步骤(app制作入门教程)

    一、前言 移动web时代,手📱机的兴起使得大部分在手📱机上的应用开发变得如火如荼,然而传统的app开发需要掌握的知识点繁多,开发周期特别漫长,为了解决这个问题,webapp应运而生,它使得app开发的难度大幅度降低,只要你懂前端就可以开发app;然而由于技术的更迭,不光出现了app,还有小程序以及一些网站,于是,很多人瞄准了多端应用市场,所谓多端指的是一套代…

    2023年7月30日
    242
  • oracle11g安装教程完整版(oracle11g客户端安装与配置)

    在本教程中,我们将逐步介绍如何下载Oracle 11g数据库并演示如何安装在Windows 10 64位机器上,以便在系统中学习和实践PL/SQL编程。 下载并安装Oracle数据库 首先,需要到Oracle官方网站下载Oracle数据库,在这里我们将下载Oracle 11g第2版的Microsoft Windows(x64)版本。由于安装文件过大,可以分两…

    2023年7月30日
    214
  • 绘画教程二次元(绘画教程二次元简单)

    怎样画好二次元人物?画二次元动漫人物步骤!二次元里除了让人羡慕的各种超现实能力外,还有一点发酸的是,二次元里不管男的、女的,皮肤都是完美无瑕的,毛孔都没有!真实世界,达不到二次元里的完美,也只能通过画画寄托一下情感~那么二次元动漫人物皮肤怎么画?今天要教大家的就是二次元动漫人物皮肤皮肤的画法教程,一起来看看吧! 《海贼王·路飞》 1、先在线稿铺上底色,这里的…

    2023年7月30日
    218
  • .Net 7 轻松上手Dapr之服务调用

    对于Dapr ,在项目中也有用过一段时间,优缺点并存,但是瑕不掩瑜,目前随着版本的迭代和第三方团队对它的支持也使得我们用得更加得心应手,所以借此也回顾一下Dapr的相关知识以及分享一下项目中用到的第三方库MASA.Framework 对Dapr的完美支持。然后本文只是个人学习与分享,不喜勿喷,谢谢! 什么是Dapr? Dapr 是 Distributed A…

    2023年12月16日
    190
  • 画画教程动漫人物基础(画画教程动漫人物基础入门)

    卡通动画是伴随着每个人的童年,不同年龄阶层的人都有属于自己的卡通回忆,不过有些动画是经典的,也许爸爸妈妈那个年代的动画片,到了10后小宝宝这里还是很热门。今天果果就来教大家花5个动画人物简笔画,非常详细,1分钟速成,零基础都能学会! 皮卡丘 1、首先用线条勾勒出皮卡丘的脸颊。 2、在头部两侧画出皮卡丘长长的耳朵。 3、画出大大的眼睛,留出高光部分。 4、画出…

    2023年7月30日
    261
  • 最新版五笔打字口诀表(快速学五笔打字技巧口诀及方法)

    五笔打字法对于没有学习五笔的人来说是比较难学的,比较五笔打字法的规则有很多,想要学会也不容易。 在这个过程当中,五笔打字法是有相应的口诀和技巧的,一般通过理解记忆就能够基本掌握五笔打字法的基本要求。 从而能够在未来的生活、工作当中正常使用五笔打字法。 我认为五笔打字法有如下几个方面的打字口诀,具体如下: Y键:王旁三点水和清,D键:记住要把下匡紧。 G键:土…

    2023年7月31日
    241
  • 黑苹果安装教程2024(黑苹果安装教程详细)

    黑苹果安装步骤 上一篇内容我们讲到了安装黑苹果前的所有准备步骤,正式安装的时候插入提前制作好的 U盘 电脑开机之后连续按 F12 键,在启动项的页面我们选择 U盘 启动。 选择 U盘 引导启动之后回车执行,来到如下图显示的引导界面之后我们选择苹果图标并回车进入。 在进入到如上图的界面之后需要一段时间的等待,而这里也是最容易出问题的地方,就是我们常说的卡代码。…

    2023年7月30日
    386