TypeScript 中的宣告合併是如何實現的?


簡介

TypeScript 提供強大的功能來增強 JavaScript 開發。宣告合併就是其中一項功能,它允許開發者將同一個實體的多個宣告合併成一個定義。本教程將介紹 TypeScript 中宣告合併的概念,並提供示例來幫助您理解其實際應用。

宣告合併基礎

TypeScript 中的宣告合併使編譯器能夠合併同一個實體(例如介面、函式、類或列舉)的多個宣告。透過合併宣告,您可以擴充套件現有型別並新增新的屬性、方法或功能。

讓我們探索宣告合併在哪些情況下有用,並瞭解與每個場景相關的語法和示例。

語法

interface User {
   var1: string;
   var2: number;
}
interface User {
   var3: string;
}

以上是 TypeScript 中進行宣告合併的語法。我們使用“interface”關鍵字宣告介面,然後再次使用相同的介面名稱來合併它。

示例 1:合併介面

介面定義 TypeScript 中物件的結構。使用宣告合併,您可以使用附加屬性或方法擴充套件現有介面。透過合併 User 介面宣告,我們擴充套件其定義以包含 email 屬性。因此,user 物件可以包含合併介面中定義的所有三個屬性。

在下面的示例中,我們定義了一個具有 name 和 age 屬性的 User 介面。稍後,我們使用另一個宣告合併 User 介面,該宣告添加了一個 email 屬性。生成的合併介面允許我們建立滿足兩組屬性的物件。

interface User {
   name : string;
   age : number;
}
interface User {
   email : string;
}
const user: User = {
   name : "Manta Ray",
   age : 32,
   email : "mantaray@example.com",
};
console.log(user);

編譯後,將生成以下 JavaScript 程式碼:

var user = {
   name: "Manta Ray",
   age: 32,
   email: "mantaray@example.com"
};
console.log(user);

輸出

以上程式碼將產生以下輸出:

{ name: 'Manta Ray', age: 32, email: 'mantaray@example.com' }

示例 2:合併函式

宣告合併不僅限於介面;它也適用於函式。合併函式宣告時,TypeScript 允許您將多個函式簽名組合成一個過載函式。在上面的示例中,我們為 greet 函式定義了兩個函式簽名:一個接受字串引數,另一個接受數字引數。函式的實現包括一個條件語句,以相應地處理每個引數型別。透過合併函式宣告,我們建立了一個可以處理字串和數字引數的過載函式。

function greet(name : string): void;
function greet(age : number): void;
function greet(param: string | number): void {
   if (typeof param === "string") {
      console.log(`Hello, ${param}!`);
   } else if (typeof param === "number") {
      console.log(`You are ${param} years old.`);
   }
}
greet("John");
greet(25); 

編譯後,將生成以下 JavaScript 程式碼:

function greet(param) {
   if (typeof param === "string") {
      console.log("Hello, ".concat(param, "!"));
   }
   else if (typeof param === "number") {
      console.log("You are ".concat(param, " years old."));
   }
}
greet("John");
greet(25);

輸出

以上程式碼將產生以下輸出:

Hello, John!
You are 25 years old.

示例 3:合併名稱空間

TypeScript 中的名稱空間允許開發人員將其程式碼組織成邏輯容器。宣告合併允許合併名稱空間以新增新成員或擴充套件現有成員。在此示例中,我們定義了兩個名稱空間 Utilities,每個名稱空間都包含一個函式。透過合併名稱空間,我們建立了一個包含 formatDate 和 formatTime 函式的單個名稱空間 Utilities。因此,我們可以訪問和使用這兩個函式,而不會發生衝突。

namespace Utilities {
   export function formatDate(date: Date): string {
      return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
   }
}
namespace Utilities {
   export function formatTime(date: Date): string {
      return `${date.getHours()}:${date.getMinutes()}`;
   }
}
const formattedDate = Utilities.formatDate(new Date());
const formattedTime = Utilities.formatTime(new Date());
console.log(formattedDate);
console.log(formattedTime);

編譯後,將生成以下 JavaScript 程式碼:

var Utilities;
(function (Utilities) {
   function formatDate(date) {
      return "".concat(date.getDate(), "/").concat(date.getMonth() + 1, "/").concat(date.getFullYear());
   }
   Utilities.formatDate = formatDate;
})(Utilities || (Utilities = {}));
(function (Utilities) {
   function formatTime(date) {
      return "".concat(date.getHours(), ":").concat(date.getMinutes());
   }
   Utilities.formatTime = formatTime;
})(Utilities || (Utilities = {}));
var formattedDate = Utilities.formatDate(new Date());
var formattedTime = Utilities.formatTime(new Date());
console.log(formattedDate);
console.log(formattedTime);

輸出

以上程式碼將產生以下輸出:

31/5/2023
17:44

示例 4:合併列舉

列舉提供了一種定義一組命名常量的方法。宣告合併允許我們使用附加值擴充套件現有列舉。在此示例中,我們定義了一個具有兩個值 Red 和 Green 的列舉 Colors。稍後,我們使用附加值 Blue 合併 Colors 列舉。生成的合併列舉允許我們使用所有三個值,並且我們可以將列舉值分配和儲存為變數或陣列中的值。

enum Colors {
   Red = "RED",
   Green = "GREEN",
}

enum Colors {
   Blue = "BLUE",
}

const favoriteColor: Colors = Colors.Green;
const allColors: Colors[] = [Colors.Red, Colors.Green, Colors.Blue];
console.log(favoriteColor);
console.log(allColors);

編譯後,將生成以下 JavaScript 程式碼:

var Colors;
(function (Colors) {
   Colors["Red"] = "RED";
   Colors["Green"] = "GREEN";
})(Colors || (Colors = {}));
(function (Colors) {
   Colors["Blue"] = "BLUE";
})(Colors || (Colors = {}));
var favoriteColor = Colors.Green;
var allColors = [Colors.Red, Colors.Green, Colors.Blue];
console.log(favoriteColor);
console.log(allColors);

輸出

以上程式碼將產生以下輸出:

GREEN
[ 'RED', 'GREEN', 'BLUE' ]

結論

TypeScript 中的宣告合併是一項強大的功能,它增強了程式碼組織和可擴充套件性。透過合併宣告,您可以無縫地擴充套件現有型別、介面、函式、名稱空間或列舉,而不會發生衝突。本教程介紹了宣告合併的概念,並提供了合併介面、函式、名稱空間和列舉的示例。請記住謹慎使用此功能,保持程式碼可讀性並避免歧義。

更新於:2023年8月21日

736 次瀏覽

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.