TypeScript遍历对象键时的值类型收窄解决方案

这个类型报错是TypeScript的已知设计限制：当使用联合类型的键（此处keyof Person为'firstName' | 'lastName' | 'age'联合类型）在同一代码块中多次索引结构匹配的映射类型时，TypeScript控制流分析不会跟踪键与对应值的绑定关系——它会将所有索引结果推导为所有可能值的联合，无法识别「同一个键对应的多个属性类型必然匹配」的逻辑，因此抛出类型不匹配错误。
比如示例代码中person[typedKey]会被推导为string | number | undefined，transformers[typedKey]会被推导为((v?: string) => string | undefined) | ((v?: number) => number)，TS判定存在将number传入字符串处理函数的可能性，因此拒绝赋值。

最类型安全、不需要ts-ignore的方案是利用泛型作用域绑定键和值的对应关系：把单个键的赋值逻辑封装到泛型参数约束为K extends keyof Person的函数里，在泛型作用域内TS可以正确识别同一个K对应的Person[K]、Update<Person[K]>、transformer函数类型是完全匹配的。

可直接运行的修复后代码 #

type Person = {
  firstName?: string
  lastName?: string
  age?: number
}

type Update<T> = {
  before: T,
  after: T,
}

type Updates = { [Key in keyof Person]: Update<Person[Key]> }

const transformers : {[Key in keyof Person]: (value: Person[Key]) => Person[Key]} = {
  firstName: value => value?.toUpperCase(),
  lastName: value => value?.toUpperCase(),
  age: value => typeof value === 'undefined'? 0 : value + 2
}

/**
 * 泛型辅助函数：在泛型作用域内锁定键K和对应值的类型关联
 */
function assignUpdateField<K extends keyof Person>(
  target: Updates,
  key: K,
  source: Person
) {
  const fieldValue = source[key]
  target[key] = {
    before: fieldValue,
    // 此处TS可正确推导transformers[key]的参数、返回值和fieldValue类型匹配
    after: transformers[key](fieldValue)
  }
}

function enrichPerson (person: Person): Updates {
  return Object.keys(person).reduce(
    (previousUpdates, key) => {
      const result = { ...previousUpdates }
      // 仅需做一次存在性校验，确认key是Person的合法字段
      if (key in transformers) {
        assignUpdateField(result, key as keyof Person, person)
      }
      return result
    },
    {} as Updates
  )
}

export {}

• 禁止在循环内部直接用多层类型断言或者ts-ignore绕过检查，后续修改Person字段类型时，这类写法不会触发类型报错，容易埋下线上bug。
• 如果不想抽离独立辅助函数，也可以在reduce回调中声明泛型内联类型守卫，但代码冗余度会比泛型封装更高。
• 遍历对象键时优先用key in obj做一次存在性校验，确认key是目标类型的合法字段，比直接将Object.keys返回值强转为(keyof Person)[]安全性更高。

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