为何TypeScript在有return时能收窄类型，无return时却不行？

问题复现 #

我写了这段TypeScript代码：

type Input = string
function util(input: Input) {
    return input
}

function main(input: Input | null) {
    const isNull = input === null
    if (isNull) {
        return 'empty string'
    }    
    input = util(input) // 报错
}

报错信息：

Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'.

但以下两种写法不会报错：

• 最后一行改为 return util(input)
• 条件语句简化为 if (input === null)

这是为什么？

原因分析 #

这是TypeScript类型收窄机制的限制：

• 当你把input === null的结果赋值给独立的const isNull变量时，TypeScript无法建立这个变量和原变量input的关联关系。它没办法推断出“当isNull为true时input是null，当isNull为false时input一定是string”，所以在if (isNull)分支返回后，TS仍然认为input的类型是string | null，传给只接受string类型的util函数时就会报错。
• 直接在if条件中写input === null时，TS能直接识别这个条件对input类型的影响，会自动把if分支之后的input类型收窄为string，因此不会报错。
• 改成return util(input)时，TS知道return语句会终止函数执行，只有input不是null的情况才会走到这一行（null的情况已经被前面的分支return了），所以能推断出此时input的类型是string，可以安全传给util。

我的实际场景 #

我之所以不直接在条件语句里写判断，是因为需要同时检查input是否为null，以及是否匹配空白字符正则。另外因为正则test方法存在的一些问题，我希望把所有判断条件合并到一个变量中管理，这样代码更易维护：

const isNullOrEmpty = input === null || /^\s+$/.test(input)
if (isNullOrEmpty)

比分开写更清晰：

const isEmpty = /^\s+$/.test(input)
if (input === null || isEmpty)

解决方案 #

要解决这个问题，你可以用类型守卫函数让TS正确识别类型收窄：

type Input = string

function util(input: Input) {
    return input
}

// 定义类型守卫函数，明确返回true时input的类型
function isNullOrWhitespace(input: Input | null): input is null {
    return input === null || /^\s+$/.test(input)
}

function main(input: Input | null) {
    if (isNullOrWhitespace(input)) {
        return 'empty string'
    }
    // 此时TS能正确推断input是string类型
    input = util(input)
}

或者如果你能确保if (isNullOrEmpty)分支之后input一定不是null，也可以用非空断言（注意：仅在逻辑绝对安全时使用，避免运行时错误）：

function main(input: Input | null) {
    const isNullOrEmpty = input === null || /^\s+$/.test(input)
    if (isNullOrEmpty) {
        return 'empty string'
    }
    input = util(input!) // 用!断言input非null
}

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