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' 屬性來訪問陣列元素的型別。

列印頁面