蝙蝠岛资源网

浅谈TypeScript的类型保护机制
网络编程 2024/12/23 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

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

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

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

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

interface Bird {
 fly(): any;
 layEggs(): any;
}

interface Fish {
 swim(): any
 layEggs(): any
}

type Pet = Bird | Fish;

无类型保护时报错

function fn(pet: Pet) { 
 pet.layEggs(); // okay
 pet.swim();  // Error: Property 'swim' does not exist on type 'Bird | Fish'.
}

因为 TS 并不知道 pet 的实例是 Bird 还是 Fish，因此为了谨慎起见，在未手动声明类型时 TS 中只能调用 联合类型 中的 公共方法，例子中未 layEggs() 方法。除非你在调用指定对象数据的属性或方法前，明确告诉 TS 数据对象是一个具体的类型。

类型断言实现类型保护

我需要使用 <Fish>pet 的 类型断言，来告诉 TS 目标对象是什么类型：

function fn(pet: Fish | Bird) {
 if ((<Fish>pet).swim) {
  (<Fish>pet).swim();
 } else {
  (<Bird>pet).fly();
 }
}

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

函数中使用 is 定位类型

我们将上面的 if 内的判断封装到函数中，获得更方便的类型保护方式，此函数必须使用 parameterName is Type 的 类型谓语：

function isFish<T>(pet: Fish | Bird): pet is Fish {
 return !!(<Fish>pet).swim;
}

此函数必须返回为 boolean 类型才生效，当返回 true 时则类型定位为 Fish ，返回 false 时则定位为 Fish 之外的类型（多个类型则以 联合类型 定位）。

function fn(pet: Fish | Bird ) { 
 if (isFish(pet)) {
  pet.swim(); // 因 is 语句的生效，此语句块中类型 let pet: Fish
 } else {
  pet.fly(); // 排除 Fish 之外的类型，此语句块中类型 let pet: Bird
 }
}

需要注意是除了 if 中类型生效，TS 还能自动推断出 else 中的类型。

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

使用 typeof 进行类型保护

如果子类型是只是 number、string、boolean、symbol 这几种数据类型，则可以直接使用 typeof 关键字，TS 能够检测并提供类型保护，我们直接引用官方给的例子：

function padLeft(value, padding): string {
  if (typeof padding === "number") {
    return Array(padding + 1).join(" ") + value;  // let padding: number
  }
  else {
    return padding + value;  // let padding: string
  }
}
  
const t1 = padLeft("world", 6);    // "   world"
const t2 = padLeft("world", "hello "); // "hello world"

使用 instanceof 进行类型保护

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

interface IA { x(): void; }
interface IB { y(): void; }

class A implements IA {
 x() { }
}
class B implements IB {
 y() { }
}

function fn(e: A | B) {
 if (e instanceof A)
  e.x(); // let e: A
 else
  e.y(); // let e: 
}

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

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

标签：
TypeScript,类型保护机制,TypeScript,类型保护
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“浅谈TypeScript的类型保护机制”

暂无浅谈TypeScript的类型保护机制的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com