當(dāng)前位置:首頁 > IT技術(shù) > Web編程 > 正文

在 TypeScript 中使用 JSDoc 為函數(shù)的多個對象參數(shù)寫注釋
2021-09-18 17:02:44

最近在將一個使用 JavaScript 寫的 npm 包重構(gòu)成 TypeScript?。重構(gòu)完后,發(fā)現(xiàn)原先的 JSDoc 注釋在 ts 文件編譯后失效了,便搜索了一下,但是谷歌并沒有找到我所想要的答案,便只能自己研究了。這篇算是記錄一下研究結(jié)果。

首先說明一下 JSDoc 的函數(shù)參數(shù)注釋寫法:在函數(shù)上方,內(nèi)容放置于多行注釋內(nèi),下面是一個基礎(chǔ)的例子,詳細(xì)內(nèi)容請參考 Use JSDoc: @param

/**
 * @param somebody
 */
function sayHello(somebody) {
    alert('Hello ' + somebody);
}

至于為什么要使用 JSDoc ?因?yàn)榭梢詾楹瘮?shù)參數(shù)添加描述信息(這樣更新參數(shù)后就不用更新文檔啦 x )。

我先試著使用了?TypeScript 的?interface 關(guān)鍵詞,先編寫兩個接口,然后將函數(shù)的參數(shù)的類型設(shè)置成對應(yīng)接口,但是這樣會使 VSCode 的代碼提示只顯示函數(shù)參數(shù)的類型,不顯示類型的內(nèi)容(如圖 1 所示),具體例子如下

/** 這是 bar 數(shù)組 */
interface Bar {
  /** 這是 bar 數(shù)組的 i 字段 */
  i: string;
  /** 這是 bar 數(shù)組的 j 字段 */
  j: string;
}
/** etc 對象 */
interface Etc {
  /** 這是 etc 對象的 x 字段 */
  x: boolean;
  /** 這是 etc 對象的 y 字段 */
  y: string;
  /** 這是 etc 對象的 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 對象
 * @param {Boolean} etc.x - 這是 etc 對象的 x 字段
 * @param {String} etc.y - 這是 etc 對象的 y 字段
 * @param {String} etc.z - 這是 etc 對象的 z 字段
 */
const foo = (
  bar: Bar[] = [],
  etc: Etc = {
    x: true,
    y: './y',
    z: '',
  },
) => {};

??

?圖 1

這顯然不是我所想要的。于是便嘗試不將類型抽離,而是直接在函數(shù)參數(shù)后面定義,寫完編譯后看結(jié)果,完美。例子如下

/** foo 函數(shù)的描述
 * @param {Object[]} bar - 這是 bar 數(shù)組
 * @param {Object} etc - etc 對象
 */
const foo = (
  bar: {
    /** 這是 bar 數(shù)組的 i 字段 */
    i: string;
    /** 這是 bar 數(shù)組的 j 字段 */
    j: string;
  }[] = [],
  etc: {
    /** 這是 etc 對象的 x 字段 */
    x: boolean;
    /** 這是 etc 對象的 y 字段 */
    y: string;
    /** 這是 etc 對象的 z 字段 */
    z: string;
  } = {
    x: true,
    y: './apis',
    z: '',
  },
) => {};

?圖 2

本文摘自 :https://www.cnblogs.com/

開通會員,享受整站包年服務(wù)立即開通 >