TypeScript - 聯合型別

---

---

TypeScript 使程式能夠組合一個或兩個型別。聯合型別是表達可以是多種型別之一的值的強大方法。使用管道符號 (|) 組合兩個或多個數據型別來表示聯合型別。換句話說，聯合型別寫成用豎線分隔的型別序列。

語法：聯合字面量

我們在 TypeScript 中使用管道符號 (|) 來組合兩種或多種型別以實現聯合型別 -

Type1 | Type2 | Type3 

聯合型別變數

我們可以定義一個不同型別聯合型別的變數。例如，

let value: number | string | boolean;

在上面的示例中，我們定義了一個名為 value 的聯合型別變數。我們可以為該變數分配數字、字串或布林值。

示例：聯合型別變數

在下面的示例中，變數的型別是聯合型別。這意味著變數可以包含數字或字串作為其值。

var val: string | number 
val = 12 
console.log("numeric value of val: "+val) 
val = "This is a string" 
console.log("string value of val: "+val)

編譯後，它將生成以下 JavaScript 程式碼。

var val;
val = 12;
console.log("numeric value of val: " + val);
val = "This is a string";
console.log("string value of val: " + val);

上述示例程式碼的輸出如下 -

numeric value of val: 12 
string value of val: this is a string 

聯合型別和函式引數

我們可以定義一個具有聯合型別引數的函式。當您可以呼叫該函式時，您可以傳遞聯合型別中任何型別的引數。例如，

function display(name: string | string[]){
   // function body;
}

在上面的程式碼片段中，函式 display() 具有聯合型別（字串或字串陣列）的引數。您可以呼叫該函式，傳遞字串或字串陣列作為引數。

示例

在下面的示例中，我們定義了一個名為 disp 的函式，它具有聯合型別引數。

函式 disp() 可以接受字串或字串陣列型別的引數。

function disp(name: string|string[]) { 
   if(typeof name == "string") { 
      console.log(name) 
   } else { 
      var i; 
      
      for(i = 0;i<name.length;i++) { 
         console.log(name[i])
      } 
   } 
} 
disp("mark") 
console.log("Printing names array....") 
disp(["Mark","Tom","Mary","John"])

編譯後，它將生成以下 JavaScript 程式碼。

function disp(name) {
   if (typeof name == "string") {
      console.log(name);
   } else {
      var i;
      for (i = 0; i < name.length; i++) {
         console.log(name[i]);
      }
   }
}

disp("mark");
console.log("Printing names array....");
disp(["Mark", "Tom", "Mary", "John"]);

輸出如下 -

Mark 
Printing names array…. 
Mark 
Tom
Mary
John 

聯合型別和陣列

聯合型別也可以應用於陣列、屬性和介面。以下說明了聯合型別與陣列的用法。

示例

程式宣告一個數組。該陣列可以表示數字集合或字串集合。

var arr: number[]|string[]; 
var i: number; 
arr = [1,2,4] 
console.log("**numeric array**")  

for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}  

arr = ["Mumbai","Pune","Delhi"] 
console.log("**string array**")  

for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
} 

編譯後，它將生成以下 JavaScript 程式碼。

var arr;
var i;
arr = [1, 2, 4];
console.log("**numeric array**");

for (i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}
arr = ["Mumbai", "Pune", "Delhi"];
console.log("**string array**");

for (i = 0; i < arr.length; i++) {
   console.log(arr[i]);
}

輸出如下 -

**numeric array** 
1 
2 
4 
**string array** 
Mumbai 
Pune 
Delhi