首页 前端知识 使用jsDoc和jsConfig.json在增强vscode中代码提示

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

2024-05-24 09:05:14 前端知识 前端哥 441 33 我要收藏

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.

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9357.html
标签
ide
评论
发布的文章

用JS生成本周日期代码

2024-04-18 17:04:15

js 递归函数

2024-05-31 10:05:46

jQuery是什么?如何使用?

2024-03-12 01:03:24

js延迟加载的六种方式

2024-05-30 10:05:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!