TypeScript中如何建立函数参数类型关联并解决推断问题

我有一个接受三个参数的函数：data、changedProp和newPropValue。changedProp应与newPropValue参数绑定，且两者都与data参数存在关联。

假设我们有Data类型：

interface Data {
  a: number,
  b: { x: number, y: number}
}

• 当changedProp为"a"时，newPropValue应为number类型。
• 当changedProp为"b"时，newPropValue应为{ x: number, y: number }类型。

为何下方示例中if语句内的newPropValue未被识别为{ x: number, y: number}类型？该如何实现正确的类型关联？

interface Data {
  a: number,
  b: { x: number, y: number}
}

export function getChangedDataByProperty<T extends Data>(
  data: T,
  changedProp: keyof T,
  newPropValue: T[keyof T]
): T {
  if (changedProp === "b") {
    return {
      ...data,
      b: { // 报错
        x: newPropValue.x, // 为何TypeScript无法识别newPropValue为{ x: number, y: number}类型？
        y: newPropValue.y,
      }
    }
  } else {
    return {
      ...data,
      x: newPropValue
    }
  }
}

原因 #

当前函数的类型定义里，changedProp是keyof T，newPropValue是T[keyof T]，两者之间没有建立类型关联。TypeScript只会将newPropValue判定为T["a"] | T["b"]的联合类型，无法推断出当changedProp为"b"时，newPropValue必然对应T["b"]的类型，自然不允许直接访问x和y属性。

另外，else分支里写死的x是笔误，应该对应传入的changedProp参数。

解决方法 #

要实现参数间的类型绑定，需要用泛型参数约束具体的键，让changedProp和newPropValue的类型通过同一个泛型参数关联起来。

修改后的代码如下：

interface Data {
  a: number,
  b: { x: number, y: number }
}

export function getChangedDataByProperty<T extends Data, K extends keyof T>(
  data: T,
  changedProp: K,
  newPropValue: T[K]
): T {
  if (changedProp === "b") {
    return {
      ...data,
      b: {
        x: newPropValue.x,
        y: newPropValue.y,
      }
    } as T;
  } else {
    return {
      ...data,
      [changedProp]: newPropValue
    };
  }
}

关键改动说明 #

1. 新增泛型参数K extends keyof T，用来绑定changedProp的具体键类型。
2. 将newPropValue的类型改为T[K]，使其类型和changedProp对应的键严格关联。
3. else分支使用计算属性[changedProp]赋值，避免原代码中固定键名的错误。
4. 在changedProp === "b"的分支里，TypeScript能正确推断newPropValue是T["b"]类型，允许访问x和y属性；用as T做类型断言，确保返回值符合泛型T的约束。

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