TypeScript中类getter内undefined检查在内部函数失效问题问询

先看你提供的代码：

interface Person { name: string; age: number }

class TestClass {
    get person(): Person | undefined {
        if (Math.random() > 0.5) return undefined
        return { name: 'Bob', age: 35 }
    }

    get test() {
        if (!this.person) return undefined
        const name = this.person.name // 无错误
        const processPerson = () => this.person.name // 报错：Object is possibly 'undefined'.(2532)
        return processPerson()
    }
}

核心原因分两点： #

1. TypeScript控制流分析对同步代码的类型守卫逻辑

当你执行if (!this.person) return undefined时，TypeScript的控制流分析会认定：在这个return之后的同步代码块内，this.person一定是Person类型。虽然person是getter（每次访问都会重新执行逻辑，甚至可能返回不同结果），但TypeScript做了一个乐观假设——同一段同步执行流中，同一个getter的返回类型是稳定的，因此直接写const name = this.person.name不会报错。

2. 箭头函数的执行上下文脱离了原类型守卫作用域

processPerson作为箭头函数，哪怕你紧接着就调用它，TypeScript也会把它当作独立的执行单元。它不会继承外部代码块的类型守卫状态——也就是说，箭头函数内部不会“记得”你之前已经检查过this.person是否存在。再加上person是getter，每次调用都可能返回undefined，TypeScript就会严格提示类型错误。

验证示例： #

如果把person改成普通属性而非getter，箭头函数里就不会报错——因为普通属性的值是稳定的，TypeScript能确定箭头函数执行时this.person的类型：

class TestClass {
    person: Person | undefined = { name: 'Bob', age: 35 }; // 普通属性

    get test() {
        if (!this.person) return undefined
        const processPerson = () => this.person.name // 无错误
        return processPerson()
    }
}

解决方法： #

如果要保留getter写法，可以先把this.person的引用存入变量，让箭头函数访问这个变量——变量的类型在类型守卫后是确定的，不会再变化：

get test() {
    const currentPerson = this.person
    if (!currentPerson) return undefined
    const name = currentPerson.name
    const processPerson = () => currentPerson.name // 无错误
    return processPerson()
}

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