資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何建立你自己的TypeScript型別定義檔案(.d.ts)?
TypeScript是JavaScript的超集，它提供了靜態型別檢查功能，可以提高程式碼質量並在編譯期間捕獲錯誤。為了充分利用TypeScript的靜態型別功能，專案中使用的外部JavaScript庫和模組必須有型別定義檔案(.d.ts)。這些型別定義檔案描述了外部實體公開的型別和介面，使TypeScript編譯器能夠理解它們的結構和行為。
在本文中，我們將探討建立自定義TypeScript型別定義檔案的逐步過程，使開發人員能夠在專案中受益於靜態型別檢查。
先決條件
型別定義檔案(.d.ts)充當JavaScript程式碼和TypeScript編譯器之間的介面。它們描述了JavaScript庫或框架中存在的型別、函式、類和模組。這些檔案使TypeScript編譯器能夠執行型別檢查並在IDE中提供豐富的IntelliSense支援。
在深入建立型別定義檔案之前，請確保你已設定以下先決條件：
對TypeScript的基本理解。
TypeScript已全域性安裝在你的系統上。你可以使用npm透過以下命令安裝它：
npm install -g typescript
步驟1：確定庫結構
要建立型別定義檔案，你需要了解你要為其建立型別的庫或模組的結構。這包括分析JavaScript程式碼，理解公開的函式、類、物件及其對應的型別。
步驟2：從一個空的.d.ts檔案開始
建立一個空的.d.ts檔案，其名稱與你要為其建立型別的JavaScript庫或模組相同。例如，如果你的庫名為"my-library"，則型別定義檔案的名稱應為"my-library.d.ts"。
步驟3：宣告模組
建立型別定義檔案的步驟是使用declare module語法宣告模組。這告訴TypeScript你正在為特定的模組或庫定義型別。示例如下：
declare module 'my-library' {
// Type definitions go here
}
步驟4：定義型別和介面
在模組宣告中，你可以定義描述庫結構的型別和介面。你可以為物件宣告介面，為函式宣告型別等等。
讓我們考慮一個例子，我們有一個名為"math-library"的庫，它有一個名為add的函式，該函式接受兩個數字作為引數並返回它們的和：
declare module 'math-library' {
export function add(a: number, b: number): number;
}
在上面的示例中，我們聲明瞭一個名為"math-library"的模組，並匯出一個函式add，它接受兩個數字（a和b）作為引數並返回一個數字。
步驟5：匯出型別和介面
要使已定義的型別和介面可用於其他TypeScript檔案，你需要顯式匯出它們。在每個型別或介面宣告之前使用export關鍵字。以下是一個擴充套件我們之前的math-library示例的示例：
declare module 'math-library' {
export function add(a: number, b: number): number;
export interface Calculator {
name: string;
add(a: number, b: number): number;
}
}
在更新後的示例中，我們匯出一個名為Calculator的新介面，它具有一個name屬性和一個與我們之前定義的add函式具有相同簽名的add方法。
步驟6：使用環境宣告
環境宣告允許你為沒有TypeScript特定註釋的現有JavaScript程式碼描述型別。它們包含在一個declare global塊中。示例如下：
declare global {
interface Array<T> {
filter(callbackfn: (value: T, index: number, array: T[]) => boolean): T[];
}
}
在上面的示例中，我們聲明瞭一個全域性介面Array<T>來擴充套件內建的Array型別。我們添加了一個新的方法filter並使用一個回撥函式指定它的簽名，該回調函式將值、索引和陣列本身作為引數。
步驟7：引用外部型別定義（可選）
如果你的型別定義檔案依賴於其他外部型別定義檔案，則可以使用/// <reference types="..."/>語法引用它們。例如，如果你的庫依賴於流行庫"lodash"的型別定義，則可以按如下所示包含引用：
/// <reference types="lodash" />
這確保了TypeScript編譯器在編譯程式碼時包含來自"lodash"的型別定義。
步驟8：測試和改進
定義型別定義檔案後，務必使用你的程式碼庫對其進行測試。在你的TypeScript專案中匯入或引入該庫，並使用已定義的型別和介面。如果TypeScript編譯器丟擲任何錯誤，或者庫的行為與已定義的型別不匹配，請返回你的型別定義檔案並相應地改進它。
示例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
結論
建立TypeScript型別定義檔案(.d.ts)允許開發人員利用靜態型別的強大功能，並在使用外部JavaScript庫和模組時增強開發體驗。透過按照分析庫結構、宣告模組、定義型別和介面以及測試和改進型別定義的逐步過程，開發人員可以確保其專案的型別定義準確且全面。有了型別定義檔案，TypeScript可以提供改進的程式碼質量、早期錯誤檢測和增強的可維護性。透過投入時間建立精確的型別定義，開發人員可以在其開發工作流程中充分利用TypeScript的優勢。
4K+ 瀏覽量
