详解TypeScript中的类型保护

概述

在 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类型保护的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • TypeScript魔法堂之枚举的超实用手册

    前言 也许前端的同学会问JavaScript从诞生至今都没有枚举类型,我们不是都活得挺好的吗?为什么TypeScript需要引入枚举类型呢? 也许被迫写前端的后端同学会问,TypeScript的枚举类型是和Java/.NET的一样吗? 下面我们来一起探讨和尝试解答吧! 前端一直都需要枚举 我敢保证,前端的同学都会万分肯定地告诉大家:我们从来没有写过枚举.那是因为虽然ECMAScript将enum作为保留字,但至ES2020为止还没有提出枚举的实现规范.语言没有提供规范和语言实现,不代表思想活跃勇

  • 使用typescript快速开发一个cli的实现示例

    使用typescript快速开发一个cli的实现示例

    cli 的全称 command-line interface(命令行界面),也就是前端同学常用的脚手架,比如 yo.vue cli.react cli 等. cli 可以方便我们快速创建项目,下图是引用 vue cli 的介绍: 创建项目 运行下面的命令,创建一个项目: npm init 执行命令完成后,可以看到项目根目录只有一个 package.json 文件. 在 package.json 文件增加 bin 对象,并指定入口文件 dist/index.js. 在命令行运行需要在入口文件的第一

  • 浅谈TypeScript的类型保护机制

    在编写 TS 时,它做了比我们看到的更多的事情,例如类型保护机制.让我们编写的代码更加严谨,至于怎么回事,让我们来看看吧. 由于这些机制的存在,就算你仍旧以 JS 原生的书写方式,也能帮助你提前发现代码中潜在的问题.(对于认为 TS 语句更复杂的人,也能实现 0 门槛,不改变已有的习惯也能享受静态检测的好处.) 类型保护就是一些表达式,它们会在运行时检查以确保在某个作用域内的类型. 为了更简单的理解,我们首先声明一个联合类型用于举例: interface Bird { fly(): any; l

  • 你不知道的 TypeScript 高级类型(小结)

    前言 对于有 JavaScript 基础的同学来说,入门 TypeScript 其实很容易,只需要简单掌握其基础的类型系统就可以逐步将 JS 应用过渡到 TS 应用. // js const double = (num) => 2 * num // ts const double = (num: number): number => 2 * num 然而,当应用越来越复杂,我们很容易把一些变量设置为 any 类型,TypeScript 写着写着也就成了 AnyScript.为了让大家能更加深入

  • 使用Typescript开发微信小程序的步骤详解

    使用Typescript开发微信小程序的步骤详解

    Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/).今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Typescript. 这个分两种情况,最简单的做法就是在创建项目时,选择Typescript这个选项,如下图所示.但要注意,这个选项只有在选择"Use no cloud service"才有,而另外一种Mini Program Cloud Base则不支持.这个可能是开发工具还没有跟上吧,希望以

  • 详解Typescript里的This的使用方法

    this可以说是Javascript里最难理解的特性之一了,Typescript里的 this 似乎更加复杂了,Typescript里的 this 有三中场景,不同的场景都有不同意思. this 参数: 限制调用函数时的 this 类型 this 类型: 用于支持链式调用,尤其支持 class 继承的链式调用 ThisType: 用于构造复杂的 factory 函数 this 参数 由于 javascript 支持灵活的函数调用方式,不同的调用场景,this 的指向也有所不同 作为对象的方法调用

  • JavaScript/TypeScript 实现并发请求控制的示例代码

    场景 假设有 10 个请求,但是最大的并发数目是 5 个,并且要求拿到请求结果,这样就是一个简单的并发请求控制 模拟 利用 setTimeout 实行简单模仿一个请求 let startTime = Date.now(); const timeout = (timeout: number, ret: number) => { return (idx?: any) => new Promise((resolve) => { setTimeout(() => { const compa

  • typescript配置alias的详细步骤

    1 安装依赖 npm install --save-dev babel-plugin-module-resolver # yarn add babel-plugin-module-resolver --dev 根目录新增.babelrc文件 参考以下内容按您项目中的需要去修改 { "presets": ["next/babel"], "plugins": [ [ "module-resolver", { "alias

  • 详解TypeScript中的类型保护

    概述 在 TypeScript 中使用联合类型时,往往会碰到这种尴尬的情况: interface Bird { // 独有方法 fly(); // 共有方法 layEggs(); } interface Fish { // 独有方法 swim(); // 共有方法 layEggs(); } function getSmallPet(): Fish | Bird { // ... } let pet = getSmallPet(); pet.layEggs(); // 正常 pet.swim();

  • 详解TypeScript中type与interface的区别

    详解TypeScript中type与interface的区别

    目录 类型别名 type 接口 interface interface和type的相似之处 都可以描述 Object和Function Type Interface 二者都可以被继承 interface 继承 interface interface 继承 type type 继承 type type 继承 interface 实现 implements 二者区别 1. 定义基本类型别名 2. 声明联合类型 3. 声明元组 4. 声明合并 5. 索引签名问题 总结 类型别名 type 首先认识一下

  • 详解c++中的类型识别

    1.类型识别的相关概念 (1)类型识别的作用 类型识别是面向对象中引入的一个新概念,主要用来判断赋值兼容性原则中的类型问题,即此时的数据类型到底是基类类型还是派生类类型? 当基类指针指向子类对象 或者基类引用成为子类对象的别名 时,就需要使用类型识别: Base *p = new Derived(); Base &r = *p 对于上面的语句,我们可以这样认识,指针p是Base类型,但是P 又指向了一个新的Derived类型,此时很难判断指针P 的数据类型:同理,引用r 本来作为父类的别名而存在

  • 详解Java中ThreadLocal类型及简单用法

    详解Java中ThreadLocal类型及简单用法

    目录 1 基本概念 2 简单使用 3 应用场景 4 底层原理 4.1 set(Object) 4.2 get() 4.3 remove() 4.4 ThreadLocalMap 5 内存泄漏隐患和防止策略 5.1 为什么会发生内存泄漏? 5.2 怎样防止内存泄漏? 1 基本概念 ThreadLocal类提供了线程局部变量.这些变量与普通变量的不同之处在于,每个访问一个变量(通过其get或set方法)的线程都有自己的.独立初始化的变量副本.ThreadLocal实例通常是希望将状态与线程关联起来的

  • 详解TypeScript使用及类型声明文件

    详解TypeScript使用及类型声明文件

    目录 简介 Script 与 Vue3 defineProps 与 Typescript defineEmits 与 Typescript ref 与 Typescript computed 与 Typescript 事件对象 与 Typescript 模板 Ref 与 Typescript 可选链操作符 非空断言-TS TypeScript类型声明文件 基本介绍 内置类型声明文件 第三方库类型声明文件 自定义类型声明文件 简介 声明文件是以.d.ts为后缀的文件,开发者在声明文件中编写类型声明

  • 详解Java中String类型与默认字符编码

    为什么写这个 至于为什么要写这个,主要是一句mmp一定要讲,绕了一上午,晕死 Java程序中的中文乱码问题一直是一个困扰程序员的难题,自己也不例外,早在做项目时就遇到过很多编码方式的坑,当时想填来着,但是嫌麻烦.这次终于忍不住了,一定要弄个明白 String类型的编码方式 从网上查的资料都说,Java默认的字符编码是Unicode,而String类型的编码方式是与JVM编码方式和本机操作系统默认字符集有关的.于是我做出了测试 在Java中可以这样显示查看本地编码方式(JVM还是OS呢?) //

  • 详解Python中映射类型的内建函数和工厂函数

    1.基本函数介绍 (1)标准类型函数[type().str()和 cmp()]         对一个字典调用type()工厂方法,会返回字典类型:"<type 'dict'>".调用str()工厂方法将返回该字典的字符串表示形式.         字典是通过这样的算法来比较的:首先是字典的大小,然后是键,最后是值.可是用cmp()做字典的比较一般不是很有用. 算法按照以下的顺序: 首先比较字典长度         如果字典的长度不同,那么用cmp(dict1, dict2

  • 详解Python中映射类型（字典）操作符的概念和使用

    映射类型操作符 (1)标准类型操作符 字典可以和所有的标准类型操作符一起工作,但却不支持像拼接(concatenation)和重复(repetition)这样的操作.这些操作对序列有意义,可对映射类型行不通.         字典是如何比较的呢? 与列表和元组一样,这个过程比数字和字符串的比较更复杂些. (2)映射类型操作符 字典的键查找操作符([ ])         键查找操作符是唯一仅用于字典类型的操作符,它和序列类型里单一元素的切片(slice)操作符很相象.对序列类型来说,用索引做唯一

  • 详解TypeScript的基础类型

    目录 布尔类型 数字类型 字符串类型 字符串和数字进行拼接 undefined和 null 数组类型 元组类型 枚举类型 any类型 void类型 联合类型 总结 布尔类型 // 布尔类型--->boolean // let 变量名:数据类型 = 值 let flag: boolean = true; console.log(flag) 数字类型 // 数字类型--->number let a1: number = 10 // 十进制 let a2: number = 0b1010 // 二进

  • 详解TypeScript映射类型和更好的字面量类型推断

    概述 TypeScript 2.1 引入了映射类型,这是对类型系统的一个强大的补充.本质上,映射类型允许w咱们通过映射属性类型从现有类型创建新类型.根据咱们指定的规则转换现有类型的每个属性.转换后的属性组成新的类型. 使用映射类型,可以捕获类型系统中类似Object.freeze()等方法的效果.冻结对象后,就不能再添加.更改或删除其中的属性.来看看如何在不使用映射类型的情况下在类型系统中对其进行编码: interface Point { x: number; y: number; } inte

随机推荐