Jsdoc的的第高级用法：根据函数第一个参数，来确定剩余参数怎么传

作者：前端梁哥 2023-03-10 09:11:25开发 前端 本篇文章，高级根据我们来看一个高级点的用法用法。我们来实现一个功能：根据函数的函数第一个参数，来确定剩余参数怎么传。参数参数传

jsdoc也叫文档注释，确定是剩余JS开发中的一把利器，主要用于为JS添加类型声明，的第这样我们就可以像写TS一样写JS了。高级根据

我之前写过一篇文章，用法讲述了jsdoc的函数基础用法。本篇文章，参数参数传我们来看一个高级点的确定用法。我们来实现一个功能：根据函数的剩余第一个参数，来确定剩余参数怎么传。的第

我想实现如下函数，该函数用于向父窗口发送消息。它可以接收不确定个数的参数，其中第一个参数是eventType，该参数有固定的几个可选值，剩余参数根据eventType的值来确定。

const sendEventToParentWindow = (eventType, ...args) => { 
window.postMessage(
JSON.stringify({  type: eventType, payload: args })
)
}

首先，我们需要声明一个类型

请看如下代码。其中，@typedef 用于声明一个类型，@property 用于声明该类型包含的字段。

/**
* @typedef CallEvent
* @property { [calltype: string, telno: string, callid: string, queid: string, uudata: string]} OnAuthSuccess
* @property { [calltype: string, telno: string, callid: string, queid: string, uudata: string]} OnCalling
* @property { [calltype: string, telno: string, callid: string, queid: string, recfile: string, uudata: string]} OnCallConnect
* @property { [calltype: string]} OnCallHangup
* @property { []} changeSeatState
* @property { []} changeIVR
* @property { []} changeConsult
* @property { []} socketConnected
* @property { [telno: string, exinfo: string]} OnCustomCall
* @property { [errcode: string]} OnCallReturn
*/

然后，我们来为以上函数添加类型声明。

请看如下代码。其中，@template 用于声明泛型类型，我们定义了一个泛型T，它的值取自CallEvent对象的键。@param 用于声明函数参数的类型，eventType的类型为泛型T，args的类型为CallEvent[T]，该类型由T的值决定。这个声明，大家都能理解吗？

/**
* @template { keyof CallEvent} T
* @param { T} eventType
* @param  { CallEvent[T]} args
*/
const sendEventToParentWindow = (eventType, ...args) { }

现在，我们来调用以上函数试一试

当我们输入括号后，编辑器提示我们，该函数有7种传参方式。

当我们输入引号后，编辑器提示出了第一个参数期望接收的值。

当我们输入第一个参数后，编辑器给出了后面参数的提示，告诉我们还需5个参数，以及每个参数期望的类型。

当我们将changeIVR作为第一个参数时，编辑器提示我们，后面没有需要传的参数了。

大家说，是不是很酷？JS中很多拼写错误都不会报错，这增加了排查问题的难度。有了jsdoc，我们的拼写错误将大幅减少。由于有了编辑器的智能提示，我们不需要把整个单词都敲出来，这样写起来更爽了，不是吗？

责任编辑：姜华 来源： 今日头条 jsdoc文档注释

(责任编辑：综合)