TypeScript 联合类型

联合类型

联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

语法：

Type1|Type2|Type3 

实例：

let res: string|number 
res = 12 
console.log("数字为: "+ res) 
res = "abcdefg" 
console.log("字符串为: " + res)

编译成 js：

var res;
res = 12;
console.log("数字为: " + res);
res = "abcdefg";
console.log("字符串为: " + res);

如果赋值其他类型会报错：

script.ts(6,1): error TS2322: Type 'true' is not assignable to type 'string | number'.

也可以讲联合类型作为函数参数使用：

function show(str:string|string[]) {
     
     if(typeof str == "string") {
     
          console.log(str) 
     } else {
     
          var i; 
          for(i = 0;i<str.length;i++) {
     
             console.log(str[i])
          } 
     } 
} 
show("string") // string
show(["abc","def","efg","hij"])
// abc
// def
// efg
// hij

编译成js：

function show(str) {
    
    if (typeof str == "string") {
    
        console.log(str);
    }
    else {
    
        var i;
        for (i = 0; i < str.length; i++) {
    
            console.log(str[i]);
        }
    }
}
show("string"); // string
show(["abc", "def", "efg", "hij"]);
// abc
// def
// efg
// hij

联合类型数组

可以将数组声明为联合类型。

实例：

let arr:number[]|string[]
let i:number
arr = ["abc","def","efg","hij"]
for (let item of arr){
    
  console.log(item)
}
// abc
// def
// efg
// hij
arr = [1, 2, 3, 4]
for (let item of arr){
    
  console.log(item)
}
// 1
// 2
// 3
// 4

编译成js：

var arr;
var i;
arr = ["abc", "def", "efg", "hij"];
for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
    
    var item = arr_1[_i];
    console.log(item);
}
// abc
// def
// efg
// hij
arr = [1, 2, 3, 4];
for (var _a = 0, arr_2 = arr; _a < arr_2.length; _a++) {
    
    var item = arr_2[_a];
    console.log(item);
}
// 1
// 2
// 3
// 4