【TypeScript 4.5】004-第 4 章 类型缩小
文章目录
- 【TypeScript 4.5】004-第 4 章 类型缩小
- 一、typeof 类型守卫
- 1、什么是类型缩小
- 含义
- 代码分析
- 2、使用 typeof 进行代码改造
- 改造后的代码
- 执行结果
- 3、typeof 类型守卫
- 概述
- 使用示例
- 问题代码示例
- 二、真值缩小
- 1、概述
- 说明
- 代码分析
- 2、解决 typeof 类型守卫中的问题
- 三、等值缩小
- 1、说明
- 2、代码示例
- 四、in 操作符缩小
- 1、概述
- 说明
- 代码分析
- 2、代码演示
- 代码示例及解释
- 五、instanceof 操作符缩小
- 1、概述
- 说明
- 代码分析
- 2、代码演示
- 代码示例
- 执行结果
- 六、分配缩小
- 1、概述
- 说明
- 代码示例
- 2、代码演示
- 代码示例及解释
- 执行结果
- 七、控制流分析
- 1、概述
- 说明
- 代码示例
- 2、代码演示
- 代码示例及解释
- 执行结果
- 八、使用类型谓词
- 1、概述
- 说明
- 代码示例
- 2、代码演示
- 代码示例及解释
- 执行结果
- 九、受歧视的 unions
- 1、概述
- 2、代码演示
- 发现问题
- 解决问题
- 执行结果
- 十、never 类型与穷尽性检查
- 1、概述
- 2、代码示例及解释
一、typeof 类型守卫
1、什么是类型缩小
含义
TypeScript 类型缩小就是从宽类型转化为窄类型的过程
类型缩小常用于处理联合类型变量的场景
代码分析
function padLeft(padding: number | string, input: string): string {
return new Array(padding + 1).join(" ") + input // 报错:运算符“+”不能应用于类型“string | number”和“number”。
}
2、使用 typeof 进行代码改造
改造后的代码
function padLeft(padding: number | string, input: string): string {
if(typeof padding === "number") {
return new Array(padding + 1).join(" ") + input
}
return padding + input
}
console.log(100, "哈哈哈")
console.log("大哥", "刘备")
执行结果
PS D:\MyFile\VSCodeProjects\study-ts\第 4 章 类型缩小\dist> node .\01-typeof.js
100 哈哈哈
大哥 刘备
3、typeof 类型守卫
概述
返回当前类型的字符串表示。
使用示例
typeof a === "object"
// 除了 object ,还有 string、number、bigint、boolean、symbol、undefined、function
问题代码示例
function printAll(strs: string | string[] | null): string {
// 需要说明的是当 strs 的值为 string[] 类型的时候返回的是 "object"
// 而当 strs 的值为 null 的时候返回的也是 "object"
}
二、真值缩小
1、概述
说明
真值检查是在 JavaScript 中经常要做的事情
我们可以使用条件、&&、||、布尔否定(!)来进行真值检查
代码分析
function getUserOnlineMessage (numUsersOnline: number) {
if (numUsersOnline) { // 如果此处 numUsersOnline 的值为0、NaN、""(空字符串)、On(bigint零的版本)、null、undefined,则为 false
return `现在共有 ${numUsersOnline} 人在线!`
}
return "现在无人在线!"
}
// 下面两种结果都返回 true ,值与 if() 括号里面的值判断标准一致!
Boolean("hello")
!!"world" // 一个!将其转换为文字类型,里昂一个!将其转换为布尔类型!
2、解决 typeof 类型守卫中的问题
function printAll(strs: string | string[] | null) {
// 要判断 strs 是 string[] 且不是 null, 可以这么写!
if(strs && typeof strs === "object"){
// ...
}
}
三、等值缩小
1、说明
TypeScript 也可以使用分支语句做全等(=)、全不等(!)、等于(==)、不等于(!=)来做等值检查,实现类型缩小。
2、代码示例
真是过于简单了!都不想写代码示例了!
// 全等
function doSth(str1: string | null, str2: string | number) {
if (str1 === str2) {
str1.toUpperCase()
str2.toLowerCase()
}
}
// 不等(这一点需要注意)
function doSth1(value: number | null | undefined, x: number) {
if(value != null){ // 这里的 null 替换成 undefined 结果也是一样的!
value *= x
console.log(value)
}
}
doSth1(100, 5) // 500
doSth1(null, 5) // 什么也不打印
doSth1(undefined, 5) // 注意:这个也是什么也不打印!已自动将其过滤!
四、in 操作符缩小
1、概述
说明
JavaScript 有个运算符,用来确定对象是否具有某个名称的属性,这个运算符就是 in 运算符!
代码分析
// 格式
value in X
// value 为字符串(表示属性名)
// 结果若为 true ,要求 X 具有可选或必需属性的类型的值
// 结果若为 false,要求 X 具有可选或缺失属性的类型的值
2、代码演示
代码示例及解释
结果若为 true ,要求 X 具有可选或必需属性的类型的值!
type Fish = {
swim: () => void
}
type Bird = {
fly: () => void
}
function move(animal: Fish | Bird){
if("swim" in animal){
return animal.swim
}
return animal.fly
}
再加入一个 People 类型,使其具有两者的(可选)属性!
type Fish = {
swim: () => void
}
type Bird = {
fly: () => void
}
type People = {
swim?: () => void,
fly?: () => void
}
function move(animal: Fish | Bird | People){
if("swim" in animal){
// animal: Fish | People
// 我们可以将其断言为 Fish
return (animal as Fish).swim
}
// animal: Bird | People
// 我们可以将其断言为 Bird
return (animal as Bird).fly
}
也可以不用断言,在其有该方法的时候才执行!
type Fish = {
swim: () => void
}
type Bird = {
fly: () => void
}
type People = {
swim?: () => void,
fly?: () => void
}
function move(animal: Fish | Bird | People) {
if ("swim" in animal) {
// animal: Fish | People
return animal?.swim
}
// animal: Bird | People
return animal?.fly
}
五、instanceof 操作符缩小
1、概述
说明
JavaScript 使用 instanceof 操作符来检查一个值是否是另一个值的实例
instanceof 也是一个类型保护
TypeScript 在由 instanceof 保护的分支中来实现类型缩小
代码分析
X instanceof Foo // 用来检查 X 的原型链是否含有 Foo.prototype
2、代码演示
代码示例
function logValue(x: Date | string) {
if (x instanceof Date) {
console.log(x.toUTCString())
} else {
console.log(x.toUpperCase())
}
}
logValue(new Date())
logValue("hello world")
执行结果
PS D:\MyFile\VSCodeProjects\study-ts\第 4 章 类型缩小\dist> node .\05-instanceof.js
Mon, 07 Feb 2022 01:08:07 GMT
HELLO WORLD
六、分配缩小
1、概述
说明
当我们为任何变量赋值的时候
TypeScript 会查看赋值的右侧
并适当缩小左侧
代码示例
// let x: string | number
let x = Math.random() < 0.5 ? 10 : "hello world"
2、代码演示
代码示例及解释
// let x: string | number (自动推断为联合类型)
let x = Math.random() < 0.5 ? 10 : "hello world"
// let x: number
x = 1
console.log(typeof x)
console.log(x)
// let x: string
x = "good morning"
console.log(typeof x)
console.log(x)
// 手动分配测试
let y: number | string
y = 100
console.log(typeof y)
console.log(y)
y = "good morning"
console.log(typeof y)
console.log(y)
// 结论:与分配自动推断结果一致!
执行结果
此处变成了具体的类型而不是联合类型,可参考下面的控制流分析!
PS D:\MyFile\VSCodeProjects\study-ts\第 4 章 类型缩小\dist> node .\06-assignment.js
number
1
string
good morning
number
100
string
good morning
七、控制流分析
1、概述
说明
基于可达性的代码分析即控制流分析!见代码示例!
代码示例
function padLeft(padding: number | string, input: string) {
if (typeof padding === "number") {
return new Array(padding + 1).join(" ") + input
}
return padding + input
}
2、代码演示
代码示例及解释
function test() {
let x: number | string | boolean
x = Math.random() < 100
// let x: boolean
console.log(typeof x)
console.log(x)
if(Math.random() < 100) {
x = "hello world"
// let x: string
console.log(typeof x)
console.log(x)
} else {
x = 100
// let x: number
console.log(typeof x)
console.log(x)
}
return x
}
let q = test()
q = 100
q = "hi"
// q = true // 报错:不能将类型“boolean”分配给类型“string | number”。
// 说明此处将函数中 x 的值推断为 string | number ,下面的判断将上面的 boolean 类型覆盖了!
console.log(typeof q)
console.log(q)
执行结果
PS D:\MyFile\VSCodeProjects\study-ts\第 4 章 类型缩小\dist> node .\07-ctrl.js
boolean
true
string
hello world
string
hi
八、使用类型谓词
1、概述
说明
有时候我们想直接控制整个代码的类型变化
为了定义一个用户定义的类型保护
我们只需要定义一个函数
并使其返回值是一个类型谓词即可
代码示例
pet is Fish 就是所谓的类型谓词,意思是:如果 pet 里面有 swim 这个属性,pet 就是 Fish 类型!格式:参数名 is 类型
function isFish (pet: Fish | Bird): pet is Fish {
return (pet as Fish).swim !== undefined
}
2、代码演示
代码示例及解释
type LiuBei = {
name: string,
fight: boolean
}
type ZiBo = {
name: string,
code: boolean
}
function isMe(people: LiuBei | ZiBo): people is ZiBo {
return (people as ZiBo).name === "訾博" && (people as ZiBo).code === true
}
function getPeople(): ZiBo | LiuBei {
if(Math.random() > 0.5){
return { name: "訾博", code: true }
} else {
return { name: "刘备", fight: true }
}
}
let people = getPeople()
// 此时如果 isMe(people) 返回为 true ,TypeScript 就知道 me 的类型是 ZiBO ,反之为 LiuBei
if(isMe(people)){
console.log(people.name)
console.log(people.code)
} else {
console.log(people.name)
console.log(people.fight)
}
// 下面是深度一点的使用
const somePeople: (ZiBo | LiuBei)[] = [getPeople(), getPeople(), getPeople(), getPeople(), getPeople()]
// 过滤出 ZiBo ,下面两行代码是等价的!
const zibo1: ZiBo[] = somePeople.filter(isMe)
const ZIBO2: ZiBo[] = somePeople.filter(isMe) as ZiBo[]
// 写得更复杂点!
const zibo3: ZiBo[] = somePeople.filter((people): people is ZiBo => { // people 的小括号是一定要带的
if (people.name === "刘备"){
return false
}
return isMe(people)
})
执行结果
PS D:\MyFile\VSCodeProjects\study-ts\第 4 章 类型缩小\dist> node .\09-type.js
刘备
true
[ { name: '訾博', code: true }, { name: '訾博', code: true } ]
[ { name: '訾博', code: true }, { name: '訾博', code: true } ]
[ { name: '訾博', code: true }, { name: '訾博', code: true } ]
九、受歧视的 unions
1、概述
union 即联合类型
我们一直在用简单的类型来缩小单个变量
但 JavaScript 中大多数处理的是稍微复杂的结构
2、代码演示
发现问题
// 圆形与方形
interface Shape {
kind: "circle" | "square",
radius?: number,
sideLength?: number
}
// 计算圆的面积
function getArea (shape: Shape) {
if(shape.kind === "circle"){
// 【问题】这么写看上去很理想,但是无法保证 kind 为 circle 的时候 radius 就一定是已定义的!
return Math.PI * shape.radius! ** 2
}
}
解决问题
// 圆形与方形
interface Circle {
kind: "circle",
radius: number
}
interface Square {
kind: "square",
sideLength: number
}
type Shape = Circle | Square
// 计算圆的面积
function getArea (shape: Shape) {
if(shape.kind === "circle"){
return Math.PI * shape.radius ** 2
}
}
console.log(getArea({kind: "circle", radius: 3}))
执行结果
PS D:\MyFile\VSCodeProjects\study-ts\第 4 章 类型缩小\dist> node .\010-unions.js
28.274333882308138
十、never 类型与穷尽性检查
1、概述
在缩小范围的时候
我们可以将联合体的选项减少
直到删除了所有可能性
这个时候我们使用 never 类型表示
never 类型表示不应该存在的状态
never 可以分配给任何类型
但没有任何类型可以分配给 never
除了 never 本身
2、代码示例及解释
// 圆形、方形、三角形
interface Circle {
kind: "circle",
radius: number
}
interface Square {
kind: "square",
sideLength: number
}
interface Triangle {
kind: "triangle",
sideLength: number
}
type Shape = Circle | Square | Triangle
// 计算圆的面积
function getArea (shape: Shape) {
switch(shape.kind){
case "circle":
return Math.PI * shape.radius ** 2
case "square":
return shape.sideLength ** 2
default:
// 报错:不能将类型“Triangle”分配给类型“never”。
// 报错意味着还有可能,也就做了穷尽性检查!
const _exhaustiveCheck: never = shape
return _exhaustiveCheck
}
}