# 高级类型之索引类型、映射类型
我们从本节开始进入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 取属性名:
