# 高级类型之索引类型、映射类型

我们从本节开始进入TypeScript学习的进阶阶段，因为我们要大量接触类型编程了。

本节我们将会学习比较抽象的索引类型，这个高级类型虽然相对要难理解一些，但是配合上类型操作符可以做出很多有趣的事情。

# 索引类型

我们先看一个场景，现在我们需要一个 pick 函数，这个函数可以从对象上取出指定的属性，是的，就是类似于 lodash.pick 的方法。

在 JavaScript 中这个函数应该是这样的:

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

如果我们从一个 user 对象中取出 id ，那么应该这样:

const user = {
    username: 'Jessica Lee',
    id: 460000201904141743,
    token: '460000201904141743',
    avatar: 'http://dummyimage.com/200x200',
    role: 'vip'
}
const res = pick(user, ['id'])

console.log(res) // [ '460000201904141743' ]

那么好了，我们应该如何在 TypeScript 中实现上述函数？结合我们之前学到的知识，你会怎么做？

如何描述 pick 函数的第一个参数 o 呢?你可能会想到之前提到过的可索引类型，这个对象的 key 都是 string 而对应的值可能是任意类型，那么可以这样表示:

interface Obj {
    [key: string]: any
}

而第二个参数 names 很明显是个字符串数组，这个函数其实很容易就用 TypeScript 写出来了:

function pick(o: Obj, names: string[]) {
    return names.map(n => o[n]);
}

这样似乎没什么问题，但是如果你够细心的话，还是会发现我们的类型定义不够严谨：

• 参数 names 的成员应该是参数 o 的属性，因此不应该是 string 这种宽泛的定义，应该更加准确
• 我们 pick 函数的返回值类型为 any[]，其实可以更加精准，pick 的返回值类型应该是所取的属性值类型的联合类型

我们应该如何更精准的定义类型呢？

这里我们必须了解两个类型操作符：索引类型查询操作符和索引访问操作符。

# 索引类型查询操作符

keyof，即索引类型查询操作符，我们可以用 keyof 作用于泛型 T 上来获取泛型 T 上的所有 public 属性名构成联合类型。

举个例子，有一个 Images 类，包含 src 和 alt 两个 public 属性，我们用 keyof 取属性名：

class Images {
    public src: string = 'https://www.google.com.hk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'
    public alt: string = '谷歌'
    public width: number = 500
}

type propsNames = keyof Images