TypeScript中keyof关键字在特定示例中的工作原理解析

先看定义的类型：

export type ActionsMap = {
  add: Function;
  remove: Function;
};

接着定义了用于React reducer的action类型：

export type Actions = {
  [Key in keyof ActionsMap]: {
    type: Key;
    payload: ActionsMap[Key];
  };
}[keyof ActionsMap];

你已经理解前半部分的映射会生成这样的对象类型：

{
  add: {
    type: "add",
    payload: Function
  },
  remove: {
    type: "remove",
    payload: Function
  },
}

但疑惑最后的[keyof ActionsMap]是怎么把上面的对象类型转成下面的联合类型的：

{ type: "add", payload: Function } | { type: "remove", payload: Function }

这是TypeScript的索引访问类型特性：当你用一个联合类型作为索引去访问某个对象类型时，会返回该对象中对应所有索引的属性类型组成的联合类型。

拆解来看：

1. keyof ActionsMap的结果是联合类型 "add" | "remove"
2. 用这个联合类型去索引前面的映射对象类型，相当于同时取对象中add和remove两个属性的类型，然后把这两个类型合并成联合类型。

换句话说，Obj[keyof Obj]这种写法，本质就是把对象Obj的所有属性值的类型“打平”成一个联合类型。放到你的例子里，就是把add对应的类型和remove对应的类型取出来，组合成{type:"add",...} | {type:"remove",...}。

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