TypeScript 中的環境宣告是什麼？以及何時使用它們？

---

TypeScript 作為 JavaScript 的超集，為 JavaScript 生態系統引入了靜態型別。它使開發人員能夠儘早捕獲錯誤並編寫更健壯的程式碼。TypeScript 提供的一個強大功能是能夠為變數、函式、類等定義和強制執行型別。但是，在某些情況下，TypeScript 缺少外部 JavaScript 庫或模組的型別資訊。為了彌合這一差距並啟用正確的型別檢查，TypeScript 提供了一個稱為“環境宣告”的功能。

在本教程中，我們將探討環境宣告是什麼、如何使用它們以及它們在何時有用。

什麼是環境宣告？

TypeScript 中的環境宣告提供了一種描述存在於 TypeScript 生態系統之外的變數、函式、物件或模組的形狀的方法。它們允許開發人員為用 JavaScript 編寫的程式碼或沒有型別定義的外部庫定義型別資訊。環境宣告充當宣告，提供型別註釋並使 TypeScript 編譯器能夠理解和驗證外部程式碼的使用。

環境宣告有兩個主要用途

• 為現有的 JavaScript 程式碼庫提供型別資訊：TypeScript 允許開發人員逐漸將型別檢查引入 JavaScript 專案。透過使用環境宣告，可以增量地將型別資訊新增到程式碼庫的部分，而無需將所有內容重寫為 TypeScript。

• 為外部庫提供型別宣告：TypeScript 可以利用環境宣告來宣告由缺少官方 TypeScript 定義的外部 JavaScript 庫提供的物件、函式或類的結構和型別。這使開發人員能夠在他們的專案中享受 TypeScript 型別檢查和自動完成功能帶來的好處。

使用環境宣告

環境宣告是使用環境宣告定義的，環境宣告是沒有實現的宣告。環境關鍵字告訴 TypeScript 編譯器該宣告存在於其他地方，通常在 JavaScript 檔案或外部庫中。

語法

要建立環境宣告，請使用 **declare** 關鍵字後跟要宣告的實體。以下是環境宣告的通用語法：

declare <entity>

**<entity>** 可以是變數、函式、類、介面或模組。讓我們探索一些示例來說明環境宣告的工作原理。

示例 1

讓我們考慮一個實際的例子。

讓我們建立一個名為 **my-library** 的模組，該模組具有一個實用程式函式 **capitalize**，該函式接收一個字串並返回其大寫版本。

my-library.js

function capitalize(st) {
   return st.charAt(0).toUpperCase() + st.slice(1);
}
module.exports = {
   capitalize: capitalize,
};

現在，我們將建立一個型別定義檔案來限制匯出 **capitalize** 函式的使用，並進行編譯時型別檢查。

首先，建立一個名為 **my-library.d.ts** 的新檔案，內容如下：

declare module 'my-library' {
   export function capitalize(str: string): string;
}

在上面的示例中，我們聲明瞭一個名為“my-library”的模組，並匯出一個函式 **capitalize**，該函式接受一個字串引數並返回一個字串。

您現在可以在您的 TypeScript 程式碼中使用 **capitalize** 函式，並確保型別安全。現在，我們建立一個 **app.ts** 檔案來使用我們的 **capitalize** 函式：

app.ts

/// <reference types="node" />
const { capitalize } = require("./my-library");
const result = capitalize("hello");
console.log(result); // Output: Hello

透過新增 /// **<reference types="node" />** 指令，您通知 TypeScript 使用已安裝的 Node.js 型別定義來使用 **require** 函式。現在，TypeScript 應該識別 **require** 函式。

透過提供準確的型別定義，TypeScript 編譯器可以驗證 **capitalize** 函式的使用，防止任何潛在的型別錯誤。

輸出

Hello

示例 2

例如，假設您在 TypeScript 專案中使用名為 **"moment.js"** 的 JavaScript 庫進行日期操作。透過為“moment.js”定義環境宣告，您可以確保 TypeScript 編譯器理解庫的 API 並提供型別檢查支援：

moment.d.ts：

declare module "moment" {
   function moment(): moment.Moment;
   function add(number: number, unit: string): moment.Moment;
   // Add other function declarations if needed
}
declare namespace moment {
   interface Moment {
      format(format: string): string;
      // Add other method declarations if needed
   }
}

test1.ts

import moment from "moment";

const now = moment();
const tomorrow = moment().add(1, "day");

console.log(now.format("YYYY-MM-DD")); // Output: Current date in YYYY-MM-DD format
console.log(tomorrow.format("YYYY-MM-DD")); // Output: Tomorrow's date in YYYY-MM-DD format

輸出

2023-05-26
2023-05-27

在這裡，我使用了 ts-node，這是一個用於 JIT（即時）編譯的 npm 包。您可以使用 npm 安裝它：

npm i -g ts-node

環境宣告的優勢

• **型別安全** - 環境宣告使 TypeScript 能夠即使在使用外部 JavaScript 庫時也能提供型別安全。型別聲明確保外部程式碼的使用與預期型別一致，從而減少執行時錯誤的可能性。

• **工具支援** - 透過使用環境宣告，開發人員可以獲得增強的工具支援，例如程式碼編輯器中的自動完成、智慧建議和準確的錯誤報告。這極大地提高了開發人員的體驗和生產力。

• **漸進式型別化** - 環境宣告允許開發人員逐漸將靜態型別引入現有的 JavaScript 專案。可以透過為程式碼庫的特定部分提供型別註釋來逐步採用 TypeScript，從而減少與全面重寫相關的努力和風險。

結論

TypeScript 中的環境宣告提供了一種強大的機制來描述外部 JavaScript 程式碼的形狀和行為。它們允許開發人員彌合 TypeScript 與缺少顯式 TypeScript 支援的現有 JavaScript 庫、遺留程式碼庫或瀏覽器 API 之間的差距。透過建立環境宣告，開發人員可以利用 TypeScript 靜態型別、編輯器支援和重構工具帶來的好處。

在本文中，我們探討了 TypeScript 中環境宣告的概念，並瞭解瞭如何有效地使用它們。我們瞭解到環境宣告是使用 **declare** 關鍵字建立的，該關鍵字通知 TypeScript 編譯器該宣告描述了一個外部實體。