TypeScript中使用keyof访问属性报错，求原因与解决方法

报错原因 #

useMainInventoryStore函数当前的返回类型被推断为MainState[keyof MainState]，也就是{ eventName: string; } | { name: string; }的联合类型。由于函数没有通过泛型关联传入的key和返回值类型，TypeScript无法根据你传入的具体key（比如'selectedProduction'）来窄化返回值的类型。当你尝试访问eventName时，因为联合类型中的{ name: string; }不存在该属性，所以触发报错。

解决方法 #

1. 给函数添加泛型约束 #

修改useMainInventoryStore的定义，通过泛型将传入的key与返回值类型绑定：

export const useMainInventoryStore = <K extends keyof MainState>(key: K) => state.mainSlice[key]

这样TypeScript会根据你传入的具体key自动推断返回值的精确类型，比如传入'selectedProduction'时，返回类型会被确定为{ eventName: string; }，此时访问eventName就不会报错。

2. 移除冗余类型定义 #

代码中的ObjectWithMatchingProperties<T>类型完全等价于T本身（只是遍历了T的所有键并复制对应值类型），可以直接移除，简化代码：

// 移除冗余类型
// type ObjectWithMatchingProperties<T> = {
//     [K in keyof T]: T[K];
// };

type MainState = {
  selectedProduction: {
    eventName: string
  }
  activePricingGroup: {
    name: string
  }
}
// 直接使用MainState替代MainStateObj
type InventoryState = {
  mainSlice: MainState;
};

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