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

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

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

/**
 * @标签名 { 类型 } 变量名 - 说明
 */

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

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

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

interface TypeParams {
  method: 'POST' | 'GET'
  id: string
  page: number
}

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

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

1.直接在类型里面写

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

优点: 书写简洁

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

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

/**
 *
 * @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的类型的写法

/**
 *
 * @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)
}

优点: 可以类型复用

缺点：书写不够直观

总结

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

扩展：函数默认参数值

用法

/**
 * @标签名 { 类型 }[变量名=值] 变量名 - 说明
 */

// 例子
/**
 * @param { strig }[id='abc'] id - 这是请求的id
 */

/**
 *
 * @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)
}

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

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

/**
 *
 * @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标注

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

2.用@default来标注

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

总结

比较推荐第一种的写法

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

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

/**
 * @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那里标注得有点问题，不知道要怎么改，看有大神救一下吗。

五、泛型标注

用@template可以标注一个泛型T

写一个函数，传入一个基本类型的数组，返回第一个值，

/**
 * @template T
 * @param {T[]} arr
 * @returns {T}
 */
function firstElement(arr) {
  return arr[0]
}

const numbers = [1, 2, 3, 4, 5]
const firstNumber = firstElement(numbers) // 类型推断为number
const strings = ['apple', 'banana', 'cherry']
const firstString = firstElement(strings) // 类型推断为string

六、用@typedef引用另一个文件的类型

@typedef可以引用另一个文件的类型，这里以axios为例子，将演示如何声明一个AxiosResponse类型。 参考文章： # How to set the response type using axios with Javascript and JSDocs?

import axios from 'axios'

/**
 * @typedef {Object} Comment
 * @property {number} id - 用户id
 * @property {number} postId - 文章id
 * @property {string} body - 内容
 */

/**
 * @typedef {import("axios").AxiosResponse<Comment>} CommentResponse
 */

/**
 *
 * @param {number} id - 查找的id
 * @returns {Promise<CommentResponse>}
 */
function findCommentById(id) {
  return axios.get(`https://jsonplaceholder.typicode.com/comments/${id}`)
}

async function fn() {
  const { data } = await findCommentById(1)
  data.body
}

如何学习写出更好的代码标注呢？

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