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<number>}
*/
const numberContainer = {}
numberContainer.
/**
* @type {Container<string>}
*/
const stringContainer = {}
stringContainer.