使用jsDoc和jsConfig.json在增强vscode中代码提示

JSDoc

jsDoc中文官网

jsconfig.json的配置

可以开启类型检查包含的文件，排除的文件，配置项目根路径，路径别名
如下：

{
  "compilerOptions": {
    "checkJs": true,// 开启js的类型检查，没找到会报错
    "baseUrl": ".", // 项目根路径
    "paths": {
      "@/*": ["./*"] // 别名
    }
  },
  "include": ["./**/*"], // 项目包含的文件
  "exclude": ["./d.js"],// 排除的路由
}

jsDoc

jsDoc中的类型定义通过 @typedef {类型type} 类名名, 指定变量类型通过 @type {类型type}，类似ts中的as关键字，其中类型可以使用ts中的类型，以及使用一些内置的工具类如Record等

类型定义

如果某个js中没有export导出，那么这个js中通过@typedef定义的类型，可以直接在其他js文件中通过@type使用，如果使用export关键字，那么其他文件要使用该类型，必须通过 @type {import('@/xxx.js').类型}来使用

疑点：如果两个不同的js，通过@typedef定义了同名的类型，而且没有显式export，那么其他文件使用时

/**
 * @typedef {Object} Dragon
 * @property {string} name 名字
 * @property {number} age 年龄 这是注释
 */
等价于

/**
 * @typedef {{name:string,age:number,c:number}} Dragon
 */
 
export {} // 使用了export，其他文件使用该文件的类型必须import

类型导入使用

/** @type {import('@/a.js').Dragon} */ 表明test变量是a.js里的Dragon类型
const test = {}

可以通过ts中的类型定义来快速定义一个对象的类型

/**
 * @typedef {object} Dragon
 * @property {string} name
 * @property {number} age
 * @property {number} [height] 可选属性
 * @property  {readonly number} weight
 */
等价于
/**
 *@typedef {{name:string,age:number,height?:number,readonly weight:number}} Dragon1
 */
/**
 * @type {Dragon}
 */
const a = {}

泛型类型定义

/**
 * @template T
 * @typedef {Object} Container
 * @property {T} value - 任意类型的值
 */

/**
 * @type {Container}
 */
const numberContainer = {}
numberContainer.

/**
 * @type {Container}
 */
const stringContainer = {}
stringContainer.