DDR爱好者之家

浅谈TypeScript的类型保护机制
站长资源 2024/11/24 佚名
25 1538
DDR爱好者之家 Design By 杰米

在编写 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: 
}

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

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米