浅谈打印稿的类型保护机制 - 行业资讯 - 肥雀云

在编写TS时,它做了比我们看到的更多的事情,例如类型保护机制。让我们编写的代码更加严谨,至于怎么回的事,让我们来看看吧。
　　

由于这些机制的存在,就算你仍旧以JS原生的书写方式,也能帮助你提前发现代码中潜在的问题。(对于认为TS语句更复杂的人,也能实现0门槛,不改变已有的习惯也能享受静态检测的好处)。

类型保护就是一些表达式,它们会在运行时检查以确保在某个作用域内的类型。

为了更简单的理解,我们首先声明一个联合类型用于举例:
　　

　　　　　　接口鸟{ 　　飞():任何; 　　假设():任何; 　　} 　　　　接口鱼{ 　　游泳(): 　　假设(): 　　} 　　　　类型的宠物=鸟|鱼; 　　　　之前　　　　

　　　　　　函数fn(宠物:宠物){ 　　pet.layEggs ();//好吧　　pet.swim ();//错误:财产'游泳'不存在> 　　函数fn(宠物:鱼|鸟){ 　　如果((& lt; Fish> pet) .swim) { 　　(& lt; Fish> pet) .swim (); 　　其他}{ 　　(& lt; Bird> pet) .fly (); 　　} 　　} 　　之前　　　　

虽然这样的断言满足了我们的需求,但并不好方便,需要在各处都进行引用。
　　备注:如果在编写tsx时,你需要将(& lt; Fish> pet)写成(宠物鱼),因为在tsx中尖括号& lt;比;有特殊的含义。
　　

我们将上面的如果内的判断封装到函数中,获得更方便的类型保护方式,此函数必须使用parameterName是类型的类型谓语:
　　

　　　　　　函数isFish(宠物:鱼鸟|):宠物鱼{ 　　返回! ! (& lt; Fish>宠物).swim; 　　} 　　之前　　　　

此函数必须返回为布尔类型才生效,当返回真实时则类型定位为鱼,返回假时则定位为鱼之外的类型(多个类型则以联合类型定位)。
　　

　　　　　　函数fn(宠物:鱼|鸟){ 　　如果(isFish (pet)) { 　　pet.swim ();//因语句的生效,此语句块中类型让宠物:鱼　　其他}{ 　　pet.fly ();//排除鱼之外的类型,此语句块中类型让宠物:鸟　　} 　　} 　　之前　　　　

需要注意是除了如果中类型生效,TS还能自动推断出中其他的类型。

就算你不使用TS这些特定的语句,也能享受类型保护机制的好处,下面让我们来看看。

如果子类型是只是数、字符串、布尔值、象征这几种数据类型,则可以直接使用typeof关键字,TS能够检测并提供类型保护,我们直接引用官方给的例子:
　　

　　　　　　字符串填充函数padLeft(值):{ 　　如果(typeof填充===笆俊?{ 　　返回数组(填充+ 1). join(" ") +价值;//让填充:号码　　} 　　其他{ 　　返回填充+值;//让填充:字符串　　} 　　} 　　　　const t1=padLeft(“世界”,6);//笆澜纭? 　　const t2=padLeft(“世界”、“你好”);//癶ello world” 　　之前　　　　

由于现在前端对于面向对象的开发项目越来越多,因此类的引用也更多了。那么类型保护用在此时,可谓是更加有重要,我们使用instanceof来达到这一效果:
　　

　　　　　　接口IA {x():空白;} 　　接口IB {y():空白;} 　　　　类实现了IA { 　　x () {} 　　} 　　B类实现了IB { 　　y () {} 　　} 　　　　函数fn (e: | B) { 　　如果(e instanceof) 　　e.x ();//让e: A 　　其他的　　e.y ();//让e: 　　} 　　　　之前　　　　

基于类型保护机制,在语句块中编辑器会给予指定类型的方法提示,以及类型检测时会提示用户。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。