前端開發何必執著于Typescript？Jsdoc一樣很好用

作者：前端梁哥 2023-08-09 09:03:25

開發開發工具

如果我告訴你，有一種工具，完全可以像寫Typescript一樣寫JS，你會用嗎？我說的這個工具就是Jsdoc，我們可以叫它JS文檔注釋。它的目的也是為JS添加類型的，只是以注釋的形式添加的，它有固定的語法。

為什么很多公司執著于typescript？因為typescript支持很多JS不支持的特性，正確的使用typescript，可以使你的代碼更易于維護。

最主要的是可以給JS添加類型，使編輯器的提示更智能。

但是，typescript是很復雜的一門語言，很多開發者并不能很好的運用typescript，甚至很多人是被迫的，他們內心是反感使用typescript的，導致代碼寫的亂七八糟。

事實上，JS也有很多優勢是typescript所不具備的，比如：JS的靈活性很高。

如果我告訴你，有一種工具，完全可以像寫typescript一樣寫JS，你會用嗎？

我說的這個工具就是jsdoc，我們可以叫它JS文檔注釋。它的目的也是為JS添加類型的，只是以注釋的形式添加的，它有固定的語法。

我就以項目中的代碼來舉例吧，大家看如下文檔注釋。其中，@template 用于聲明泛型類型，@typedef 用于定義一個類型。

在這里，我們定義了一個泛型T和一個名叫TreeNode的類型。TreeNode包含2個確定的字段：id和children，剩下的字段由泛型T確定。

/**
 * @template T
 * @typedef {T & {id: number, children: TreeNode<T>[]}} TreeNode
 */

下面，我們來測試一下這個類型。

如下圖，我們聲明一個變量node，使用@type指定為TreeNode類型，尖括號中間的對象類型替代了我們定義中的泛型T。

當我們鍵入點號后，編輯器給出了非常智能的提示。大家說，是不是很酷？

這是真實項目中的代碼，一個生成ID的函數。

使用@param可以為函數參數指定類型，在這里，我們為tree指定了TreeNode數組類型。使用@returns可以指定函數返回值的類型。

/**
 * @param {TreeNode<{}>[]} tree
 * @returns {number}
 */
export const genId = tree => {
  return (function eachFn (data) {
    return data.reduce((t, item) => {
      return Math.max(
        t,
        item.id || 0,
        item.children ? eachFn(item.children) : 0
      )
    }, 0)
  })(tree) + 1
}

如下圖，由于我們給tree指定了類型，當鍵入點號后，編輯器知道data是數組類型，正確地給出了數組的成員提示。這使我們在鍵入時，不易出錯。