亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.430618.com 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

我們的新項目是基于vite + vue3的,使用的編程語言是JAVAScript。我們的團隊除了我,對typescript都不熟悉,他們覺得學習typescript有點困難。

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

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

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

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

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

// misc.d.ts文件
declare namespace misc {
  /** 日志查詢參數 */
  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
  }
}
 

現在,我們在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 })
 

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

當我們調用該函數,輸入參數的時候,編輯器給出了非常智能的提示。這是不是很酷?

童鞋們都學會了嗎?

分享到:
標簽:Vue
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定