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

2023-09-14 15:15:17

根据 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 的推特去求证下,好奇的不止我一个,已经有人提问了,并且作者给出了答案,非常确定

最新消息,非常确定了,就在昨天,北京时间 2022 年 5 月 9 日,Svelte 团队发布了一个名为 TS to JSDoc Conversion 的 PR,开始这项浩瀚的工程,同时宣布目前 Svelte 不再支持重大更新了,根据点不支持的人数,看到这件事情比较有争议,不支持的人不在少数。

TS to JSDoc Conversion

事实上,这不是社区第一次放弃 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} */

非常好用:

image.png

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

image.png

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

image.png

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

  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

改正后的效果:

image.png

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

更多推荐

【计算机毕业设计】基于SpringBoot+Vue热门网游推荐网站的设计与实现

博主主页:一季春秋博主简介:专注Java技术领域和毕业设计项目实战、Java、微信小程序、安卓等技术开发,远程调试部署、代码讲解、文档指导、ppt制作等技术指导。主要内容:毕业设计(Java项目、小程序等)、简历模板、学习资料、面试题库、技术咨询。🍅文末获取联系🍅精彩专栏推荐订阅👇🏻👇🏻不然下次找不到哟Sp

2023:生成式AI与存储最新发展和趋势分析(上)

生成式AI的热潮在短时间内席卷全球,以一种势不可挡的趋势迅速出圈,在某一时间段,似乎出现了“除了IT行业,人人都是AI专家”的盛况。这一轮如火如荼的全民AI热潮迸发至今,业已过半载,待最初的烟花绚烂散去,现如今又情形何如?1.独角兽OpenAI倒闭倒计时?2023年8月,印度媒体AnalyticsIndiaMagazi

(建议收藏)OpenHarmony系统能力SystemCapability列表

SysCap,全称SystemCapability,即系统能力,指操作系统中每一个相对独立的特性。开发者使用某个接口进行开发前,建议先阅读,了解Syscap的定义和使用指导。再结合下文中的表格判断具体能力集是否支持某个设备,提高开发效率。说明:Default代表了一个功能比较全面的OpenHarmony设备,具有大部分

Vulnhub实战-prime1

前言VulnHub是一个面向信息安全爱好者和专业人士的虚拟机(VM)漏洞测试平台。它提供了一系列特制的漏洞测试虚拟机镜像,供用户通过攻击和漏洞利用的练习来提升自己的安全技能。本次,我们本次测试的是prime1。一、主机发现和端口扫描查看Vmware中靶机的MAC地址,方便与之后nmap扫描出来的主机的MAC地址进行对比

Vulnhub实战-prime1

前言VulnHub是一个面向信息安全爱好者和专业人士的虚拟机(VM)漏洞测试平台。它提供了一系列特制的漏洞测试虚拟机镜像,供用户通过攻击和漏洞利用的练习来提升自己的安全技能。本次,我们本次测试的是prime1。一、主机发现和端口扫描查看Vmware中靶机的MAC地址,方便与之后nmap扫描出来的主机的MAC地址进行对比

chartgpt+midjourney

chatGPT程序化生成故事英文版脚本步骤步骤一:在chatgpt中输入以下脚本,,标红为可变的文字,输入你想要的,目前是科幻,即科幻故事,你可以改为fairy-tale,则写的是童话故事,等待回应Youarea{Genre}author.Yourtaskistowrite{Genre}storiesinavivida

基于Java+SpringBoot+Vue+uniapp微信小程序外卖系统设计和实现

博主介绍:✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取源码联系🍅👇🏻精彩专栏推荐订阅👇🏻不然下次找不到哟2022-2024年最全的计算机软件毕业设计选题

SpringMVC自定义注解和使用

一.引言1.简介:在SpringMVC中,我们可以使用自定义注解来扩展和定制化我们的应用程序。自定义注解是一种通过Java的注解机制定义的特殊注解,可以应用于控制器类、方法或者方法参数上,以实现不同的功能和行为。(注解相关类都包含在java.lang.annotation包中。)2、可实现功能1.路由映射:可以定义一个

探索AIGC人工智能(Midjourney篇)(四)

文章目录Midjourney模特换装Midjourney制作APP图标Midjourney网页设计Midjourney如何生成IP盲盒Midjourney设计儿童节海报Midjourney制作商用矢量插画Midjourney设计徽章Midjourney图片融合Midjourney后缀参数Midjourney模特换装关键

基于 Vue 和 SpringBoot 的医院门诊预约挂号系统源代码+数据库

基于Vue和SpringBoot的医院门诊预约挂号系统完整代码下载地址:基于Vue和SpringBoot的医院门诊预约挂号系统源代码+数据库软件简介本软件是《基于Vue的医院门诊预约挂号管理系统》,主要包含数据中心、科室医生模块、预约挂号模块、医院时政这四大模块。预约挂号系统采用了基于角色的访问控制,角色和菜单关联,一

Flask-[实现websocket]-(2): flask-socketio文档学习

一、简单项目的构建flask_websocket|---static|---js|---jquery-3.7.0.min.js|---socket.io_4.3.1.js|---templates|---home|---group_chat.html|---index.html|---app.py1.1、python环

热文推荐