随缘更新,主要为了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()