TypeScript中的联合类型和类型保护联合类型和类型保护

93 阅读 0 评论 62 点赞

我是靠谱客的博主欣喜手机，这篇文章主要介绍TypeScript中的联合类型和类型保护联合类型和类型保护，现在分享给大家，希望可以做个参考。

联合类型和类型保护

1.联合类型

当我们的一个方法可以接受多种类型的参数（parameter），那么此时就要用到联合类型。

复制代码

1
2
3
4
5
6
7
8
9
10
class Student {
name: string;
jiaozuoye() { };
}
class Teacher {
name: string;
gaizuoye() { };
}
function f(parameter: Student | Teacher) { }

2.类型保护

不过随着联合类型而来的还有一个问题，假如Student和Teacher中有两个不同的方法，不同类型的参数又怎么确定是否有继承该类型的特殊方法呢？为了解决这个问题，我们引入了类型保护的概念。

as语法

as又叫类型断言，as相当于是人为的判断，比如一个人的名字（name属性）就叫“学生”，那么我们判断他就是学生，让他能够调用学生的方法jiaozuoye()，具体操作如下。

复制代码

1
2
3
4
5
6
function f(parameter: Student | Teacher) {
if(parameter.name == "学生"){
(parameter as Student).jiaozuoye();
}
}

in语法

in语法比较好理解，比如我们的Student和Teacher中的区别就在于方法交作业和改作业的不同，如果参数有交作业的功能，那我们就判断他为Student，反之就判断他为Teacher，此时可以用in语法。

复制代码

1
2
3
4
5
6
7
8
function f(parameter: Student | Teacher) {
if("jiaozuoye" in parameter){
parameter.jiaozuoye();
}else{
parameter.gaizuoye();
}
}

typeof语法

上面我们举的例子中参数都是自定义的类型，那么对于普通类型我们的类型保护策略是什么呢？举一个新的例子

复制代码

1
2
3
4
5
6
7
8
9
function f(parameter1: string | number, parameter2: string | number) {
//使用typeof进行类型判断
if (typeof parameter1 === "string" || typeof parameter2 === "string") {
//字符串拼接
return `${first}${second}`;
}
return first + second;
}

instanceof语法

instanceof和typeof语法很像，但是instanceof只能用在类class的保护上。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
// 我们先定义一个类，作为我们类型保护的基础
class NumberObj {
count: number;
}
// 实现一个相加的方法
function f(first: object | NumberObj, second: object | NumberObj) {
// 运用instanceof语句对类型进行判断
if (first instanceof NumberObj && second instanceof NumberObj) {
return first.count + second.count;
}
return 0;
}