还没用熟 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 社区已经开始抛弃了 2

事实上,这不是社区第一次放弃 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 社区已经开始抛弃了 4

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

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

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

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

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

  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 社区已经开始抛弃了 10

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

参考

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

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

(0)
上一篇 2023年4月6日 下午12:07
下一篇 2023年4月6日 下午12:57

相关推荐

  • 简笔画教程图片步骤(好看的简笔画简单易学)

    超多可爱小动物简笔画步骤图来了,简单易学,赶快收藏了吧! 吃胡萝卜的兔子简笔画步骤图 可爱的灰兔简笔画步骤图 蠢萌的狗狗简笔画步骤图 可爱的小狗狗怎么画? 花豹子简笔画步骤图 画豹子步骤图 萌萌的小豹简笔画步骤图 奶牛简笔画步骤图 大奶牛简笔画怎么画 粉红小猪简笔画步骤图片 开心的小猪简笔画步骤图 开屏孔雀简笔画步骤图片 孔雀开屏简笔画怎么画 绵羊简笔画步骤…

    2023年4月6日 下午12:10
    26
  • 魔术教程简单易学初学(简单易学的魔术教程一学就会的那种)

    跟女儿一起玩的一个科学小实验分享给大家:筷子提米 首先,我们要准备的材料是:一个纸杯、一根筷子、若干米和水。 现在我们开始实验: ✈第一步,把米加上水均匀搅拌,水不要太多,只要米感觉有点湿润就行。 ✈第二步,把搅拌好的米装入纸杯,纸杯选普通的一次性杯子即可,不要选杯口太大的那种。 ✈第三步,把筷子插入米中,随意哪头插入均可,用粗的那头插入更容易成功哦。 ✈第…

    2023年4月6日 下午12:10
    26
  • 凉拌黄瓜的做法简单又好吃(凉拌黄瓜的简单做法)

    夏季胃口不好,如果能做一道爽口的凉拌菜,无论是吃米饭、喝粥、吃面条,都是妥妥的开胃下饭菜~ By *长腿_河马太太* 用料 黄瓜 2根 盐 1勺 醋 1勺 生抽 2勺 白糖 2勺 蒜 5瓣 姜 少许 红剁椒 1勺 干辣椒 3个 花椒 1克 做法步骤 1、1⃣️、黄瓜切成段,放白糖1勺、盐1勺腌制1小时,等黄瓜出水以后倒掉水,再用清水冲洗干净 2、2⃣️、冲洗…

    2023年4月6日 下午12:10
    26
  • oracle11g安装教程完整版(oracle11g客户端安装与配置)

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

    2023年4月6日 下午12:10
    26
  • 《带你入门前端工程》开源了

    小书大部分的内容都是以理论知识 + 代码示例 + 图片的方式来讲解的,努力争取让读者更容易理解。另外还有小部分的章节在讲解完理论知识后,还有相应的实践教程。例如前端监控这一节,在讲解完前端监控原理后,将会教你如何利用现有的监控工具对项目实行监控。

    2023年4月4日
    22
  • 大白菜u盘装系统教程图解(大白菜用u盘装系统的操作全程图解)

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

    2023年4月6日 下午12:10
    26
  • 二阶魔方教程新手公式(二阶魔方教程新手公式图解)

    面先法分为三步。首先拼好一面(任意颜色,本文以白色为例。)再拼好已拼好面的对面(如:绿对蓝 红对橙 白对黄)。当然在学习前要知道各个字母公式的含义。 R=Right (右面顺时针旋转90度) R 的含义 与R相对的是L L=Left(左面顺时针旋转90度) L 的含义 还有F,Front(前面顺时针旋转90度) F 的含义 与F相对的是B B=Back(后面…

    2023年4月6日 下午12:10
    26
  • 吉他教程入门基础知识(吉他教学零基础教程)

    作为零基础初学者应该作哪些训练呢,主要有以下几点: 一:音阶训练 音阶是什么呢?简单说就是1234567i,七个音在吉他的位置,用左手按右手弹,不停的练习,从C大调开始训练,从6弦的低音3(咪)到1弦的高音5(索,1弦三品),不停的训练。 练熟后,开始做半音阶训练,就是说左手四个手指从一品分别按到四品,一根弦一根弦的来练,也叫爬格子。主要练习手的按弦力度和拔…

    2023年4月6日 下午12:10
    26
  • ubuntu安装教程分区(ubuntu新手安装教程分区)

    Liunx分区的概念 首先我们需要知道,硬盘分区的存在,是由硬盘的物理特性决定的,并不会因为不同的操作系统而有所改变。 请您把一块硬盘想象为一本书……即便您不喜欢读书,您也一定非常熟悉它,所有的书都是相同的,包括我们使用的课本……您肯定非常熟悉 一本完整的书,通常包括书名、索引和正文。 如果您需要Linux,您首先需要找到一本书名为《linux》的书,书名相…

    2023年4月6日 下午12:10
    26
  • 设计师和程序员必备:全世界最著名的 icon 网站都在这了

      作为一个多年的独立开发者,收藏了非常多免费无版权图片网站、免费 icons、知名的技术人博客、有趣的网站等等,今天给大家分享我这几年收藏的 icon 网站,觉得好呢,点个赞关注个专栏,有补充呢給我留个言,感谢大家。 icons8 :拥有 42,800 个免费图标,提供各个平台的基础图标与分类图标,其特色是大小和颜色随意自定义。   i…

    2023年4月6日 下午12:10
    26