请解释 TypeScript 中的索引类型查询 (Indexed Access Types) 的语法和用法

推荐答案

// www.javascriptcn.com code example
type Person = {
  name: string;
  age: number;
  address: {
    city: string;
    zipCode: string;
  };
};

type NameType = Person['name']; // string
type AddressType = Person['address']; // { city: string; zipCode: string }
type CityType = Person['address']['city']; // string

本题详细解读

语法

索引类型查询（Indexed Access Types）允许你通过索引访问对象类型的属性类型。其语法如下：

Type[Key]

• Type 是一个对象类型或联合类型。
• Key 是一个字符串字面量类型或联合类型，表示要访问的属性名。

用法

1. 访问单个属性类型：可以通过索引类型查询来获取对象类型中某个属性的类型。

   type NameType = Person['name']; // string

2. 访问嵌套属性类型：可以通过链式索引访问嵌套对象的属性类型。

   type CityType = Person['address']['city']; // string

3. 访问联合类型的属性类型：如果 Type 是一个联合类型，索引类型查询会返回所有可能类型的联合。

   type PersonOrCompany = Person | Company;
   type NameOrCompanyName = PersonOrCompany['name']; // string | undefined

4. 动态访问属性类型：可以使用 keyof 操作符结合索引类型查询来动态访问属性类型。

   type Key = keyof Person; // "name" | "age" | "address"
   type ValueType = Person[Key]; // string | number | { city: string; zipCode: string }

索引类型查询在需要提取或操作对象类型的属性类型时非常有用，特别是在泛型和高级类型操作中。