Typescript union type

Joint type

Joint type （Union Types） You can go through the pipes (|) Set variables to multiple types , The assignment can be made according to the type of setting .

grammar ：

Type1|Type2|Type3 

example ：

let res: string|number 
res = 12 
console.log(" The number is : "+ res) 
res = "abcdefg" 
console.log(" String is : " + res)

Translate it into js：

var res;
res = 12;
console.log(" The number is : " + res);
res = "abcdefg";
console.log(" String is : " + res);

If you assign other types, an error will be reported ：

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

You can also use union types as function parameters ：

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

Translate it into 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

Union type array

You can declare an array as a union type .

example ：

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

Translate it into 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