TypeScript - 索引访问类型

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

语法

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

type new_type = existing_type[key];

在以上语法中，'type' 是一个用于定义新类型的关键字。
'existing_type' 是一个已存在的类型。
“key”是 existing_type 的一个属性，我们需要获取其类型。

示例

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

示例：访问对象属性类型

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

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

User['name'] 用于访问 User 类型 'name' 属性的类型，即字符串。

接下来，我们定义了 userName 变量，其类型为 'UserNameType'（字符串）。如果您尝试将数字分配给 userName 变量，它将抛出错误。

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

// Access the type of 'name' property from User
type UserNameType = User['name'];  // type is string

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

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

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

let userName;
userName = "Alice"; // Ok
console.log(userName); // Alice
// userName = 123;   // Error: Type 'number' is not assignable to type 'string'.

输出

Alice

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

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

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

我们使用 Product['details']['price'] 来访问 'details' 属性的 'price' 属性的类型，它是一个数字。

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

// Access the type of the nested 'price' property
type ProductPriceType = Product['details']['price'];  // type is number

let price: ProductPriceType;
price = 19.99;  // Correct usage
console.log(price);  // Output: 19.99

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

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

let price;
price = 19.99; // Correct usage
console.log(price); // Output: 19.99
// price = "20.00"; // Error: 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;
};

// Access the type of 'name' property from User
type UserNameType = User[keyof User];  // type is number | string

let userName: UserNameType;
userName = "Hello";  // Correct usage
console.log(userName);  // Output: Hello

userName = 123;   // Correct usage
console.log(userName);  // Output: 123

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

let userName;
userName = "Hello"; // Correct usage
console.log(userName); // Output: Hello
userName = 123; // Correct usage
console.log(userName); // Output: 123

输出

Hello
123

示例：使用数组进行索引访问

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

在下面的代码中，我们定义了 StringArray 类型，它包含字符串的数组。

'StringArray[number]' 获取数组元素的类型，即字符串。

type StringArray = string[];
// Access the type of an array element
type ElementType = StringArray[number];  // type is string

let element: ElementType;
element = "Hello";  // Correct usage
console.log(element);

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

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

let element;
element = "Hello"; // Correct usage
console.log(element);
// element = 123;    // Error: Type 'number' is not assignable to type 'string'.

输出

Hello

这样，您可以使用索引访问类型访问现有类型的属性类型。您还可以使用 'number' 属性来访问数组元素的类型。

打印页面