在現有的 Vue 項目中逐步引入 TypeScript 的類型檢查

---

本文源于一道面試題：注：兩種問法一個意思哈！！

問題一：“ 老項目Js寫的，如何輕量方式享受 ts 類型？”
問題二：“如何 在現有的 Vue|JS 項目中是逐步引入 TypeScript 的類型檢查”

---

在開發大型項目時，類型安全是一個非常重要的特性，它可以幫助開發者在編譯時捕獲潛在的錯誤，提高代碼的質量和可維護性。如果你的現有 Vue 項目是基于純 JavaScript 的，但你希望逐步引入 TypeScript 的類型檢查，那么可以通過使用類型聲明文件（.d.ts 文件）和 JSDoc 注解來實現，無需立即全面重構項目。這種方法允許你在保持項目穩定性的同時，逐步享受類型安全帶來的好處。以下是詳細的實現方法：

這里不了解 .d.ts 是什么的，可以快速了解一下 點擊跳轉！！

介紹

在 Vue 項目中引入 TypeScript 的類型檢查，可以顯著提升代碼的可讀性和可維護性。通過類型聲明和注解，你可以在開發過程中獲得即時的類型反饋，減少運行時錯誤。本文將介紹如何通過類型聲明文件和 JSDoc 注解，在現有的 Vue 項目中逐步引入 TypeScript 的類型檢查。

1. 使用類型聲明文件（.d.ts）

類型聲明文件是一種為現有的 JavaScript 文件提供類型信息的方法，而不需要改變文件的實際內容。通過創建 .d.ts 文件，你可以為模塊、函數、變量等提供類型注解。

步驟：

1. 創建類型聲明文件：

   在項目根目錄或 src 目錄下創建一個 types.d.ts 文件。這個文件將用于聲明項目中 JavaScript 文件的類型信息。

2. 為 JavaScript 模塊提供類型信息：

   在 types.d.ts 文件中，為需要類型檢查的 JavaScript 文件提供類型聲明。例如，如果你有一個 Vue 組件和一個數學工具模塊，可以這樣聲明：

   // types.d.ts
   declare module '*.vue' {import { DefineComponent } from 'vue';const component: DefineComponent<{}, {}, any>;export default component;
   }declare module './utils/math' {export function add(a: number, b: number): number;
   }
   

   這段代碼為所有的 .vue 文件和 ./utils/math 模塊提供了類型聲明。

3. 確保 TypeScript 編譯器包含類型聲明文件：

   在你的 tsconfig.json 文件中，確保 include 字段包含了你的類型聲明文件。例如：

   {"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.vue"]
   }
   

   這樣，TypeScript 編譯器在編譯時會包含這些類型聲明文件，從而進行類型檢查。

2. 使用 JSDoc 注解

JSDoc 注解是一種在 JavaScript 文件中直接添加類型注解的方法。這些注解可以被 TypeScript 編譯器理解，從而在 JavaScript 文件中提供類型檢查。

步驟：

1. 在 JavaScript 文件中添加 JSDoc 注解：

   你可以在函數的注釋中使用 JSDoc 注解來指定參數和返回值的類型。例如：

   /*** Adds two numbers.* @param {number} a - The first number.* @param {number} b - The second number.* @returns {number} The sum of the two numbers.*/
   function add(a, b) {return a + b;
   }module.exports = { add };
   

   這段代碼通過 JSDoc 注解為 add 函數提供了類型信息。

2. 確保 TypeScript 編譯器理解 JSDoc 注解：

   默認情況下，TypeScript 編譯器能夠理解 JSDoc 注解。你只需要確保你的 .js 文件被包含在 tsconfig.json 的 include 字段中。這樣，TypeScript 編譯器在編譯時會讀取這些注解并進行類型檢查。

高階擴展

1. 為第三方庫添加類型聲明：

   如果你的項目中使用了第三方 JavaScript 庫，而這些庫沒有提供 TypeScript 類型聲明，你可以自己創建 .d.ts 文件來為這些庫提供類型聲明。這可以讓你在使用這些庫時享受到類型檢查的好處。

2. 使用混合類型：

   TypeScript 允許你使用混合類型（Union Types）和交叉類型（Intersection Types）來組合多個類型。這可以讓你更靈活地定義函數的參數和返回值類型。

3. 利用 TypeScript 的高級特性：

   TypeScript 提供了許多高級特性，如泛型、條件類型、映射類型等。這些特性可以讓你更精確地定義類型，提高代碼的可讀性和可維護性。

4. 逐步遷移策略：

   你可以逐步為項目中的 JavaScript 文件添加類型注解，而不是一次性將整個項目重構為 TypeScript。這有助于在保持項目穩定性的同時，逐步引入類型安全性。你可以從核心模塊或新功能開始，逐步向其他部分擴展。

對比

以下是一個對比表格，用于比較“一次性將 JavaScript 更換為 TypeScript”和“逐步遷移至 TypeScript”這兩種方法：

	一次性將 JavaScript 更換為 TypeScript	逐步遷移至 TypeScript
轉換速度	快速，一次性完成整個項目的轉換	較慢，逐步進行，可能需要較長時間
項目穩定性風險	高，因為整個項目結構、語法和類型系統同時發生變化，可能引入大量錯誤	低，每次只修改一小部分代碼，易于測試和驗證
開發團隊適應	團隊需要快速適應 TypeScript 的語法和特性	團隊可以逐步學習和適應 TypeScript，減輕學習壓力
類型系統完整性	一開始就可以擁有完整的類型系統	類型系統逐步建立，可能初期不夠完整
重構工作量	大量重構工作，可能需要重寫大量代碼	重構工作量分散，每次只針對一小部分代碼
編譯時間	初始編譯時間可能較長，因為整個項目都需要類型檢查	編譯時間逐步增加，隨著類型注解的添加而變長
回滾難度	如果轉換出現問題，回滾到原始狀態可能比較困難	易于回滾，因為每次只做了小范圍修改
適合項目類型	適合新項目或小型項目，可以快速建立類型系統	適合大型項目或正在開發中的項目，可以保持項目穩定性

總結

通過類型聲明文件和 JSDoc 注解，你可以在現有的 Vue 項目中逐步引入 TypeScript 的類型檢查。這種方法允許你在不改變現有代碼結構的情況下，享受類型安全帶來的好處。同時，你還可以利用 TypeScript 的高級特性來進一步提高代碼的質量和可維護性。逐步遷移策略則讓你能夠在保持項目穩定性的同時，逐步引入類型安全性。希望本文能夠對你有所幫助，讓你在 Vue 項目中更好地利用 TypeScript 的類型系統。

看到這里的小伙伴，歡迎點贊、評論，收藏！
下方添加好友，面試群等著您！