【项目配置】vite-plugin-singlefile

前言

在有了TS的现在，可能大家觉得这个没什么用了，但我们现在还是有挺多老项目需要维护的，vue2的老项目并不在少数，这时候用上JSDOC也能起到一定的提示作用。本篇文章就带大家了解一下JSDOC。

学习地址

我这里就简单介绍一下我们常用的那些，更多的语法大家如果想了解的话可以自己去探索学习
地址:https://www.jsdoc.com.cn/

@param

定义参数,给参数增加[]，代表可选参数

/**
 * 获取用户性别
 * @param {User} [user] 查询的用户，可能为空
 * @returns {SEX | null}
 */
function getUserSex (user) {
  if (user) {
    return user.sex
  }
  return null
}

getUserSex()

@description

可以给函数添加名字

@returns

返回参数的类型

@typedef

使用场景：声明一个自定义类型，可以用于函数入参出参，类型于typesript的type定义

/**
   @description 获取用户名称
 * @typedef {Object} userParam
 * @property {string} userParam.name - 用户姓名
 * @property {number} [userParam.age] - 用户年龄
 * @param {userParam} userParam 查询的用户信息参数
 * @returns {string} 用户姓名
 */
const getUserInfo=(userParam)=>{
  return userParam.name
}

ok，我们讲了那个多个语法，通过这一个函数统一来看一下
我们可以看到，有这个函数的一些描述信息和代码参数提示

@enum

使用场景：定义一个对象为枚举类型，可以直接使用该对象作为入参类型，一般配合@readonly使用，因为枚举值正常来说是不能被更改的。

/**
 * @readonly
 * @enum {'1' | '0'}
*/
const SEX={
  MALE:'1',
  FEMALE:'0'
}

@this

指明this指向，比如我们在vue2中，可以写

/**
@this Vue
*/

将this指向Vue之类的

@todo

语法：@todo 描述要实现的事情
比如我们现在写了一个空方法，预留了一下这个方法，写todo，说明之后要干啥

/**
@todo 用来保存数据
*/
const saveFun=()=>{

}

@example

用来举例,比如

/**
 * @description 俩数相加
 * @param {number} num1 相加数字
 * @param {number} num2 相加数字
 * @returns {number} 两数之和
 * @example
 * add(1, 2) // 3
 */
function add (num1, num2) {
  return num1 + num2
}

@deprecated

当版本升级后，原有代码需要逐步替换时，标注好什么代码在日后不使用以及指引如何切换到新代码，对于版本升级/重构代码时可让团队开发人员清晰知道被标注的代码已废弃。

/**
 * @deprecated 本方法新版本已经废弃，请使用newFun
 */
function oldFun(){

}

function newFun(){

}

结语

本片文章简单介绍了JSDOC如何使用，为了代码更好的维护，大家也可以在平时开发时用上,更多内容敬请期待,债见~