我們的新項(xiàng)目是基于vite + vue3的，使用的編程語言是JAVAScript。我們的團(tuán)隊(duì)除了我，對(duì)typescript都不熟悉，他們覺得學(xué)習(xí)typescript有點(diǎn)困難。
眾所周知，JS的弱類型機(jī)制，使編輯器很難提供更好的智能感知和語法提示。那么，怎么辦呢？在過去，我通常單獨(dú)使用jsdoc。但這次，我想做一個(gè)不同的嘗試，使用TS類型定義和jsdoc協(xié)作。
我們只需在項(xiàng)目根目錄創(chuàng)建一個(gè)jsconfig.json文件即可，基本配置如下。我們的項(xiàng)目中使用了element-plus組件庫，為了提供更好的智能感知，我添加了element-plus的TS類型定義到compilerOptions的types數(shù)組。
{
"compilerOptions": {
"types": ["element-plus/global"],
"lib": ["ESNext", "DOM"]
},
"exclude": ["node_modules", "dist"]
}
大家不要使用target配置JS語言版本，否則會(huì)出現(xiàn)各種各樣的問題，會(huì)造成智能感知失靈，一定要使用lib配置。我以前踩過這些坑，網(wǎng)上找不到任何解決方案，我通過查看axIOS的tsconfig.json，尋找到了解決方案。
為了便于管理，我在項(xiàng)目根目錄創(chuàng)建了一個(gè)typings文件夾，每個(gè)模塊的類型定義用一個(gè)單獨(dú)的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)在，我們?cè)趈s文件中使用上面的類型定義。我們的一些所有模塊公用的類型定義都在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í)，編輯器給出了智能提示。告訴我們，該函數(shù)期望接收一個(gè)misc.LogQueryParams類型的參數(shù)，返回common.PageDataResPromise<misc.Log>類型的值。
當(dāng)我們調(diào)用該函數(shù)，輸入?yún)?shù)的時(shí)候，編輯器給出了非常智能的提示。這是不是很酷？
童鞋們都學(xué)會(huì)了嗎？
