我們的新項目是基于vite + vue3的，使用的編程語言是JavaScript。我們的團隊除了我，對typescript都不熟悉，他們覺得學(xué)習(xí)typescript有點困難。

眾所周知，JS的弱類型機制，使編輯器很難提供更好的智能感知和語法提示。那么，怎么辦呢？在過去，我通常單獨使用jsdoc。但這次，我想做一個不同的嘗試，使用TS類型定義和jsdoc協(xié)作。

我們只需在項目根目錄創(chuàng)建一個jsconfig.json文件即可，基本配置如下。我們的項目中使用了element-plus組件庫，為了提供更好的智能感知，我添加了element-plus的TS類型定義到compilerOptions的types數(shù)組。

{
  "compilerOptions": {
    "types": ["element-plus/global"],
    "lib": ["ESNext", "DOM"]
  },
  "exclude": ["node_modules", "dist"]
}

大家不要使用target配置JS語言版本，否則會出現(xiàn)各種各樣的問題，會造成智能感知失靈，一定要使用lib配置。我以前踩過這些坑，網(wǎng)上找不到任何解決方案，我通過查看axios的tsconfig.json，尋找到了解決方案。

為了便于管理，我在項目根目錄創(chuàng)建了一個typings文件夾，每個模塊的類型定義用一個單獨的TS文件，使用命名空間來管理，例子如下。

// misc.d.ts文件
declare namespace misc {
  /** 日志查詢參數(shù) */
  type LogQueryParams = common.PageParams & {
    operation: string,
    userId: number,
    loggedTime0: string,  
    loggedTime1: string,
    loggedAddr: string
  }

  /** 日志 */
  type Log = {
    id: number,
    args: string,
    loggedAddr: string,
    loggedTime: number,
    method: string,
    operation: string,
    result: string,
    resultOk: boolean,
    userId: number
  }
}

現(xiàn)在，我們在js文件中使用上面的類型定義。我們的一些所有模塊公用的類型定義都在common.d.ts文件中編寫。

下面的多行注釋使用了jsdoc語法，我們也叫它文檔注釋。vscode，webstorm等IDE都支持jsdoc語法。

/**
 * 獲取日志分頁
 * @param {misc.LogQueryParams} params
 * @returns {common.PageDataResPromise<misc.Log>}
 */
export const getLogByPage = params => request('/api/misc/op/traces', { params })

當(dāng)我們將鼠標(biāo)指針移入函數(shù)名時，編輯器給出了智能提示。告訴我們，該函數(shù)期望接收一個misc.LogQueryParams類型的參數(shù)，返回common.PageDataResPromise<misc.Log>類型的值。

當(dāng)我們調(diào)用該函數(shù)，輸入?yún)?shù)的時候，編輯器給出了非常智能的提示。這是不是很酷？

童鞋們都學(xué)會了嗎？