TypeScript学习总结（15）

映射类型

映射类型：基于旧类型创建新类型(对象类型)，减少重复、提升开发效率。

比如，类型PropKeys有x/y/z，另一个类型Type1中也有x/y/z，并且Type1中x/y/z的类型相同:

type PropKeys = 'x' | 'y' | 'z'
type Type1 = { x: number, y: number, z: number }

这样书写没错，但x/y/z重复书写了两次。像这种情况，就可以使用映射类型来进行简化。

type PropKeys = 'x' | 'y' | 'z'
type Type2 = {
    [key in PropKeys]: number
}

解释:
1.映射类型是基于索引签名类型的，所以，该语法类似于索引签名类型，也使用了[ ]。 
2.Key in PropKeys 表示 Key 可以是 PropKeys 联合类型中的任意一个，类似于forin(let k in obj)。3.使用映射类型创建的新对象类型Type2和类型Type1结构完全相同。
4.注意:映射类型只能在类型别名中使用，不能在接口中使用。

映射类型除了根据联合类型创建新类型外，还可以根据对象类型来创建:

type Props = { a: number; b: string; c: boolean }
type Type3 = {[key in keyof Props]: number}

 解释:
1.首先，先执行keyof  Props 获取到对象类型 Props 中所有键的联合类型即，'a' |'b'|'c'

2.然后，Keyin.. 就表示Key 可以是 Props 中所有的键名称中的任意一个。

实际上，前面讲到的泛型工具类型(比如，Partial<Type>)都是基于映射类型实现的。

比如，Partial<Type>的实现:

type Partial<T> = {
    [P in keyof T]?: T[P];
};
type Props = {
    a: number;
    b: string;
    c: boolean;
}
type PartialProps = Partial<Props>

 解释:
1.keyof T 即 keyof Props 表示获取 Props 的所有键，也就是:'a'|'b'|'c'。
2在[ ]后面添加?(问号)，表示将这些属性变为可选的，以此来实现Partial的功能。
3.冒号后面的 T[P]表示获取T中每个键对应的类型。比如，如果是'à'则类型是 number;如果是"b'则类型是 string。
4.最终，新类型 PartialProps 和旧类型Props 结构完全相同，只是让所有类型都变为可选了。

刚刚用到的T[P]语法，在TS 中叫做索引查询(访问)类型。
作用：用来查询属性的类型。

type Props = {
    a: number;
    b: number;
    c: boolean;
}
type TypeA = Props['a']

解释:Props['a']表示查询类型 Props 中属性'a'对应的类型number。所以，TypeA的类型为 number。
注意:[ ]中的属性必须存在于被查询类型中，否则就会报错。

索引查询类型的其他使用方式:同时查询多个索引的类型

type Props = {
    a: number;
    b: number;
    c: boolean;
}
type TypeA = Props['a' | 'b']// number
type TypeB = Props[keyof Props] // number | boolean

 解释:

使用字符串字面量的联合类型，获取属性a和b对应的类型，结果为:number。使用 keyof操作符获取Props 中所有键对应的类型，结果为:string | number | boolean。