浅谈TypeScript的类型保护机制
在编写TS时，它做了比我们看到的更多的事情，例如类型保护机制。让我们编写的代码更加严谨，至于怎么回事，让我们来看看吧。
由于这些机制的存在，就算你仍旧以JS原生的书写方式，也能帮助你提前发现代码中潜在的问题。（对于认为TS语句更复杂的人，也能实现0门槛，不改变已有的习惯也能享受静态检测的好处。）
类型保护就是一些表达式，它们会在运行时检查以确保在某个作用域内的类型。
为了更简单的理解，我们首先声明一个联合类型用于举例：
interfaceBird{
fly():any;
layEggs():any;
}
interfaceFish{
swim():any
layEggs():any
}
typePet=Bird|Fish;
无类型保护时报错
functionfn(pet:Pet){
pet.layEggs();//okay
pet.swim();//Error:Property'swim'doesnotexistontype'Bird|Fish'.
}
因为TS并不知道pet的实例是Bird还是Fish，因此为了谨慎起见，在未手动声明类型时TS中只能调用联合类型中的公共方法，例子中未layEggs()方法。除非你在调用指定对象数据的属性或方法前，明确告诉TS数据对象是一个具体的类型。
类型断言实现类型保护
我需要使用
functionfn(pet:Fish|Bird){
if((pet).swim){
(pet).swim();
}else{
(pet).fly();
}
}
虽然这样的断言满足了我们的需求，但并不好方便，需要在各处都进行引用。
备注：如果在编写tsx时，你需要将(
函数中使用is定位类型
我们将上面的if内的判断封装到函数中，获得更方便的类型保护方式，此函数必须使用parameterNameisType的类型谓语：
functionisFish(pet:Fish|Bird):petisFish{ return!!( pet).swim; }
此函数必须返回为boolean类型才生效，当返回true时则类型定位为Fish，返回false时则定位为Fish之外的类型（多个类型则以联合类型定位）。
functionfn(pet:Fish|Bird){
if(isFish(pet)){
pet.swim();//因is语句的生效，此语句块中类型letpet:Fish
}else{
pet.fly();//排除Fish之外的类型，此语句块中类型letpet:Bird
}
}
需要注意是除了if中类型生效，TS还能自动推断出else中的类型。
就算你不使用TS这些特定的语句，也能享受类型保护机制的好处，下面让我们来看看。
使用typeof进行类型保护
如果子类型是只是number、string、boolean、symbol这几种数据类型，则可以直接使用typeof关键字，TS能够检测并提供类型保护，我们直接引用官方给的例子：
functionpadLeft(value,padding):string{
if(typeofpadding==="number"){
returnArray(padding+1).join("")+value;//letpadding:number
}
else{
returnpadding+value;//letpadding:string
}
}
constt1=padLeft("world",6);//"world"
constt2=padLeft("world","hello");//"helloworld"
使用instanceof进行类型保护
由于现在前端对于面向对象的开发项目越来越多，因此类的引用也更多了。那么类型保护用在此时，可谓是更加有重要，我们使用instanceof来达到这一效果：
interfaceIA{x():void;}
interfaceIB{y():void;}
classAimplementsIA{
x(){}
}
classBimplementsIB{
y(){}
}
functionfn(e:A|B){
if(einstanceofA)
e.x();//lete:A
else
e.y();//lete:
}
基于类型保护机制，在语句块中编辑器会给予指定类型的方法提示，以及类型检测时会提示用户。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。