详解TypeScript中的类型保护


Posted in Javascript onApril 29, 2021

概述

在 TypeScript 中使用联合类型时,往往会碰到这种尴尬的情况:

interface Bird {
  	// 独有方法
    fly();
  	// 共有方法
    layEggs();
}

interface Fish {
  	// 独有方法
    swim();
  	// 共有方法
    layEggs();
}

function getSmallPet(): Fish | Bird {
    // ...
}

let pet = getSmallPet();
pet.layEggs(); // 正常
pet.swim();    // ts 报错

如上所示,getSmallPet函数中,既可以返回 Fish 类型的对象,又可以返回 Bird 类型的对象。由于返回的对象类型不确定,所以使用联合类型对象共有的方法时,一切正常,但是使用联合类型对象各自独有的方法时,ts 会报错。

那么如何解决这个问题呢?最粗暴的方法当然是将联合类型转换为 any,不过这种方法不值得提倡,毕竟我们写的是 TypeScript 而不是 AnyScript。

此时,我们使用今天的主角——类型保护,闪亮登场,它可以完美的解决这个问题。

孔乙己说过,茴香豆有四种写法,同理,实现类型保护,也有四种写法。

类型断言

类型断言是最常用的一种类型保护方法,即直接指定类型。由于,TypeScript 中识别的类型大多是靠 TypeScript 的自动类型推算算出来的,所以会出现上面所说的那种问题,即 TypeScript 不知道具体对象类型是什么,所以不确定有没有联合类型各自独有的方法。

当使用类型断言直接指定类型时,相当于你让 TypeScript 开启了上帝模式,可以直接知道具体类型是联合类型中的那个,此时再使用对象的独有方法就符合 TypeScript 的推断了。

interface Bird {
  // 独有方法
  fly();
  // 共有方法
  layEggs();
}

interface Fish {
  // 独有方法
  swim();
  // 共有方法
  layEggs();
}

function getSmallPet(): Fish | Bird {
  // ...
}

let pet = getSmallPet();
pet.layEggs(); // 正常
// 通过鸭子类型来进行判断
if ((pet as Bird).fly) {
  // 类型断言
  (pet as Bird).fly()
} else {
  // 类型断言
  (pet as Fish).swim()
}

如果嫌弃通过 as 来进行类型断言不够上流,还可以使用类泛型的写法,即:

let pet = getSmallPet();
pet.layEggs(); // 正常
// 通过鸭子类型来进行判断
if ((<Bird>pet).fly) {
  (<Bird>pet).fly()
} else {
  (<Fish>pet).swim()
}

tips:友情提示,虽然使用类泛型写法进行类型断言看起来高端一些,但是由于在 tsx 中语法存在歧义,所以为了统一起见,推荐使用 as 的方法进行类型断言。

in语法

在js中,我们经常使用 in 语法来判断指定的属性是否在指定的对象或其原型链中。

同理,在 TypeScript 中,我们可以通过这种方法确认对象类型。

interface Bird {
  // 独有方法
  fly();
  // 共有方法
  layEggs();
}

interface Fish {
  // 独有方法
  swim();
  // 共有方法
  layEggs();
}

function getSmallPet(): Fish | Bird {
  // ...
}

let pet = getSmallPet();
pet.layEggs(); // 正常
// 使用 in 语法进行类型保护
if ('fly' in pet) {
  pet.fly()
} else {
  pet.swim()
}

原理同类型断言一样,都是引导 TypeScript 的类型推断,确定对象类型。

instanceof 语法

当联合类型中使用的是 class 而不是 interface 时,instanceof 语法就派上用场了,通过 instanceof 语法可以区分不同的 class 类型。

class Bird {
  // 独有方法
  fly() {};
  // 共有方法
  layEggs() {};
}

class Fish {
  // 独有方法
  swim() {};
  // 共有方法
  layEggs() {};
}

function getSmallPet(): Fish | Bird {
  // ...
}

let pet = getSmallPet();
pet.layEggs(); // 正常
// 使用 in 语法进行
if (pet instanceof Bird) {
  pet.fly()
} else {
  pet.swim()
}

typeof 语法

typeof 语法不同于 in 语法以及 instanceof 语法,in 语法以及 instanceof 语法都是用来引导类型推断进行不同对象类型推断,而 typeof 语法常用于基本类型的推断(或者是联合使用基本类型和对象类型)。

简而言之,当使用 typeof 能够区分联合类型中的不同类型时,即可使用它。

function getSmallPet(): number | string {
  // ...
}

let pet = getSmallPet();
if (typeof pet === 'number') {
  pet++
} else {
  pet = Number(pet) + 1
}

总结

就如茴香豆的四种写法的本质依然是茴香豆一样,类型保护的四种写法的本质也是一样的,即,引导 TypeScript 中的类型推断将类型推断的多选题变为单选题,这就是类型保护的本质。

以上就是详解TypeScript中的类型保护的详细内容,更多关于TypeScript类型保护的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript加强之自定义callback示例
Sep 21 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
7个你应该知道的JS原生错误类型
Apr 29 #Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
如何使用JavaScript策略模式校验表单
Apr 29 #Javascript
react中props 的使用及进行限制的方法
Apr 28 #Javascript
React Hook用法示例详解(6个常见hook)
vue使用v-model进行跨组件绑定的基本实现方法
为什么node.js不适合大型项目
You might like
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
Prototype String对象 学习
2009/07/19 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python正则简单实例分析
2017/03/21 Python
Python冲顶大会 快来答题!
2018/01/17 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
使用K.function()调试keras操作
2020/06/17 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
什么是唯一索引
2015/07/05 面试题
初中新生军训方案
2014/05/13 职场文书
社区禁毒工作方案
2014/06/02 职场文书
争先创优公开承诺书
2014/08/30 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
2014年话务员工作总结
2014/11/19 职场文书
创先争优承诺书
2015/01/20 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
Golang 链表的学习和使用
2022/04/19 Golang