TypeScript中keyof typeof定义的类型为何无法接收Object.keys返回值

问题产生原因 #

TypeScript 中 Object.keys() 的返回值类型默认被定义为 string[]，这是 TypeScript 类型系统的有意设计：因为 JavaScript 对象允许存在类型定义之外的额外动态属性，TS 无法保证运行时拿到的键完全匹配你定义的对象类型的键集合，所以不会自动把返回值收窄为 (keyof T)[] 类型，因此直接赋值给 SportsTypes[] 类型的变量会触发类型不匹配报错。

解决方法 #

方法1：直接使用类型断言 #

如果你能确定运行时 SportsIcons 不存在额外的未定义属性，直接加类型断言告诉 TS 你明确知道返回值类型即可：

export type SportsTypes = keyof typeof SportsIcons
export const sports: SportsTypes[] = Object.keys(SportsIcons) as SportsTypes[];

方法2：封装通用类型安全工具函数 #

如果需要频繁获取对象的类型化键列表，可以封装一个通用工具函数复用：

// 全局复用的工具函数
function getTypedKeys<T extends object>(obj: T) {
  return Object.keys(obj) as Array<keyof T>;
}

// 业务代码使用
export type SportsTypes = keyof typeof SportsIcons
export const sports: SportsTypes[] = getTypedKeys(SportsIcons);

注意：两种方案都依赖你保证运行时 SportsIcons 的实际属性和 TypeScript 层面的类型定义完全一致，如果存在额外属性会有类型安全隐患，常规业务场景下只要你的对象是静态定义的，都可以放心使用。

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