TS 进阶2 - 类型守卫

You, TypeScript
Back

1. 使用 is 关键字创建类型守卫函数

/**
* 类型守卫函数
* 使用 is 关键字
*/
type NumOrStrProp = number | string;
const isString = (value: NumOrStrProp): value is string => {
return typeof value === 'string'
}
function useIt(value: NumOrStrProp) {
if (isString(value)) {
return value.length
}
return
}
type Falsy = null | 0 | '' | undefined | false
const isFalsy = (value: any): value is Falsy => {
return !value
}

2. 使用 in 关键字实现类型守卫

// example1 : 对类型联合使用 in 关键字来判断属性是否存在, 从而 narrow type
class A {
public a() {
}
public useA() {
}
}
class B {
public b() {
}
public useB() {
}
}
const isClassA = (value: A | B) => {
if ('a' in value) {
value.useA()
} else {
value.useB()
}
}
// example2: 对于 已登录的用户, 返回 name, 对于未登录的用户, 返回 from
interface LogInUser {
isLogin: boolean;
name: string;
}
interface UnLoginUser {
isLogin: boolean;
from: string;
}
// use in operator
function getUserInfo(user: LogInUser | UnLoginUser): string {
if ('name' in user) {
return user.name
} else {
return user.from
}
}

3. 使用 instanceof operator 实现 narrowing

{
/** 使用 instanceof operator 实现 narrowing
* 只能对原生的类 (例如 Date) 使用
*/
function getCurrentTime(value: string | Date): string {
if (value instanceof Date) {
return String(value.getDate())
} else {
return value
}
}
}

4. 使用 typeof 关键字

function getUserId(value: string | number): number {
if (typeof value === 'string') {
return Number(value)
} else {
return value
}
}
© Apolo Du.