TypeScript 教程
1. TypeScript 教程 2. TypeScript 安装 3. TypeScript 基础语法 4. TypeScript 基础类型 5. TypeScript 变量声明 6. TypeScript 条件语句 7. TypeScript 循环 8. TypeScript Number 9. TypeScript String(字符串) 10. TypeScript Array(数组) 11. TypeScript 元组 12. TypeScript 联合类型 13. TypeScript 接口 14. TypeScript 对象 15. TypeScript 命名空间 16. TypeScript 模块 17. TypeScript 声明文件

TypeScript 联合类型

TypeScript 联合类型

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

注意:只能赋值指定的类型,如果赋值其它类型就会报错。

创建联合类型的语法格式如下:

Type1|Type2|Type3 

实例

声明一个联合类型:

TypeScript

var val:string|number val = 12 console.log("数字为 "+ val) val = "" console.log("字符串为 " + val)

编译以上代码,得到以下 JavaScript 代码:

JavaScript

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

输出结果为:

数字为 12

字符串为 

如果赋值其它类型就会报错:

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("") console.log("输出数组....") disp(["","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(""); console.log("输出数组...."); disp(["", "Google", "Taobao", "Facebook"]);

输出结果为:


输出数组....



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 = ["","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 = ["", "Google", "Taobao"]; console.log("**字符串数组**"); for (i = 0; i < arr.length; i++) { console.log(arr[i]); }

输出结果为:

**数字数组**

1

2

4

**字符串数组**



Google

Taobao