TypeScript - 索引访问类型

在 TypeScript 中，Indexed access types（索引访问类型）也被称为 lookup types（查找类型）。它用于访问另一个类型的属性的类型。这是一种强大的方式，有助于访问复杂类型结构的类型属性。此功能允许您更有效地使用类型系统，确保在涉及属性访问和操作的场景中具有类型安全性。

语法

您可以遵循以下语法在 TypeScript 中使用索引访问类型。

type new_type = existing_type[key];

• 在上述语法中，'type' 是定义新类型的关键字。

• 'existing_type' 是一个已存在的类型。

• 'key' 是 existing_type 的一个属性，我们需要获取其类型。

示例

让我们通过一些 TypeScript 中的示例来理解索引访问类型。

示例：访问对象属性类型

当你需要获取现有类型中特定属性的类型时，索引访问类型非常有用。

在下面的代码中，我们定义了 User 类型，其中包含 number 类型的 id 和 age 属性，以及 string 类型的 name 属性。

User['name'] 用于访问 User 类型中 'name' 属性的类型，该类型为 string。

接下来，我们定义了 userName 变量，其类型为 'UserNameType' (string)。如果你尝试将 number 赋值给 userName 变量，将会抛出错误。

type User = {
    id: number;
    name: string;
    age: number;
};

// 从 User 中访问 'name' 属性的类型
type UserNameType = User['name'];  // 类型为 string

let userName: UserNameType;
userName = "Alice";  // 正确
console.log(userName);  // Alice

// userName = 123;   // 错误: Type 'number' is not assignable to type 'string'.

编译后，将生成以下 JavaScript 代码。

let userName;
userName = "Alice"; // 正确
console.log(userName); // Alice
// userName = 123;   // 错误: Type 'number' is not assignable to type 'string'.

输出

Alice

示例：访问嵌套对象属性类型

当你需要获取复杂类型结构中任意属性的类型时，索引访问类型更加有用。

在下面的代码中，'Product' 类型具有 id 和 details 属性。details 属性是一个嵌套类型，包含 name 和 price 属性。

我们使用 Product['details']['price'] 来访问 details 属性中 'price' 属性的类型，该类型为 number。

type Product = {
    id: number;
    details: {
        name: string;
        price: number;
    };
};

// 访问嵌套 'price' 属性的类型
type ProductPriceType = Product['details']['price'];  // 类型为 number

let price: ProductPriceType;
price = 19.99;  // 正确用法
console.log(price);  // 输出: 19.99

// price = "20.00"; // 错误: Type 'string' is not assignable to type 'number'.

编译后，将生成以下 JavaScript 代码。

let price;
price = 19.99; // 正确用法
console.log(price); // 输出: 19.99
// price = "20.00"; // 错误: Type 'string' is not assignable to type 'number'.

输出

19.99

示例：与索引访问类型结合使用 keyof 操作符

这个示例类似于第一个示例。这里，我们使用了 'keyof' 操作符来访问 User 类型的所有键。

当你将 keyof 操作符与类型结合使用，并将其作为索引值时，它会获取对象所有属性的联合类型。这里，'keyof User' 给我们提供了 number | string，这是 User 类型所有属性的类型。

type User = {
    id: number;
    name: string;
    age: number;
};

// 从 User 中访问 'name' 属性的类型
type UserNameType = User[keyof User];  // 类型为 number | string

let userName: UserNameType;
userName = "Hello";  // 正确用法
console.log(userName);  // 输出: Hello

userName = 123;   // 正确用法
console.log(userName);  // 输出: 123

编译后，将生成以下 JavaScript 代码。

let userName;
userName = "Hello"; // 正确用法
console.log(userName); // 输出: Hello
userName = 123; // 正确用法
console.log(userName); // 输出: 123

输出

Hello
123

示例：与数组结合使用索引访问

当你想要访问数组元素的类型时，可以使用 'number' 作为索引。

在下面的代码中，我们定义了 StringArray 类型，其中包含 string 数组。

'StringArray[number]' 获取数组元素的类型，该类型为 string。

type StringArray = string[];
// 访问数组元素的类型
type ElementType = StringArray[number];  // 类型为 string

let element: ElementType;
element = "Hello";  // 正确用法
console.log(element);

// element = 123;    // 错误: Type 'number' is not assignable to type 'string'.

编译后，将生成以下 JavaScript 代码。

let element;
element = "Hello"; // 正确用法
console.log(element);
// element = 123;    // 错误: Type 'number' is not assignable to type 'string'.

输出

Hello

通过这种方式，你可以使用索引访问类型来访问现有类型的属性类型。你也可以使用 'number' 属性来访问数组元素的类型。