TypeScript 如何让自定义校验函数支持变量类型断言与类型收窄

解决方案 #

你需要使用TypeScript提供的**类型谓词（Type Predicate）**语法定义校验函数，TS就可以识别这类函数的返回结果用作类型收窄，实现你要的自定义类型断言能力。

1. 非空校验场景修正代码 #

// 用 val is null | undefined 定义类型谓词，表示函数返回true时，val的类型为 null | undefined
function isNull(val: any): val is null | undefined {
    return val == null
}
function fn(val: string | null) {
    if (isNull(val)) return 
    // 此时TS可以正确收窄val类型为 string，可正常调用split方法
    val.split(",")
}

2. 数值类型校验场景修正代码 #

注意你原代码里的isNumber函数逻辑有误，判断值是否为数值类型需要用typeof操作符，修正后如下：

// 类型谓词声明返回true时，val类型为number
function isNumber(val: any): val is number {
    return typeof val === "number"
}
function fn2(val: string | number) {
    if (isNumber(val)) return 
    // 此时TS可以正确收窄val类型为 string，可正常调用split方法
    val.split(",")
}

原理说明 #

类型谓词是TS专门为自定义类型校验函数设计的语法，格式为参数名 is 目标类型，作为函数的返回值类型声明。当函数返回true时，TS会自动将入参的类型收窄为你声明的目标类型，就可以达到和原生类型判断语句一样的类型收窄效果。

内容的提问来源于stack exchange，提问作者Sean