开心档-软件开发入门之TypeScript 联合类型

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

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


相关文章
|
9天前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
25 1
typeScript进阶(9)_type类型别名
|
9天前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
23 1
|
9天前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
20 0
|
9天前
|
JavaScript
typeScript进阶(10)_字符串字面量类型
本文介绍了TypeScript中的字符串字面量类型,这种类型用来限制变量只能是某些特定的字符串字面量。通过使用`type`关键字声明,可以确保变量的值限定在预定义的字符串字面量集合中。文章通过示例代码展示了如何声明和使用字符串字面量类型,并说明了它在函数默认参数中的应用。
21 0
|
9天前
|
JavaScript
typeScript基础(4)_联合类型
本文介绍了TypeScript中的联合类型(Union Types),它表示变量可以是多种类型中的一种。文章通过示例展示了如何声明联合类型以及在使用联合类型时访问它们共有的属性和方法。同时,还解释了类型推论在联合类型变量赋值时的工作原理。
20 0
|
9天前
|
JavaScript 前端开发
typeScript基础(8)_ts类型断言
本文介绍了TypeScript中的类型断言,它用于在编译时告诉TypeScript某个对象具有特定的类型,即使它看起来不具备。类型断言可以用来访问一个类型上存在而另一个类型上不存在的属性或方法。需要注意的是,类型断言并不会在运行时改变JavaScript的行为,因此如果断言不当,运行时仍然可能出错。文章还提醒避免将类型断言为`any`类型或进行多重断言。
12 1
|
9天前
|
JavaScript
typeScript基础(6)_数组类型
本文介绍了TypeScript中数组的类型表示方法,包括直接使用类型加`[]`定义数组类型,以及使用数组泛型`Array<类型>`定义数组。同时,还展示了如何定义包含多种数据类型的数组。
20 1
|
6天前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
9天前
|
JavaScript
typeScript基础(7)_函数的类型
本文介绍了TypeScript中函数的类型,包括函数声明与函数表达式的类型注解,如何定义函数的参数类型、返回类型,以及可选参数和参数默认值。还探讨了函数的剩余参数、如何使用接口定义函数的形状,以及函数重载的概念和实践。
10 0
|
9天前
|
JavaScript
typeScript基础(2)_any任意值类型和类型推论
本文介绍了TypeScript中的`any`任意值类型,它可以赋值为其他任何类型。同时,文章还解释了TypeScript中的类型推论机制,即在没有明确指定类型时,TypeScript如何根据变量的初始赋值来推断其类型。如果变量初始化时未指定类型,将被推断为`any`类型,从而允许赋予任何类型的值。
25 4
下一篇
无影云桌面