TypeScript中如何访问可能不存在对应键的对象属性值

解决方案 #

这里提供3种不同适配场景的修复方式： #

方案1：显式声明handlerMap类型（最推荐，常规场景通用） #

直接告诉TypeScript handlerMap 是所有合法action type为可选键、值为对应处理函数的对象，匹配你「只声明部分处理函数、剩余直接返回原state」的设计逻辑：

// 定义handlerMap时加上类型标注
const handlerMap: Partial<Record<IAction['type'], (state: IAppState, action: IAction) => IAppState>> = {
  [actionTypes.updateVersion]: handleVersionUpdate,
};

Partial 标识所有键都是可选的，访问不存在的键时返回类型天然是 处理函数 | undefined，完美适配你后续的非空判断逻辑，同时还保留了类型校验：新增处理函数时TS会自动检查你写的action type是否合法、处理函数的入参返回值是否符合要求。 #

方案2：类型断言快速修复（适合临时快速解决报错场景） #

如果你不想改动handlerMap的声明，可以在索引取值时直接断言类型：

// 仅修改取值这一行即可
const handler = handlerMap[action.type as keyof typeof handlerMap];

这个方案的缺点是没有类型校验，如果后续新增的action type在handlerMap里没有声明，TS不会给出任何提示。 #

方案3：类型谓词实现更严格的类型收窄（适合对类型安全要求高的场景） #

如果你希望完全避免隐式any、同时实现action类型的自动收窄，可以额外加一个类型谓词工具函数判断键是否存在：

// 通用工具函数，判断指定key是否属于目标对象
function hasKey<K extends string>(obj: Record<K, unknown>, key: string): key is K {
  return Object.prototype.hasOwnProperty.call(obj, key);
}

// 改造reducer里的判断逻辑
export default function appReducer(
  state: IAppState,
  action: IAction,
): IAppState {
  if (hasKey(handlerMap, action.type)) {
    const handler = handlerMap[action.type];
    return handler(state, action);
  }
  return state;
}

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