如何在JS文件中使用d.ts文件的类型定义作为文档类型？

该需求完全可行，无需将webpack.config.js改写为TypeScript文件，直接在JavaScript文件中即可复用webpack官方提供的d.ts类型定义，获得IDE的属性补全、类型校验等智能提示能力。webpack从v4版本开始就默认内置了完整的Configuration对象类型声明文件，不需要额外安装第三方类型依赖。

webpack配置场景的快速实现 #

直接在配置对象上方添加JSDoc类型标注即可，适配CommonJS模块化写法：

// webpack.config.js
/** @type {import('webpack').Configuration} */
module.exports = {
  // 此区域内编写配置时，IDE会自动提示webpack支持的所有配置项、校验参数类型
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: []
  }
}

如果你使用ESM规范导出配置，写法如下：

// webpack.config.js（ESM写法）
/** @type {import('webpack').Configuration} */
const webpackConfig = {
  // 配置内容
}
export default webpackConfig

如果需要IDE在你写错配置项时主动标红报错，可以在文件最顶部添加// @ts-check注释，开启JS文件的强类型校验能力。

JS文件引用d.ts类型的通用规则 #

不管是npm包内置的d.ts，还是项目内自定义的d.ts文件，都可以通过JSDoc注释在JS中使用：

• 引用npm包暴露的类型：使用import('npm包名').类型名的格式作为@type的参数，IDE会自动定位到对应包内的d.ts声明文件
• 引用本地自定义的d.ts类型：使用import('d.ts文件相对路径').类型名的格式即可，比如项目根目录下types/custom.d.ts中声明的UserConfig类型，标注写法为/** @type {import('./types/custom').UserConfig} */
• 除了给整个配置对象标注类型，你也可以给单个变量、函数参数、函数返回值添加同样格式的JSDoc类型标注，获得对应位置的智能提示

内容的提问来源于stack exchange，提问作者grabantot