个人向JsDoc使用,随缘更新

91 阅读2分钟

随缘更新,主要为了vscode的类型推导功能,主写原生和react,搜集了一些别人的写法和自己的理解

原生篇

结构体

结构体的基础定义

/**
 * @typedef {number|string|symbol} Key 
 */
/**
 * @typedef {object} Person 个人
 * @property {string} Person.name  姓名
 * @property {number} Person.id  编号
 */
/**
 * @typedef {object} Person2 个人
 * @property {string} name  姓名
 * @property {number} id  编号
 */
/**
 * @typedef {object} PersonGlobal
 * @property {?Key} current 当前个人
 */
/**
 * @typedef {{[id:Key]:Person}&PersonGlobal} PersonMap 个人映射
 */
/**
 * @typedef {{[id:Key]:Person,current:Key}} PersonMap2 个人映射
 */
/**@type {PersonMap2} */
let b={}
let a={
  name:"zhang san",
  id:1,
}
/**@typedef {typeof a} A*/
/**@typedef {Pick<Person,"name">} OnlyPersonName */
/**@typedef {Omit<Person,"id">} OnlyPersonName2 */

函数

函数的基础定义,获取参数和返回类型

/**
 * 和
 * @function add 加
 * @param {number} a 参数1
 * @param {number} b 参数2
 * @returns {number}
 */
function add(a,b){
  return a+b
}
/**
 * 最大值
 * @param {number} a
 * @param {...number} num
 * @returns {number}
 */
function max(a,...num){
  return Math.max(a,...num)
}
/**@typedef {typeof max} MaxFunc */
/**@typedef {(a:number,...num:number[])=>number} MaxFunc2 */
/**@typedef {Parameters<MaxFunc>[0]}  MaxFuncParameters*/
/**@typedef {ReturnType<MaxFunc>}  MaxFuncReturn*/

模版

模版基础使用

/**
 * @template T
 * @typedef {object} DataAll
 * @property {T} data 数据1
 * @property {number} data2 数据2
 */
/**@type {DataAll<string>} */
let dataAll
dataAll.data
/** 
  * @template T 
  * @typedef {T extends string ? 'yes' : 'no'} IsString<T>
  */
/**
 * @function addTemplate 模版加
 * @template {number|string} T
 * @param {T} a
 * @param {T} b 
 * @returns {T}
 */
function addTemplate(a,b){
  return a+b
}
let a=1,b=2
/**@type {typeof addTemplate<number>} */
let addNumber=addTemplate
let c=addTemplate(a,b)
c=addTemplate(1,2)
let c2=addNumber(1,2)

/**  
 * @template {keyof WindowEventMap} T  
 * @param {T} name  
 * @param {(this:Window, ev: WindowEventMap[T]) => void} value  
 */  
function test(name, value) {  
  serviceApis[name] = value  
}  
test('mousedown', (ev) => {})

枚举

枚举基本定义

/**
 * @description 服务器ret_code返回类型枚举
 * @enum {number} 
 */
const EnumRetCode = {
  ENUM_RET_CODE_OK: 0,
  /** @description 系统未知错误 */
  ENUM_RET_CODE_UNKOWN: 1,
}
EnumRetCode.ENUM_RET_CODE_UNKOWN
/**
 * 反转对象
 * @template {Record<any,any>} T
 * @param {T} data
 * @returns {{[K in keyof T as `${T[K]}`]:K}}
 */
function reverseObject(data) {
  let newData = {}
  for (let k in data) {
    newData[data[k]] = k
  }
  return newData
}
/**
 * @description 颜色
 * @enum {number} 
 */
const EnumColor = {
  /** @type {0} @description 红 */
  Red: 0,
  /** @type {1} @description 绿 */
  Green: 1,
  /** @type {2} @description 蓝 */
  Blue: 2,
}
/**
 * @description 颜色
 * @enum {string} 
 */
const EnumReverseColor =reverseObject(EnumColor)

class

class的定义和继承,结合模版和函数

/**
 * @typedef {object} Parent1State
 * @property {?string} data1
 */
/**
 * @class Parent1
 */
class Parent1{
  /**@type {Parent1State} */
  state=null
}
/**
 * @template {object} T
 * @typedef {object} Parent2SelfState
 * @property {?T} data2
 */
/**
 * @template {object} T
 * @typedef {Parent1["state"]&Parent2SelfState<T>} Parent2State
 */
/**
 * @template {object} T
 * @typedef {Parent1State&Parent2SelfState<T>} Parent2State2
 */
/**
 * @template {object} T
 * @class Parent2
 * @extends {Parent1}
 */
class Parent2 extends Parent1{
  /**@type {Parent2State<T>} */
  state=null
  /**
   * 返回data2
   * @returns {T}
   */
  getData2(){
    return this.state?.data2
  }
}
let p1=new Parent1()
p1.state.data1
let p2=new Parent2()
p2.getData2()
/**@type {Parent2<string>} */
let p22=p2
p22.getData2()
/**
 * @typedef {object} Parent3SelfState
 * @property {?boolean} data3
 * @typedef {Parent2<number>["state"]&Parent3SelfState} Parent3State
 */
/**
 * @class Parent3
 * @extends {Parent2<number>}
 */
class Parent3 extends Parent2{
  /**@type {Parent3State} */
  state=null
  getData3(){
    return this.state?.data3
  }
}
let p3=new Parent3()
p3.getData3()