使用JSDoc在js里面短暂的替代ts，以webpack配置文件为例

---

前言

这是在闲着没事做瞎做东西的时候偶然发现的。
可能全世界都知道了我才刚知道。
不行我必须要把这一小点收获所分享出来，一定还有更多的人不知道。
原来jsdoc是可以做到一个基本的类型校验的。
原来jsdoc那么好用。
本篇文章就将会以webpack这个配置文件webpack.config.js来做例子讲解

---

开始

我的环境

编辑器：vscode
webpack版本：5.72.0

众所周知，平时直接使用webpack的时候，就类似于这样子去写，没有代码提示

webpack的配置文件在没有提示的情况下经常忘东忘西，有的时候却了个字母啥的，你甚至都不知道。忘记哪个配置项，或者就记得前几个字母，就得开个浏览器查一下文档，这太麻烦了。今天就教大家通过jsdoc来加速一下自己webpack配置的效率。
用起来有那么点像是ts。
首先我们先新建一个函数
我这里使用的是箭头函数的写法，带了一个参数options，用于写webpack的配置的

const useWebpackOptions = (options) => options

module.exports = useWebpackOptions({})

我们注意到，我们目前这个传进去options参数他是一个any类型，也就是什么类型都有可能，所以没有类型的约束，代码提示也就是无

接下来我们就祭出我们的大杀器——JSDoc，给我们的这个参数加上类型
直接使用vscode写一个注释/** */，一般你打上/**的时候，vscode会自动给你补上后面的*/,然后你直接回车就好，会自动读取该函数里头的参数


图示箭头所指的地方就是重点了。
在JSDoc里面这个地方是用于标注代码类型的。
既然是标注类型，那我们写一个对象类型的看看

欸，是不是很神奇，他的类型就出现了，那就好办了，那我们就把他改成webpack配置的对象类型，webpack的依赖里头就这个类型，我们要去引入webpack依赖里头的配置类型

const { WebpackOptionsNormalized } = require('webpack')

WebpackOptionsNormalized这个就是webpack的配置的接口
我们可以翻源码查到

我们拿到了这个类型的接口，我们直接把他丢到JSDoc里头
见证奇迹的时候到了

我们就出现了这个类型啦，是不是和感觉和ts有那么点相似了呢

当然我们还能更简便的实现他

这样子就不用定义一个多余的函数了

最终效果

---

啦啦啦，我们有了代码提示，快乐加倍。同时还学会了JSDoc的一些用法，来养成我们写代码加注释的好习惯了。

代码

---

const { WebpackOptionsNormalized } = require('webpack')

/**
 * 使用webpack的提示
 * @param {WebpackOptionsNormalized} options 
 * @returns 
 */
const useWebpackOptions = (options) => options

/**
 * 这样子写也可以
 * @type {WebpackOptionsNormalized}
 */
const webpackOptions = {
  // 这里编写你的webpack配置将会有代码提示
}

module.exports = useWebpackOptions({
  // 这里编写你的webpack配置将会有代码提示
})

有学到东西的小伙伴欢迎路过点个赞啥的