APP
最近在將一個(gè)使用 JavaScript 寫(xiě)的 npm 包重構(gòu)成 TypeScript?。重構(gòu)完后，發(fā)現(xiàn)原先的 JSDoc 注釋在 ts 文件編譯后失效了，便搜索了一下，但是谷歌并沒(méi)有找到我所想要的答案，便只能自己研究了。這篇算是記錄一下研究結(jié)果。
首先說(shuō)明一下 JSDoc 的函數(shù)參數(shù)注釋寫(xiě)法：在函數(shù)上方，內(nèi)容放置于多行注釋內(nèi)，下面是一個(gè)基礎(chǔ)的例子，詳細(xì)內(nèi)容請(qǐng)參考 Use JSDoc: @param
/** * @param somebody */ function sayHello(somebody) { alert('Hello ' + somebody); }
至于為什么要使用 JSDoc ？因?yàn)榭梢詾楹瘮?shù)參數(shù)添加描述信息（這樣更新參數(shù)后就不用更新文檔啦 x ）。
我先試著使用了?TypeScript 的?interface 關(guān)鍵詞，先編寫(xiě)兩個(gè)接口，然后將函數(shù)的參數(shù)的類(lèi)型設(shè)置成對(duì)應(yīng)接口，但是這樣會(huì)使 VSCode 的代碼提示只顯示函數(shù)參數(shù)的類(lèi)型，不顯示類(lèi)型的內(nèi)容（如圖 1 所示），具體例子如下
/** 這是 bar 數(shù)組 */ interface Bar { /** 這是 bar 數(shù)組的 i 字段 */ i: string; /** 這是 bar 數(shù)組的 j 字段 */ j: string; } /** etc 對(duì)象 */ interface Etc { /** 這是 etc 對(duì)象的 x 字段 */ x: boolean; /** 這是 etc 對(duì)象的 y 字段 */ y: string; /** 這是 etc 對(duì)象的 z 字段 */ z: string; } /** foo 函數(shù)的描述 * @param {Bar[]} bar - 這是 bar 數(shù)組 * @param {String} bar[].i - 這是 bar 數(shù)組的 i 字段 * @param {String} bar[].j - 這是 bar 數(shù)組的 j 字段 * @param {Etc} etc - etc 對(duì)象 * @param {Boolean} etc.x - 這是 etc 對(duì)象的 x 字段 * @param {String} etc.y - 這是 etc 對(duì)象的 y 字段 * @param {String} etc.z - 這是 etc 對(duì)象的 z 字段 */ const foo = ( bar: Bar[] = [], etc: Etc = { x: true, y: './y', z: '', }, ) => {};
??
?圖 1
這顯然不是我所想要的。于是便嘗試不將類(lèi)型抽離，而是直接在函數(shù)參數(shù)后面定義，寫(xiě)完編譯后看結(jié)果，完美。例子如下
/** foo 函數(shù)的描述 * @param {Object[]} bar - 這是 bar 數(shù)組 * @param {Object} etc - etc 對(duì)象 */ const foo = ( bar: { /** 這是 bar 數(shù)組的 i 字段 */ i: string; /** 這是 bar 數(shù)組的 j 字段 */ j: string; }[] = [], etc: { /** 這是 etc 對(duì)象的 x 字段 */ x: boolean; /** 這是 etc 對(duì)象的 y 字段 */ y: string; /** 這是 etc 對(duì)象的 z 字段 */ z: string; } = { x: true, y: './apis', z: '', }, ) => {};
?圖 2
本文摘自 ：https://www.cnblogs.com/
