TypeScript为何无法在控制流中基于收窄的keyof收窄值类型？

我正在尝试理解TypeScript在以下示例中的类型收窄处理逻辑：

type ValueMapping = {
    a: number;
    b: string;
}

type ReturnTypeMapping = {
    a: number;
    b: string;
}

export function example1 (
  key: keyof ValueMapping,
  value: ValueMapping[typeof key]
): ReturnTypeMapping[typeof key] {

    if(key === 'a') {
        key          // key: 'a' ✔️ - 已收窄
        key === 'b'  // 类型错误 ✔️
        value        // value: string | number ❌ - 期望收窄为`number`
        return 3     // 无错误 ❌ - 期望返回类型收窄并报错
    }

    return 3;        // 无错误 ❌ 
}

export function example2<T extends keyof ValueMapping> (
  key: T,
  value: ValueMapping[T]
): ReturnTypeMapping[T] {

    if(key === 'a') {
        key          // key: T extends keyof ValueMapping ❌ - 未收窄
        key === 'b'  // 无错误 ❌
        value        // value: ValueMapping[T] ❌ - 期望收窄为`number`
        return 3     // 错误 ❌ - "Type '3' is not assignable to type 'never'"
    }
    
    return 3;        // 错误 ❌ - "Type '3' is not assignable to type 'never'"
}

我的预期是在if代码块内，key、value及返回类型应收窄为：

key: 'a'
value: 'number'
return: 'number'

问题分析 #

example1的问题 #

example1中key能被收窄为'a'，但value和返回类型无法同步收窄。这是因为TypeScript无法将key的收窄结果关联到ValueMapping[typeof key]和ReturnTypeMapping[typeof key]上——虽然代码块内typeof key实际为'a'，但TypeScript不会自动推导该类型别名的具体值，导致value仍被识别为string | number，返回值也未被约束为number。

example2的问题 #

example2使用泛型T后，TypeScript对泛型的收窄支持有限。判断key === 'a'时，TypeScript无法将泛型T收窄为'a'（因为T可能是keyof ValueMapping的任意子集），因此key仍被视为T，value保持ValueMapping[T]，返回值无法匹配ReturnTypeMapping[T]，最终报错。

实现预期的方法 #

要实现if块内的类型同步收窄，可以通过以下几种方式让TypeScript明确关联key和value的类型：

方法1：自定义类型守卫函数 #

定义类型守卫，明确判断key和value是否匹配'a'对应的类型：

type ValueMapping = {
    a: number;
    b: string;
}

type ReturnTypeMapping = {
    a: number;
    b: string;
}

function isKeyA(key: keyof ValueMapping, value: ValueMapping[keyof ValueMapping]): value is ValueMapping['a'] {
    return key === 'a';
}

export function example3(
  key: keyof ValueMapping,
  value: ValueMapping[typeof key]
): ReturnTypeMapping[typeof key] {

    if(isKeyA(key, value)) {
        key          // key: 'a' ✔️
        value        // value: number ✔️
        return 3     // 无错误，符合返回类型number ✔️
    }

    // 处理key为'b'的情况
    return 'hello' as ReturnTypeMapping[typeof key];
}

方法2：断言式函数（TypeScript 3.7+） #

通过断言式函数强制收窄key的类型，同步关联value：

type ValueMapping = {
    a: number;
    b: string;
}

type ReturnTypeMapping = {
    a: number;
    b: string;
}

function assertKeyIsA(key: keyof ValueMapping): asserts key is 'a' {
    if(key !== 'a') throw new Error('Key is not "a"');
}

export function example4(
  key: keyof ValueMapping,
  value: ValueMapping[typeof key]
): ReturnTypeMapping[typeof key] {

    if(key === 'a') {
        assertKeyIsA(key);
        key          // key: 'a' ✔️
        value        // value: number ✔️
        return 3     // 无错误 ✔️
    }

    return 'hello' as ReturnTypeMapping[typeof key];
}

方法3：包装为联合类型对象 #

将key和value包装成联合类型对象，利用TypeScript对对象字面量的自动收窄能力：

type ValueMapping = {
    a: number;
    b: string;
}

type ReturnTypeMapping = {
    a: number;
    b: string;
}

// 定义包含key和value的联合类型
type Entry = { [K in keyof ValueMapping]: { key: K, value: ValueMapping[K] } }[keyof ValueMapping]

export function example5(entry: Entry): ReturnTypeMapping[typeof entry.key] {

    if(entry.key === 'a') {
        entry.key    // key: 'a' ✔️
        entry.value  // value: number ✔️
        return 3     // 无错误 ✔️
    }

    return 'hello';
}

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