类型缩小
什么是类型缩小呢？
类型缩小的英文是 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)
break
case "right":
console.log(direction)
break
case "top":
console.log(direction)
break
case "bottom":
console.log(direction)
break
default:
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类型缩小内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！