详解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中链式调用之研习
Apr 07 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
利用js canvas实现五子棋游戏
Oct 11 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
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
判断js的Array和Object的实现方法
2016/08/29 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
pycharm 使用心得(三)Hello world!
2014/06/05 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
建筑专业毕业生推荐信
2013/11/21 职场文书
技术人员面试提纲
2013/11/28 职场文书
民事和解协议书格式
2014/11/29 职场文书
幸福来敲门观后感
2015/06/04 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
2016年元旦寄语
2015/08/17 职场文书
Win11软件图标固定到任务栏
2022/04/19 数码科技
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android