TypeScript对象映射为数组时如何正确获取对应属性的类型

可优化点 #

• 冗余的自定义getValue函数：TS原生支持索引访问类型T[K]，可以直接通过对象[键]的写法自动推断出对应值的类型，不需要额外封装函数、手动传入泛型参数。
• 硬编码的switch分支：你当前是遍历User的所有key做聚合，完全不需要逐个判断key写分支，只要做好key的类型收窄就能直接通用赋值。
• 缺失类型标注：User变量没有绑定IUser类型，会导致后续类型推断丢失基准。
• 没有处理Object.keys的默认类型问题：TS里Object.keys默认返回string[]是结构化类型设计导致的，我们可以通过类型断言把key收窄为keyof IUser就能解决类型不匹配的问题。

优化后完整代码 #

type IUser = {
  name: string;
  age: number;
}

// 给User绑定IUser类型，作为类型推断的基准
const User: IUser = {
  name: 'test',
  age: 12
}

const result = Object.keys(User).reduce<IUser>((prev, key) => {
  // 直接把key收窄为IUser的合法键，后续自动推断对应值类型
  const typedKey = key as keyof IUser;
  // 直接取值，TS会自动推断value的类型为IUser[typeof typedKey]，和对应字段类型完全匹配
  const value = User[typedKey];
  return { ...prev, [typedKey]: value };
}, { age: 0, name: "" });

通用类型工具封装 #

如果你只需要在类型层面通过key取关联类型，不需要运行时逻辑，可以直接封装通用工具类型：

// 通用的根据对象类型和键取对应值类型的工具类型
type ValueTypeByKey<T, K extends keyof T> = T[K];

// 用法示例：拿到IUser中name的类型string
type UserNameType = ValueTypeByKey<IUser, 'name'>;

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