【TypeScript 高级应用】索引类型与索引操作符

pluck() 函数用于从对象中提取指定属性值：

function pluck(obj, names) {
  return names.map((n) => obj[n]);
}

pluck({ name: "222", age: 11 }, ["name"]); // ['222']

对于这个函数，期望中的 names 的取值范围是 Object.keys(obj)，可以利用索引类型在 ts 中实现这个函数。

function pluck<T, K extends keyof T>(o: T, names: Array<K>): Array<T[K]> {
  return names.map((n) => o[n]);
}

const obj = { name: "222", age: 11 };

pluck(obj, ["name", "color"]); // obj 中不存在 color 属性，编译器报错

这样实现之后，在填写二参时编译器会给出可选值提示，可选值为 obj 上的 key。

这里使用了两个类型操作符：

• keyof 索引类型查询操作符

对于任何类型 T， keyof T 的结果为 T 上已知的公共属性名的联合。 例如：

interface Person {
  name: string;
  age: number;
}
let personProps: keyof Person; // 'name' | 'age'

这里 K 的类型定义为 K extends keyof T、Array<K>，相当于 K: 'name' | 'age'。

• T[K] 索引访问操作符

K 的类型是 T 上已知的公共属性名的联合，T[K] 则相当于访问 T 上的属性的类型，返回值类型为 Array<T[K]> 则表示返回值类型为 Array<number|string>。