TypeScript如何实现函数中对象、键及对应值参数的强类型关联校验

原有代码无法正常工作的本质原因是没有遵循TS的类型定义规则：

• 在函数参数的类型标注位置，直接将形参变量obj作为类型引用，TS无法识别这类非类型定义形式的语法，因此触发无明确提示的编译报错
• 没有通过泛型建立三个参数之间的类型关联，无法实现“新值参数的类型自动匹配选中键的属性类型”的严格校验
• 临时将newValue设为any虽然能消除报错，但会完全绕开类型检查，丢失TS的校验能力

要实现全链路的严格类型校验，需要给函数补充两个泛型参数，把对象类型、键类型在泛型层做绑定：

function someOperation<
  Obj extends object,
  Key extends keyof Obj
>(
  obj: Obj,
  key: Key,
  newValue: Obj[Key]
) {
  // 读取原属性值执行业务逻辑
  const originalValue = obj[key];
  // 基于原值写自定义操作代码
  // 写入新值
  obj[key] = newValue;
}

结合示例场景测试运行：

const obj = { a: 'hello', b: 2 };

// 类型完全匹配，正常通过编译
someOperation(obj, 'a', 'goodbye');
console.log(obj); // 输出 { a: 'goodbye', b: 2 }

// 类型不匹配时，TS直接抛出编译报错
// 错误示例1：a键对应属性类型是string，传入数字123不符合要求
someOperation(obj, 'a', 123);
// 错误示例2：b键对应属性类型是number，传入字符串不符合要求
someOperation(obj, 'b', 'type-mismatch');

这种泛型关联写法是TS中处理同对象属性读写场景的标准实现，具备以下特性：

• 从根源建立三个参数的类型绑定关系，不存在类型校验漏洞
• Key extends keyof Obj 约束保证传入的键一定是目标对象上的合法属性，避免传入不存在的键名
• Obj[Key] 是TS原生的索引访问语法，会根据前两个参数的实际推导结果，自动匹配对应属性的类型，调用时IDE会自动给出newValue的类型提示
• 全程不需要使用any类型，完全保留严格模式下的类型检查能力

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