如何在TypeScript中定义依赖变量类型？解决关联类型匹配错误

你遇到的问题是TypeScript无法自动关联mode和onChange参数的类型，因为泛型接口的条件类型在函数内部无法被正确窄化。可以通过定义联合类型来解决这个问题，让每个mode值对应明确的onChange参数类型：

正确实现代码 #

type FnParams = 
  | { mode: 'a'; onChange: (value: string) => void }
  | { mode: 'b'; onChange: (value: number) => void };

const fn = ({ mode, onChange }: FnParams) => {
  if (mode === 'a') {
    onChange('string'); // 类型检查通过
  }
  if (mode === 'b') {
    onChange(123); // 类型检查通过
  }
};

fn({
  mode: 'b',
  onChange: value => value // value自动推断为number类型
});

原实现出错原因 #

之前的泛型接口写法中，FnParams<T>是单一泛型类型，未指定泛型参数时默认是FnParams<'a'>，所以传入mode: 'b'会直接报错。即使指定了泛型参数，函数内部TypeScript也无法根据mode的取值窄化onChange的参数类型——因为泛型参数是一个整体，不是联合类型的独立成员。

改用联合类型后，TypeScript可以通过mode的取值自动窄化当前对象的类型，从而正确匹配onChange的参数类型。

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