【TS】TypeScript 索引类型

文章目录

属性名索引

【数组】

索引查询类型

【查询多个属性】

---

索引类型就是使用属性名表达式的写法来描述类型。

属性名索引

场景：当无法确定对象中有哪些属性（或者说对象中可以出现任意多个属性）。

下面示例中，通过类型索引来创建对象，表达式 [key: string] 表示只要是 string 类型的属性名，都可以出现在对象中；其中 key 只是一个占位符，可以换成任意合法字符；: string 表示属性值必须是 string 类型。对象 obj 中可以出现任意多个 string 类型属性

// 使用类型索引定义对象
type MyObj = {
    [key: string]: string
};

let obj: MyObj = {
    a: 'a',
    b: 'b',
    c: 'c',
    name:'jack'
}

【数组】

在 JS 中数组是一类特殊的对象，数组的键（索引）是数值类型。并且，数组也可以出现任意多个元素。

// 使用类型索引定义数组
type myArr = {
    [n: number]: number;
}
// 用于定义数组
let arr1: myArr = [1, 2, 3, 4];
// 也可用于定义对象
let arr2: myArr = {
    1: 1,
    2: 2,
    3: 3,
    4: 4
}

在数组对应的泛型接口中，也用到了索引签名类型。

interface Array<T> {
    // ...
    [n: number]: T;
}

索引查询类型

语法： Tpye [ Props ] 

作用： 用来查询属性的类型

注意： [] 中的属性必须存在于被查询类型中

下面示例中，Types['a'] 表示查询类型 Types 中属性 'a' 对应的类型，并返回其类型。属性 'a' 的类型为 number ，所以，Type1 的类型为 number。

type Types = { a: number; b: string; c: boolean }
// 使用索引查询类型
type Prop1 = Types['a']; // number
type Prop2 = Types['b']; // string

【查询多个属性】

下面示例中，Types['a' | 'b'] 表示查询类型 Types 中属性 'a' 和属性 'b' 对应的类型，并返回有他们类型组成的联合类型。所以，Type1 的类型为联合类型 string | number。

type Types = { a: number; b: string; c: boolean }
// 索引查询多个属性
type Prop1 = Types['a' | 'b']; // string | number
type Prop2 = Types[keyof Types]; // string | number | boolean

TypeScript 教程——阮一峰·著

TypeScript 中文网

TypeScript 官网