打字稿，減肥字

多年來，TypeScript 已經成為JavaScript 開發中不可或缺的一部分。它在JavaScript 的基礎上添加了類型系統，增強了代碼的可讀性和可維護性。然而，TypeScript 的額外語法和編譯步驟有時會增加開發負擔。幸運的是，TypeScript 團隊支持使用JSDoc 對純JavaScript 代碼進行類型檢查，從而兼顧類型安全和開發效率。

項目設置

要開始使用JSDoc 進行類型檢查，你需要NodeJS 和npm。創建一個新項目，運行npm init 。本文將使用VS Code 作為代碼編輯器。安裝TypeScript：

 npm i -D typescript

創建tsconfig.json文件，添加以下配置：

 {
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["es2017", "dom"],
    "allowJs": true,
    "checkJs": true,
    "noEmit": true,
    "strict": false,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "esModuleInterop": true
  },
  "include": ["script", "test"],
  "exclude": ["node_modules"]
}

關鍵配置是allowJs和checkJs ，都設置為true ，允許TypeScript 檢查JavaScript 代碼。我們還指定了/script目錄作為代碼所在位置。

簡單示例

創建一個index.js文件，編寫一個簡單的加法函數：

 /**
 * Add two numbers together
 * @param {number} x
 * @param {number} y
 * @return {number}
 */
function add(x, y) {
  return xy;
}

我們通過JSDoc 註解@param和@return指定了參數和返回值的類型。 嘗試使用錯誤類型調用函數，VS Code 會提示錯誤。

JSDoc 註解等效於TypeScript 代碼：

 /**
 * Add two numbers together
 */
function add(x: number, y: number): number {
  return xy;
}

JSDoc 支持多種內置類型，例如string 、 object 、 Array以及HTMLElement 、 MutationRecord等DOM 類型。

JSDoc 還允許為對象添加類型約束，例如WeakMap ：

 /** @type {WeakMap<object string> } */
const metadata = new WeakMap();

const object = {};
const otherObject = {};

metadata.set(object, 42); // 報錯，因為值不是字符串metadata.set(otherObject, 'Hello world');</object>

自定義類型

JSDoc 允許定義自定義類型，例如Person類型：

 /**
 * @typedef Person
 * @property {string} name - The person's name
 * @property {number} age - The person's age
 * @property {string} [hobby] - An optional hobby
 */

使用@typedef定義類型，使用@property或@prop定義屬性。

使用自定義類型：

 /** @type {Person} */
const person = { name: 'John Doe', age: 30, hobby: 'reading' };

可以使用聯合類型定義有限的選項集：

 /**
 * @typedef {'cat'|'dog'|'fish'} Pet
 */

泛型

JSDoc 支持泛型，例如identity函數：

 /**
 * @template T
 * @param {T} target
 * @return {T}
 */
function identity(target) {
  return target;
}

使用@template定義泛型類型。

類型轉換

有時需要進行類型轉換，例如處理事件監聽器：

 document.getElementById('input').addEventListener('input', event => {
  console.log(/** @type {HTMLInputElement} */(event.target).value);
});

使用/** @type {类型} */進行類型轉換。

總結

JSDoc 提供了一種在編寫純JavaScript 代碼的同時獲得類型檢查和代碼提示的方式，這對於那些希望在不引入額外語法和編譯步驟的情況下提高代碼質量的項目非常有用。 雖然TypeScript 編譯器功能強大，但JSDoc 提供了一種靈活的替代方案。

以上是打字稿，減肥字的詳細內容。更多資訊請關注PHP中文網其他相關文章！