开心档-软件开发入门之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


相关文章
|
2月前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
17 3
|
3月前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
65 0
|
8天前
|
JavaScript 前端开发 编译器
TypeScript中的高级类型:联合类型、交叉类型与条件类型深入解析
【4月更文挑战第23天】探索TypeScript的高级类型。这些特性增强类型系统的灵活性,提升代码质量和维护性。
|
14天前
|
JavaScript
vite+typescript从入门到实战(三)
vite+typescript从入门到实战
31 0
|
14天前
|
JavaScript
vite+typescript从入门到实战(二)
vite+typescript从入门到实战
39 0
|
14天前
|
JavaScript 前端开发
vite+typescript从入门到实战(一)
vite+typescript从入门到实战
64 0
|
21天前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
30 4
|
2月前
|
JavaScript 安全
TypeScript 中的高级类型转换技术:映射类型、条件类型和类型推断
TypeScript 中的高级类型转换技术:映射类型、条件类型和类型推断
|
2月前
react+typescript给state和props定义指定类型
react+typescript给state和props定义指定类型
16 1
|
3月前
|
存储 JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
43 0