TypeScript中if语句对联合类型的简单类型缩小失效问题

问题复现 #

const element = {} as { type: string, props: Object } | { type: Function, props: any }
if (typeof element.type === "string") {
    element
}
else {
    element
}

上述代码中if分支判断后，element的类型没有被缩小，始终为初始的联合类型。

核心原因 #

1. 你定义的联合类型不属于判别式联合：TypeScript 控制流分析默认仅支持对判别式联合做整体对象的类型缩小，判别式联合要求所有联合成员共享一个取值为字面量类型/字面量联合类型的公共属性作为判别键。当前代码中两个联合成员的type属性类型分别为通用string类型和Function类型，都不是固定值的字面量类型，因此 TypeScript 仅会缩小element.type这个属性本身的类型，不会向上推导缩小整个element的类型。
2. 类型映射缺失：TypeScript 目前没有默认建立typeof x === "function"和x is Function的自动类型映射，进一步阻止了控制流分析对第二个联合成员的排除逻辑。

解决方案 #

方案1：改造为标准判别式联合（最推荐） #

将type属性改为固定字面量取值，符合 TypeScript 类型系统的设计规范：

type StringElement = { type: 'string', props: Object }
type FunctionElement = { type: 'function', props: any }
const element = {} as StringElement | FunctionElement

if (element.type === "string") {
    // 此处element类型自动缩小为 StringElement
    element
} else {
    // 此处element类型自动缩小为 FunctionElement
    element
}

方案2：自定义类型守卫 #

如果不能修改原联合类型的定义，可以手写类型守卫函数实现窄化：

type StringElement = { type: string, props: Object }
type FunctionElement = { type: Function, props: any }
const element = {} as StringElement | FunctionElement

function isStringElement(val: StringElement | FunctionElement): val is StringElement {
    return typeof val.type === 'string'
}

if (isStringElement(element)) {
    // 此处element类型自动缩小为 StringElement
    element
} else {
    // 此处element类型自动缩小为 FunctionElement
    element
}

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