【TypeScript】的类型缩小

文章目录

类型缩小
- typeof
- 平等缩小
- instanceof
- in

类型缩小

什么是类型缩小呢？

类型缩小的英文是 Type Narrowing；

我们可以通过类似于 typeof padding === "number" 的判断语句，来改变TypeScript的执行路径；

在给定的执行路径中，我们可以缩小比声明时更小的类型，这个过程称之为缩小;

而我们编写的 typeof padding === "number 语句可以称之为 类型保护（ type guards）；

常见的类型保护有如下几种：

typeof

平等缩小（比如===、 !==）

instanceof

in

等等…

我们主要讲解typeof、平等缩小、instanceof、in这四种

typeof

在TypeScript中，检查返回的值typeof是一种类型保护：因为TypeScript对如何typeof操作不同的值进行编码。

例如我们有下面一个常见, 封装一个函数, 函数要求传入参数ID, 传入的ID有可能是string类型有可能是number类型

当传入的ID是string类型时, 要求将ID的字母全部转为大写

function printID(id: string|number) {if (typeof id === "string") {console.log(id.toUpperCase())} else {console.log(id)}
}// 测试
printID(123)
printID("aaa")

上面代码中, 整个if判断语句就是类型缩小, 例如当代码进入if语句第一个分支时, 一定是string类型, 进入第二个分支一定是number类型
if的判断语句就称为类型保护

平等缩小

我们可以使用Switch或者相等的一些运算符来表达相等性（比如=== , !== , == , and != ）：

type Direction = "left" | "right" | "top" | "bottom"
function printDirection(direction: Direction) {// 平等类型缩小switch (direction) {case "left":console.log(direction)breakcase "right":console.log(direction)breakcase "top":console.log(direction)breakcase "bottom":console.log(direction)breakdefault:console.log("调用默认方法")}
}// 测试
printDirection("left")
printDirection("right")
printDirection("top")
printDirection("bottom")

instanceof

JavaScript 有一个运算符来检查一个值是否是另一个值的“实例”：

function printTime(time: string|Date) {// 判断time是否是Date的实例if (time instanceof Date) {console.log(time.toUTCString())} else {console.log(time)}
}// 测试
printTime("2020-01-02")
const date = new Date()
printTime(date)

如果不好理解我们可以看下面这个例子

class Teacher {working() {console.log("正在工作")}
}class Student {studying() {console.log("正在学习")}
}function work(p: Student | Teacher) {// 判断是哪一个实例if (p instanceof Teacher) {p.working()} else {p.studying()}
}// 测试
const stu = new Student()
const tec = new Teacher()work(stu) // 正在学习
work(tec) // 正在工作

in

Javascript 有一个运算符，用于确定对象是否具有带名称的属性： in运算符

如果指定的属性在指定的对象或其原型链中，则in 运算符返回true；

// () => void表示是一个函数类型
type Dog = {running: () => void}
type Fish = {swimming: () => void}function walk(animal: Dog|Fish) {// 判断函数是否在animal中if ("swimming" in animal) {animal.swimming()} else {animal.running()}
}// 测试
const dog: Dog = {running() {console.log("狗是跑的")}
}
const fish: Fish = {swimming() {console.log("鱼是游的")}
}walk(dog) // 狗是跑的
walk(fish) // 鱼是游的

【TypeScript】的类型缩小相关推荐

快速而深入地了解TypeScript及其类型
by David Piepgrass 由David Piepgrass 快速而深入地了解TypeScript及其类型 (A quick yet in-depth tour of TypeScript ...
简单探讨TypeScript 枚举类型
这篇文章主要介绍了TypeScript 枚举类型,TypeScript 在 ES 原有类型基础上加入枚举类型,使得在 TypeScript 中也可以给一组数值赋予名字,这样对开发者比较友好,可以理解枚 ...
TypeScript 基础类型 1
TypeScript 基础类型自本节起,我们将开始接触 TypeScript 的类型系统,这也是 TypeScript 最为核心的部分. 本节介绍 TypeScript 中一些基础类型,有些特殊类型 ...
TypeScript 基础类型+函数+接口+类
1.简介: TypeScript 是 JavaScript 的一个超集.由微软开发的自由和开源的编程语言.设计目标是开发大型应用.是一种面向对象的编程语言,遵循强类型 javascript与types ...
PART16 TypeScript高级类型
文章目录 TypeScript高级类型 class类构造函数实例方法类的继承类成员的可见性类型兼容性接口之间的兼容性函数之间的兼容性参数个数参数类型返回值类型交叉类型泛型泛型 ...
TypeScript高级类型：联合类型、交叉类型和类型别名
目录引言联合类型交叉类型类型别名注意结论引言 TypeScript 是一门强类型语言,其高级类型功能使得开发者能够更加灵活地定义类型并对其进行操作,以便于更好地编写可维护和可扩展的代码. ...
03 ts类型缩小,函数
目录类型缩小函数类型函数类型参数的个数函数调用签名函数构造签名(理解) 函数参数可选类型参数默认值剩余参数函数的重载(了解) 联合类型与重载函数中this的默认推导不明确this类 ...
typescript索引类型_TypeScript类型声明书写详解
本文总结一下TypeScript类型声明的书写,很多时候写TypeScript不是问题,写类型就特别纠结,我总结下,我在使用TypeScript中遇到的问题.如果你遇到类型声明不会写的时候,多看看lo ...
Typescript 基本类型
基础知识脑补下在 JavaScript 的类型分为两种: 原始数据类型(Primitive data types) 对象类型(Object types) 其中,原始数据类型包括:布尔值.数字.字符串 ...