TypeScript中if守卫无法正确推断联合类型的问题及修复方案

问题 #

为何以下代码在创建variant变量前已添加if守卫的情况下，仍出现类型错误？如何在不编写自定义类型守卫的前提下修复该问题？

代码示例 #

type PersonDetails = {
  gender: 'man' | 'woman',
  height: 'tall' | 'short',
}

export type PersonVariant =
  | {
      gender: 'man',
      height: 'tall',
    }
  | {
      gender: 'woman',
      height: 'tall',
    }
  | {
      gender: 'woman',
      height: 'short',
    };

const details = {} as PersonDetails;

function test() {
    if (details.gender === 'man' && details.height === 'short') {
        return;
    }

    const variant: PersonVariant = {
        gender: details.gender,
        height: details.height,
    };
}

错误信息 #

Type '{ gender: "man" | "woman"; height: "tall" | "short"; }' is not assignable to type 'PersonVariant'.
  Type '{ gender: "man" | "woman"; height: "tall" | "short"; }' is not assignable to type '{ gender: "woman"; height: "short"; }'.
    Types of property 'gender' are incompatible.
      Type '"man" | "woman"' is not assignable to type '"woman"'.
        Type '"man"' is not assignable to type '"woman"'.

原因分析 #

TypeScript的控制流分析无法跨属性联动缩小类型。你添加的if守卫仅排除了man + short这一种非法组合，但TypeScript只会单独缩小details.gender为'man' | 'woman'、details.height为'tall' | 'short'，无法识别「当gender为man时，height只能是tall」这个联动约束。最终组合出的对象类型仍包含man + short的可能性，与PersonVariant的类型定义冲突，导致报错。

无自定义类型守卫的修复方案 #

方案1：拆分分支显式推导类型 #

通过解构属性并分分支处理，让TypeScript能明确每个分支的合法类型：

function test() {
    const { gender, height } = details;
    if (gender === 'man' && height === 'short') {
        return;
    }

    const variant: PersonVariant = gender === 'man' 
        ? { gender, height } // 此时TypeScript知道height必为tall
        : { gender, height }; // gender为woman时，height的两种取值都合法
}

方案2：使用类型断言（谨慎使用） #

如果能确保当前逻辑已完全排除非法组合，可以用类型断言跳过检查：

function test() {
    if (details.gender === 'man' && details.height === 'short') {
        return;
    }

    const variant = {
        gender: details.gender,
        height: details.height,
    } as PersonVariant;
}

注意：该方法会绕过TypeScript的类型校验，若后续修改PersonVariant或守卫逻辑，可能引入隐性错误，仅在逻辑绝对可靠时使用。

方案3：利用const断言缩小字面量类型 #

通过立即执行函数结合as const断言，让TypeScript推导更精确的字面量类型：

function test() {
    const variant: PersonVariant = (() => {
        const { gender, height } = details;
        if (gender === 'man' && height === 'short') {
            return null; // 或抛出错误、提前返回
        }
        return { gender, height } as const;
    })()!; // 非空断言确保返回值不为null
}

as const会把对象属性锁定为字面量类型，结合守卫逻辑，TypeScript能确认返回值属于PersonVariant。

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