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

最新推荐文章于 2024-06-14 11:01:38 发布

SHERlocked93

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量289

点赞数

文章标签： typescript javascript 数学建模开发语言 ecmascript

原文链接：https://mp.weixin.qq.com/s?__biz=Mzg5ODA5MzQ2Mw==&mid=2247499729&idx=1&sn=59bb8b957f3ddd6226b775d8bd6e2e71&chksm=c0656729f712ee3f5f0a8693f0f7432a71c27450fcb3de9309983cf0f6444d3ad191f7295833&scene=126&sessionid=0

版权

作者：CondorHero

原文：https://juejin.cn/post/7218117377052377143

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

The team is switching the underlying code from TypeScript^[2] to JavaScript^[3]. 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^[4] 的 PR，开始这项浩瀚的工程，同时宣布目前 Svelte 不再支持重大更新了，根据点不支持的人数，看到这件事情比较有争议，不支持的人不在少数。

TS to JSDoc Conversion

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

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

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

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

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

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

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

ts
复制代码
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^[6] 来解决类型声明，现代编辑器是认的 JSDoc，友好支持程度一点不比 TS 差，如果是编写库，需要导出给安装者使用，那就在 .d.ts 文件中定义导出给使用者。

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

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

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

js
复制代码
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;
};

我们添加如何注释：

markdown
复制代码
/**
 * 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

解决办法也很简单，比如：

利用的 TS @ts-check 注释
添加 tsconf.json / jsconfig.json 并让 checkJs 为 true。

json
复制代码
{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

添加"js/ts.implicitProjectConfig.checkJs": true到您的工作区或用户设置里面即 settings.json 文件。
更多参考 type-checking-javascript^[8]

改正后的效果：

image.png

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

参考

rich-harris-talks-sveltekit-and-whats-next-for-svelte^[9]
TypeScript vs JSDoc という対立は存在しない、と思った話^[10]
removeLeadingZero^[11]
type-checking-javascript^[12]
how-to-use-jsdoc-annotations-with-vscode-for-intellisense-7co^[13]

参考资料

[1]

https://thenewstack.io/rich-harris-talks-sveltekit-and-whats-next-for-svelte/: https://link.juejin.cn?target=https%3A%2F%2Fthenewstack.io%2Frich-harris-talks-sveltekit-and-whats-next-for-svelte%2F

[2]

https://thenewstack.io/key-concepts/typescript/: https://link.juejin.cn?target=https%3A%2F%2Fthenewstack.io%2Fkey-concepts%2Ftypescript%2F

[3]

https://thenewstack.io/jamstack-panel-multiple-javascript-frameworks-are-a-good-thing/: https://link.juejin.cn?target=https%3A%2F%2Fthenewstack.io%2Fjamstack-panel-multiple-javascript-frameworks-are-a-good-thing%2F

[4]

https://github.com/sveltejs/svelte/pull/8569: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fsveltejs%2Fsvelte%2Fpull%2F8569

[5]

https://github.com/denoland/deno/pull/6793: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fdenoland%2Fdeno%2Fpull%2F6793

[6]

https://www.typescriptlang.org/ja/docs/handbook/jsdoc-supported-types.html: https://link.juejin.cn?target=https%3A%2F%2Fwww.typescriptlang.org%2Fja%2Fdocs%2Fhandbook%2Fjsdoc-supported-types.html

[7]

https://github.com/svg/svgo/blob/main/lib/svgo/tools.js#LL128C7-L128C24: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fsvg%2Fsvgo%2Fblob%2Fmain%2Flib%2Fsvgo%2Ftools.js%23LL128C7-L128C24

[8]

https://code.visualstudio.com/docs/nodejs/working-with-javascript#_type-checking-javascript: https://link.juejin.cn?target=https%3A%2F%2Fcode.visualstudio.com%2Fdocs%2Fnodejs%2Fworking-with-javascript%23_type-checking-javascript

[9]

https://thenewstack.io/rich-harris-talks-sveltekit-and-whats-next-for-svelte/: https://link.juejin.cn?target=https%3A%2F%2Fthenewstack.io%2Frich-harris-talks-sveltekit-and-whats-next-for-svelte%2F

[10]

https://qiita.com/fsd-tetsu/items/d8b50481b6c735ffa6f3: https://link.juejin.cn?target=https%3A%2F%2Fqiita.com%2Ffsd-tetsu%2Fitems%2Fd8b50481b6c735ffa6f3

[11]

https://github.com/svg/svgo/blob/main/lib/svgo/tools.js#LL128C7-L128C24: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fsvg%2Fsvgo%2Fblob%2Fmain%2Flib%2Fsvgo%2Ftools.js%23LL128C7-L128C24

[12]

[13]

https://dev.to/sumansarkar/how-to-use-jsdoc-annotations-with-vscode-for-intellisense-7co: https://link.juejin.cn?target=https%3A%2F%2Fdev.to%2Fsumansarkar%2Fhow-to-use-jsdoc-annotations-with-vscode-for-intellisense-7co

最后

如果你觉得这篇内容对你挺有启发，我想邀请你帮我个小忙：

点个「喜欢」或「在看」，让更多的人也能看到这篇内容
我组建了个氛围非常好的前端群，里面有很多前端小伙伴，欢迎加我微信「sherlocked_93」拉你加群，一起交流和学习
关注公众号「前端下午茶」，持续为你推送精选好文，也可以加我为好友，随时聊骚。

点个喜欢支持我吧，在看就更好了

SHERlocked93

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TypeScript还没用熟，社区已经开始抛弃了 T_T

作者：CondorHero原文：https://juejin.cn/post/7218117377052377143根据 rich-harris-talks-sveltekit-and-whats-next-for-svelte[1] 这篇文章的报道， Svelte 计划要把代码从 TS 换到 JS 了。The team is switching the underlying code from...
复制链接

扫一扫