TypeScript索引

4.5 索引签名类型

绝大多数情况下，我们都可以在使用对象前就确定对象的结构，并为对象添加准确的类型。

使用场景:当无法确定对象中有哪些属性(或者说对象中可以出现任意多个属性)，此时，就用到索引签名类型了。

interface AnyObject {
    [key: string]: number
}

let obj: AnyObject = {
    a: 1, b: 2
}

解释:

1. 使用[key: string]来约束该接口中允许出现的属性名称。表示只要是string类型的属性名称，都可以出现在对象中。
2. 这样，对象 obj中就可以出现任意多个属性(比如，a、b等)。
3. key 只是一个占位符，可以换成任意合法的变量名称。
4. 隐藏的前置知识: JS 中对象(0)的键是 string类型的。

在 JS 中数组是一类特殊的对象，特殊在数组的键(索引)是数值类型。

并且，数组也可以出现任意多个元素。所以，在数组对应的泛型接口中，也用到了索引签名类型。

interface MyArray<T> {
    [n: number]: T
}

let arr: MyArray<number> = [1, 3, 5]

解释:

1. MyArray 接口模拟原生的数组接口，并使用[n:number] 来作为索引签名类型。
2. 该索引签名类型表示:只要是number类型的键(索引)都可以出现在数组中，或者说数组中可以有任意多个元素。
3. 同时也符合数组索引是 number类型这一前提。

4.6 映射类型

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

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

type PropKeys = 'x' | 'y' | 'z'

type Type = { x: number; y: number; z: number }

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

type PropKeys = 'x' | 'y' | 'z'

type Type2 = { [key in PropKeys]: number }

//无法使用
interface Type3 {
    [key in PropKeys]: number
}

解释:

1. 映射类型是基于索引签名类型的，所以，该语法类似于索引签名类型，也使用了[]。
2. Key in PropKeys 表示 Key 可以是 PropKeys 联合类型中的任意一个，类似于forin(let k in obj)。
3. 使用映射类型创建的新对象类型Type2 和类型 Type 结构完全相同。
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 中所有的键名称中的任意一个。
3. 这里对象的属性类型都会变成number。

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

比如，Partial的实现:

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中每个键对应的类型。比如，如果是'a'则类型是number;如果是'b'则类型是 string。
4. 最终，新类型 PartialProps 和旧类型Props 结构完全相同，只是让所有类型都变为可选了。

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

作用:用来查询属性的类型，

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

解释:Props['a’]表示查询类型 Props 中属性'a'对应的类型number。所以，TypeA的类型为 number。

注意:[]中的属性必须存在于被查询类型中，否则就会报错。

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

type Props = { a: number; b: string; c: boolean }

type TypeB = Props['a'|'b']    // string | number

解释:使用字符串字面量的联合类型，获取属性a和b对应的类型，结果为:string | number。

type TypeA = Propss[keyof Propss]   // string | number | boolean

解释:使用keyof 操作符获取 Props 中所有键对应的类型，结果为:string|number l boolean。