TypeScript - 联合类型

TypeScript 赋予程序将一种或两种类型组合起来的能力。联合类型是一种强大的方式，用于表达可以是几种类型之一的值。使用管道符号 (|) 组合两种或多种数据类型来表示联合类型。换句话说，联合类型由用竖线分隔的类型序列构成。

语法：联合字面量

我们使用管道符号 (|) 来组合两种或多种类型，从而在 TypeScript 中实现联合类型 −

Type1 | Type2 | Type3 

联合类型变量

我们可以定义不同类型联合的变量类型。例如，

let value: number | string | boolean;

在上面的例子中，我们定义了一个名为 value 的联合类型变量。我们可以为该变量赋值 number、string 或 boolean 值。

示例：联合类型变量

在下面的示例中，变量的类型是联合类型。这意味着该变量的值可以是 number 或 string。

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() 的参数是联合类型（string 或 string 数组）。你可以传递 string 或 string 数组来调用该函数。

示例

在下面的示例中，我们定义了一个名为 disp 的函数，其参数为联合类型。

函数 disp() 可以接受 string 类型或 string 数组类型的参数。

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