如何为非参数变量（类属性）使用TypeScript类型守卫？

TypeScript的类型检查器无法追踪函数/方法对非参数变量（比如全局变量、类属性）的赋值操作，所以即便你调用某个方法确保变量已初始化，TS依然会判定它可能为undefined。针对你给出的场景，有以下几种解决方式：

1. 使用前显式类型检查 #

最稳妥的方式是在使用变量前直接做存在性检查，让TS明确此时变量不为undefined：

全局变量场景修改后： #

let x: string | undefined

function fn() {
    setX()
    if (x) { // 显式检查x存在
        x.toLowerCase() // TS不再报错
    }
}
function setX() {
    x = "foo"
}

类属性场景修改后： #

class FooWidget {
    private el: Element | undefined

    public display() {
        this.createElementIfNotExists()
        if (this.el) { // 显式检查el存在
            this.el.classList.add("display") // TS不再报错
        }
    }

    private createElementIfNotExists() {
        if (this.el) return
        this.el = document.createElement("div")
        document.body.appendChild(this.el)
    }
}

2. 非空断言（!） #

如果你能100%确定变量在使用前已被初始化，可以用非空断言运算符!告诉TS：这个变量肯定不是undefined或null。但要注意，这种方式会跳过TS的类型检查，若运行时变量实际为undefined，会直接抛出错误：

全局变量场景修改后： #

let x: string | undefined

function fn() {
    setX()
    x!.toLowerCase() // 非空断言，TS不再报错
}
function setX() {
    x = "foo"
}

类属性场景修改后： #

class FooWidget {
    private el: Element | undefined

    public display() {
        this.createElementIfNotExists()
        this.el!.classList.add("display") // 非空断言，TS不再报错
    }

    private createElementIfNotExists() {
        if (this.el) return
        this.el = document.createElement("div")
        document.body.appendChild(this.el)
    }
}

3. 重构代码让TS追踪类型（推荐） #

通过调整代码结构，让TS能追踪到变量的赋值状态，从根源上解决问题。比如让初始化方法返回变量，确保TS能准确推断类型：

类属性场景重构后： #

class FooWidget {
    private el: Element | undefined

    public display() {
        const el = this.createElementIfNotExists()
        el.classList.add("display") // TS能确定el是Element类型
    }

    private createElementIfNotExists(): Element {
        if (this.el) return this.el
        this.el = document.createElement("div")
        document.body.appendChild(this.el)
        return this.el
    }
}

这种方式既保留了懒加载逻辑，又让TS能准确识别变量类型，是最安全的方案。

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