实现键值类型推断函数时，TypeScript为何无法窄化值类型？

我在实现一个基于键推断值类型的通用format函数时遇到了类型窄化问题：

首先定义键值映射的对象类型：

type Value = {
  str: string;
  num: number;
};

尝试实现的通用format函数如下：

const format = <K extends keyof Value>(key: K, value: Value[K]): string => {
  if (key === 'str') {
    // @ts-expect-error -- Property 'split' does not exist on type 'string | number'
    return value.split('').join('');
  }
  if (key === 'num') {
    // @ts-expect-error -- The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type
    return `${value - 1}`;
  }
  return '';
};

但TypeScript无法在if条件中窄化value的类型，这是为什么？

我有一个可行的替代方案，但函数签名不太方便：

type Value =
  | ['str', string]
  | ['num', number];

const format = (...[key, value]: Value): string => {
  if (key === 'str') {
    return value.split('').join('');
  }
  if (key === 'num') {
    return `${value - 1}`;
  }
  return '';
};

类型无法窄化的原因 #

TypeScript处理泛型参数K时，无法将key的具体值和value的类型建立绑定关联。K是keyof Value的子类型，但它属于范围类型——当你判断key === 'str'时，TypeScript不会自动将K收缩为'str'，因此value的类型仍然是Value[K]，而非确定的string，因为K理论上仍可能包含其他键的联合类型，TypeScript无法确认此时value的具体类型。

而你用的联合元组替代方案中，元组的两个元素是绑定在一起的：每个分支都是完整的键值对组合，TypeScript可以通过元组的结构类型自动完成类型窄化，当key是'str'时，能直接推断value是string。

保留原函数签名的优雅解决方法 #

如果想保留(key: K, value: Value[K])的函数签名，可以通过以下方式实现类型窄化：

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

手动建立key和value的类型关联：

type Value = {
  str: string;
  num: number;
};

function isStrPair(key: keyof Value, value: Value[keyof Value]): value is Value['str'] {
  return key === 'str';
}

function isNumPair(key: keyof Value, value: Value[keyof Value]): value is Value['num'] {
  return key === 'num';
}

const format = <K extends keyof Value>(key: K, value: Value[K]): string => {
  if (isStrPair(key, value)) {
    return value.split('').join('');
  }
  if (isNumPair(key, value)) {
    return `${value - 1}`;
  }
  return '';
};

方法2：使用对象参数绑定类型 #

将键值封装为对象参数，让TypeScript自动识别绑定关系：

type Value = {
  str: string;
  num: number;
};

// 生成包含键值绑定的联合类型
type FormatArgs = { [K in keyof Value]: { key: K; value: Value[K] } }[keyof Value];

const format = ({ key, value }: FormatArgs): string => {
  if (key === 'str') {
    return value.split('').join('');
  }
  if (key === 'num') {
    return `${value - 1}`;
  }
  return '';
};

// 调用示例
format({ key: 'str', value: 'test' });
format({ key: 'num', value: 123 });

这种方式既保留了类型安全，又能让TypeScript自动完成类型窄化，调用方式也更直观。

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