1. 程式人生 > 實用技巧 >Runoob-TypeScript:TypeScript 聯合型別

Runoob-TypeScript:TypeScript 聯合型別

ylbtech-Runoob-TypeScript:TypeScript 聯合型別

1.返回頂部
1、

TypeScript 聯合型別

聯合型別(Union Types)可以通過管道(|)將變數設定多種型別賦值時可以根據設定的型別來賦值。

注意:只能賦值指定的型別,如果賦值其它型別就會報錯。

建立聯合型別的語法格式如下:

Type1|Type2|Type3

例項

宣告一個聯合型別:

TypeScript

var val:string|number 
val = 12 
console.log("數字為 "+ val) 
val = "Runoob" 
console.log(
"字串為 " + val)

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

var val;
val = 12;
console.log("數字為 " + val);
val = "Runoob";
console.log("字串為 " + val);

輸出結果為:

數字為 12
字串為 Runoob

如果賦值其它型別就會報錯:

var val:string|number 
val = true

也可以將聯合型別作為函式引數使用:

TypeScript

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("Runoob") console.log("輸出陣列....") disp(["Runoob","Google","Taobao
","Facebook"])

編譯以上程式碼,得到以下 JavaScript 程式碼:

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("Runoob");
console.log("輸出陣列....");
disp(["Runoob", "Google", "Taobao", "Facebook"]);

輸出結果為:

Runoob
輸出陣列....
Runoob
Google
Taobao
Facebook

聯合型別陣列

我們也可以將陣列宣告為聯合型別:

TypeScript

var arr:number[]|string[]; 
var i:number; 
arr = [1,2,4] 
console.log("**數字陣列**")  
 
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}  
 
arr = ["Runoob","Google","Taobao"] 
console.log("**字串陣列**")  
 
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}

編譯以上程式碼,得到以下 JavaScript 程式碼:

JavaScript

var arr;
var i;
arr = [1, 2, 4];
console.log("**數字陣列**");
for (i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
arr = ["Runoob", "Google", "Taobao"];
console.log("**字串陣列**");
for (i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

輸出結果為:

**數字陣列**
1
2
4
**字串陣列**
Runoob
Google
Taobao
2、
2.返回頂部
3.返回頂部
4.返回頂部
5.返回頂部
1、 https://www.runoob.com/typescript/ts-union.html 2、
6.返回頂部
作者:ylbtech
出處:http://ylbtech.cnblogs.com/
本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連線,否則保留追究法律責任的權利。