重拾Typescript之联合类型和类型断言
theme: scrolls-light highlight: atelier-dune-light
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
1.联合类型：
顾名思义，联合类型就是多个类型的合并类型，借此来提供更加丰富的类型规范定义
```typescript interface Bird{ fly:Boolean; sing:()=>{}; }
interface Dog{ fly:Boolean; bark:()=>{}; }
function trainAnial(animal:Bird | Dog){ animal. } ```
如下图：
上图代码里的animal.的代码提示之后会出现fly，而不会出现sing和bark方法的提示，因为联合类型只会显示联合类型共同都有的属性或者方法
那么问题来了？依然是上面的例子，如果我想要调用Brid的sing或者Dog的bark方法该如何处理呢？
----类型断言
2.类型保护：
2.1 类型断言:
类型断言就好比特别的古董鉴定人员(这个人也可能打眼是骗子)，告诉你这个东西真的是好东西，大胆淦。
ts的类型断言就像是一种类型转换，他把某个值强行指定为特定类型，使用后可以告诉编译器把某个值当成某个类型。
下面的例子就是通过类型断言的方式来使用sing或者bark方法
typescript
function trainAnial(animal:Bird | Dog){
// 通过类型断言的方式来告诉ts他是Bird或者是Dog
if(animal.fly){
(animal as Bird).sing();
}else{
(animal as Dog).bark();
}
}
2.2 类型保护-in：
上面的例子也可以使用in来告诉编译器，是否有某某某方法或者属性
typescript
function trainAnialOther(animal:Bird | Dog){
//判断animal中是否有sing方法
if('sing' in animal){
animal.sing();
}else{
animal.bark();
}
}
2.3 类型保护-typeof：
这种方式是通过typeof来确定类型，然后再根据确定下来的类型做后续处理。
先来看一个例子:
typescript
//这种情况会提示飘红
function add(first:string|number,second:string|number){
return first + second;
}
上面这种情况是飘红的，因为编译器不能同时确定first和second的类型
通过typeof来判断类型:
- 如果
first和second中有一个是string类型就使用模板字符串的方式返回 - 如果
first和second中没没有string类型就直接返回first + second
typescript
function addSolution(first:string|number,second:string|number){
if(typeof first === 'string' || typeof second === 'string'){
return `${first}${second}`
}
return first + second;
}
2.4 类型保护-instanceof：
使用instance of来做类型保护(注意只有'类'才可以使用instanceof来做类型保护，interface不可以)
typescript
class NumberObj {
count:number
}
function addSecond(first:object | NumberObj,second:object | NumberObj){
if(first instanceof NumberObj && second instanceof NumberObj){
return first.count + second.count;
}
return 0;
}