想建设一个网站,开发网站所用技术,优化营商环境的金句,网络托管公司有哪些这几个月#xff0c;想必大家都听到过一个新闻#xff1a;
Svelte 弃用 TypeScript#xff0c;改用 JSDoc 了。 TypeScript 我们知道#xff0c;是用来给 JS 加上类型的#xff0c;可以实现类型提示和编译时的类型检查。
那 JSDoc 能够完成一样的功能么#xff1f;Svel…这几个月想必大家都听到过一个新闻
Svelte 弃用 TypeScript改用 JSDoc 了。 TypeScript 我们知道是用来给 JS 加上类型的可以实现类型提示和编译时的类型检查。
那 JSDoc 能够完成一样的功能么Svelte 是出于什么原因弃用 TS 的呢
先不着急回答这个问题。
我们总得先了解下 JSDoc
可能大家认为的 JSDoc 是这个东西 在代码的注释上加上类型的标识然后通过 jsdoc 命令行工具就可以直接生成文档。
比如这样的文档 确实这个是 JSDoc 最初的含义。
但我们说的 JSDoc 并不是这个而是 TS 基于 JSDoc 语法实现的在注释里给代码添加类型的语法。
文档在这里 ts 支持在 js 文件的注释里通过 JSDoc 的语法给它加上类型。
至于有什么意义那可就太多了。
比如一个 JS 的配置文件你想在写配置的时候能有提示就可以用 JSDoc 这里注释里的 type 就是 JSDoc 声明类型的语法。
在 vite 文档里你可以看到对 JSDoc 的支持 我们自己试一下
mkdir jsdoc-test
cd jsdoc-test
npm init -y创建项目和 package.json。
然后安装 typescript
npm install --save-dev typescript创建 tsconfig.json 文件
npx tsc --init生成的 tscconfig.json 太多注释了我们删一下 然后创建 src/index.ts
function add(a: number, b: number) {return a b;
}这样在用到这个 add 的时候就会做类型检查 在 tsconfig.json 里 include 一下 之后执行编译
npx tsc生成的代码是这样的 这个是 ts 的编译流程大家都很熟悉。
现在问题来了我有一个 src/index2.js怎么实现一样的类型检查呢
这样写
/*** param {number} a 参数aaa* param {number} b 参数bbb*/
function add2(a, b) {return a b;
}注释里的就是 JSDoc 的语法。
但现在并没有报类型错误 需要在 tsconfig 里开启 allowJS 是允许编译 JScheckJS 是在编译 JS 的时候也做类型检查。
开启后你就会发现js 文件里也会做类型检查了 hover 上去的时候会提示类型信息 注意这可不是用 ts 语法声明的类型而是用 JSDoc 写的。
然后我们开启 dts 再编译
npx tsc可以看到同样能产出 d.ts 类型声明文件 而这时候产物的 JS 代码和源码差别不大 因为本来 JSDoc 就是在注释里的类型检查也好、生成 dts 也好都不用改动源码。
这就是 JSDoc 最大的好处无侵入的给 JS 加上类型拥有和 ts 一样的类型检查、类型提示、生成 dts 等功能但却不需要编译因为 JS 代码可以直接跑。
有同学可能会说就声明个函数类型就和 ts 一样了
那肯定不止这么点语法我们再看几个
比如可以用 type 给变量声明类型 这里可以是各种类型比如函数类型 如果类型被多处用到可以用 typedef 抽出来单独命名 你还可以把这个类型放到 dts 文件里在这里 import 进来用
比如我把它放到 guang.d.ts 里 然后这样引入用 这样就避免了在 typedef 里写大段类型定义了不然代码写多了就不好维护了。
这样就可以在 dts 里定义类型然后在 js 里通过 JSDoc 引入来用。
dts JSDoc 是绝佳搭配。
然后我们继续看 JSDoc 的函数类型定义 这分别是可选参数、参数默认值、返回值类型的语法。
还有同学说那 ts 的泛型呢这个 JSDoc 不支持的吧
当然也是支持的这样写 通过 template 声明类型参数然后下面就可以用了。
泛型都可以用那基于泛型的类型编程也就是类型体操当然也可以玩 一般这种复杂类型还是抽离到 dts 里然后 type {import(‘xxx’).xxx} 引入比较好。
再就是 class 了这个自然也是支持的。
比如声明一个泛型类 这段类型大家能看懂么
就是声明了一个泛型类有一个类型参数 T。它通过 extends 继承了 Set 类型。
它有个 name 属性的类型为 T并且还声明了构造器和 sleep 方法的类型。
用一下试试 name 和 sleep 的类型继承的 Set 的类型都没问题。
这就是 JSDoc 定义 class 类型的方式。
综上用 JSDoc 可以定义变量、函数、class、泛型等可以从别的 dts 文件引入类型。
基本上 ts 能做的JSDoc 也都可以。
但是JSDoc 语法毕竟是在注释里的多了一大坨东西而且写起来也不如 ts 语法直观。
所以一般没必要这样写除非你是给 JS 加类型。
那 svelte 是出于什么原因选择了 JSDoc 的方式呢
看下那个 pr 就知道了 直接看官方回复 也就是说用 ts 的语法需要编译后才能调试这样需要再 sourcemap 一次才能对应到源码。
但是用 JSDoc 的方式不用编译就可以直接调试。
估计是遇到了啥 VSCode 调试上的问题。
然后下面还有个 VSCode 调试器的维护者评论说有任何调试相关的问题可以找我 总之svelte 选择从 ts 转成 JSDoc dts 并不是因为 ts 有啥问题主要是为了调试方便。
那我们再看下它怎么用的吧
可以看到是 js 文件里用 JSDoc 来声明类型 然后复杂类型在 dts 里定义然后这里引入 就和我们刚才测试的一样。
总结
这几个月经常听到知名开源项目抛弃 ts 拥抱 JSDoc 的新闻我们一起探究了一下。
JSDoc 是在 js 的注释里通过 type、typedef、template、param 等来定义类型然后开启 checkJS 和 allowJS 的配置之后tsc 就可以对 js 做类型检查。
ts 里可以定义的类型在 JSDoc 里都可以定义比如变量、函数、class、泛型甚至类型编程等。复杂的类型还可以抽离到 dts 里在 type 里引入。
也就是说 JSDoc 确实可以替代 ts。
然后我们看了 svelte 选择 JSDoc 的原因只是为了调试方便。这样不用编译就可以直接跑 js 代码可以直接定位到源码。而且这样也能利用 ts 的类型提示和检查的能力。
所以很多人就说 svelte 抛弃了 ts。
这叫抛弃么
并不是JSDoc 只是另一种使用 ts 的方式而已。 更多内容可以看我的小册《TypeScript 类型体操通关秘籍》 最后
欢迎关注所谓前端微信公众号,大家一起交流 点击扫码关注
