jsdoc进阶篇,用这些常用的类型标注来完善你的js代码吧

jsdoc的好处,可以看我上一篇文章:请抛弃行内注释,教你如何在typescript中更好的写注释

如何学习jsdoc可以看官网 JSDoc 中文文档

这里就不写一些简单的例子,直接上强度。

因为我们写jsdoc大多都是写函数的注释,所以我这里就以函数为例子,先了解基本的书写格式:

js 复制代码
/**
 * @标签名 { 类型 } 变量名 - 说明
 */

// 例子
/**
 * @param { strig } id - 这是请求的id
 */

一、如何标注一个对象类型?

定义一个getData的函数,它要接收一个params参数,这个参数是一个对象,里面有method,id,page属性。我们用ts可以很轻松的写出:

typescript 复制代码
interface TypeParams {
  method: 'POST' | 'GET'
  id: string
  page: number
}

function getData(params: TypeParams) {
  console.log(params.method)
}

但是如果用的是js,要怎么去写这个标注呢?我这里提供了3种方法

1.直接在类型里面写

js 复制代码
/**
 *
 * @param {{method:'POST'|'GET', id:string, page:number}} params 请求参数
 */
function getData(params) {
  console.log(params.method)
}

优点: 书写简洁

缺点:每个属性都缺少单独的类型说明

2.通过@param,以及对对象的扩展

js 复制代码
/**
 *
 * @param {object} params - 请求参数
 * @param {'POST'|'GET'} params.method - 请求类型
 * @param {string} params.id - 请求id
 * @param {number} params.page - 请求页数
 */
function getData(params) {
  console.log(params.method)
}

优点: 每个属性都有单独的说明

缺点:书写繁杂

3.通过@typedef和@property单独写一个类型,再引用

这种写法就很像ts的类型的写法

js 复制代码
/**
 *
 * @typedef {object} TypeParams - 请求参数类型
 * @property {'POST'|'GET'} params.method - 请求类型
 * @property {string} params.id - 请求id
 * @property {number} params.page - 请求页数
 */

/**
 *
 * @param {TypeParams} params - 请求参数
 */
function getData(params) {
  console.log(params.method)
}

/**
 *
 * @param {string} code - code
 * @param {TypeParams} params - 请求参数
 */
function List(code, params) {
  console.log(params.method)
}

优点: 可以类型复用

缺点:书写不够直观

总结

建议:一般来说,我推荐第二种写法。如果有类型复用的情况,并且是复用的次数很多,才考虑第三种写法。

扩展:函数默认参数值

用法

js 复制代码
/**
 * @标签名 { 类型 }[变量名=值] 变量名 - 说明
 */

// 例子
/**
 * @param { strig }[id='abc'] id - 这是请求的id
 */
js 复制代码
/**
 *
 * @param {object} params - 请求参数
 * @param {'POST'|'GET'}[params.method='GET'] params.method - 请求类型
 * @param {string} params.id - 请求id
 * @param {number} params.page - 请求页数
 * @param {string}[token='abc123456'] token - token
 */
function getData (params, token = 'abc123456') {
	console.log(params)
}

二、如何标注一个对象数组类型?

直接在类型后面加[],就这么简单

js 复制代码
/**
 *
 * @typedef {object} TypeParams - 请求参数
 * @property {'POST'|'GET'} params.method - 请求类型
 * @property {string} params.id - 请求id
 * @property {number} params.page - 请求页数
 */
 
/**
 *
 * @param {string[]} code - code
 * @param {TypeParams[]} params - 请求参数
 */
function List(code, params) {
  console.log(params)
}

三、如何标注一个枚举类型?

在ts中,枚举类型也是我用得最多的。但是换到了js,js没有枚举类型,只能用对象代替。但是如何写出好的注释,让它显示出对应的类型呢?

这里也提供了两种写法

1.通过@type标注

js 复制代码
/**
 * 映射状态的枚举
 * @readonly
 * @enum {1|2}
 */
const EnumState = {
  /**
   * 成功的值
   * @type {1}
   */
  PASS: 1,
  /**
   * 失败的值
   * @type {2}
   */
  ERROR: 2
}

2.用@default来标注

js 复制代码
/**
 * 映射状态的枚举
 * @readonly
 * @enum {1|2}
 */
const EnumState = {
  /**
   * 成功的值
   * @default 1
   */
  PASS: 1,
  /**
   * 失败的值
   * @type 2
   */
  ERROR: 2
}

总结

比较推荐第一种的写法

四、如何标注一个class类型?

实际上class我自己写得比较少,但是可能有人还是有需求,所以这里我也写一下

js 复制代码
/**
 * @class Person
 */
class Person {
  name
  #age
  /**
   * @static
   * @type {object} friend - 朋友
   * @property {string} friend.name - 名字
   * @property {number} friend.age - 年龄
   */
  static friend = { name: '', age: 22 }

  /**
   * @constructor
   * @param {string} name - name
   * @param {number} age - age
   */
  constructor(name, age) {
    /**
     * @property {string} name - 名字
     */
    this.name = name
    /**
     * @property {number} age - 年龄
     * @private
     */
    this.#age = age
  }
}

static遗留的问题

static friend那里标注得有点问题,不知道要怎么改,看有大神救一下吗。

五、如何学习写出更好的代码标注呢?

如何学习写出更好的代码标注呢?当然是点开node_modules,看一些这些著名的包是怎么写的啦

相关推荐
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
文心快码BaiduComate1 天前
限时集福!Comate挂件/皮肤上线,符(福)气掉落中~
前端·后端·程序员
勇敢di牛牛1 天前
vue3 + mars3D 三分钟画一个地球
前端·vue.js
IT_陈寒1 天前
Python+AI实战:用LangChain构建智能问答系统的5个核心技巧
前端·人工智能·后端
袁煦丞1 天前
MoneyPrinterTurbo一键生成短视频:cpolar内网穿透实验室第644个成功挑战
前端·程序员·远程工作
代码小学僧1 天前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
晴殇i1 天前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
Json____1 天前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express
since �1 天前
前端转Java,从0到1学习教程
java·前端·学习
码农刚子1 天前
ASP.NET Core Blazor简介和快速入门 二(组件基础)
javascript·后端