如何強制執行Typescript物件的索引成員類型

程式語言TypeScript是基於JavaScript的，它是強型別、物件導向和編譯型的。語言透過靜態類型、類別和介面等工具進行改進，有助於早期錯誤偵測，並使JavaScript更易於管理。 TypeScript的一個特性是能夠強制執行物件的索引成員的類型，而這個過程也被稱為索引簽名。

索引簽章是一組描述物件可能具有的許多屬性的鍵值對。分別使用值和鍵指定屬性名稱的類型和屬性值的類型。為了強制物件屬性的種類，使用者可以利用TypeScript的索引簽名功能。

索引簽章可以有效強制某些物件屬性，但也可能使程式碼難以理解和維護。因此，在必要時才使用索引簽名是非常重要的。

文法

let objectName: {
   [key: string]: string
}

在上述語法中，'objectName'是我們物件的名稱，並且我們強制鍵的類型為字串，值為字串。

Example 1

在這個例子中，我們有兩個接口，Person和PhoneBook。 Person介面定義了一個人物件的結構，包括兩個屬性：name（字串）和age（數字）。 PhoneBook介面定義了一個索引簽名，使用字串類型作為鍵，Person介面作為值。這意味著實現PhoneBook介面的任何物件只能具有鍵類型為字串、值類型為Person的屬性。

接著我們定義了一個變數phoneBook，類型為PhoneBook，並且賦值為空物件。然後我們在電話簿中新增一些條目，其中鍵應該是姓名，值應該是Person物件。最後，我們透過console log來驗證，如果我們嘗試放入除了上述類型之外的任何其他類型的變量，編譯器將會報錯。

// Person interface
interface Person {
   name: string
   age: number
}

// PhoneBook interface
interface PhoneBook {
   [key: string]: Person
}

let phoneBook: PhoneBook = {}

phoneBook['Person 1'] = { name: 'ABC', age: 30 }
phoneBook['Person 2'] = { name: 'XYZ', age: 25 }
phoneBook['Person 3'] = { name: 'MNO', age: 10 }

console.log(phoneBook)

在編譯時，它將產生以下的JavaScript程式碼−

var phoneBook = {};
phoneBook['Person 1'] = { name: 'ABC', age: 30 };
phoneBook['Person 2'] = { name: 'XYZ', age: 25 };
phoneBook['Person 3'] = { name: 'MNO', age: 10 };
console.log(phoneBook);

輸出 

上述程式碼將產生以下輸出 -

{ 'Person 1': { name: 'ABC', age: 30 },
  'Person 2': { name: 'XYZ', age: 25 },
  'Person 3': { name: 'MNO', age: 10 } }

範例2

在這個範例中，我們有一個介面 Product，它定義了一個具有兩個屬性的產品物件的結構：name（字串）和 price（數字）。然後我們有另一個介面 ShoppingCart，它表示一個索引簽名，使用數字類型作為鍵，Product 介面作為值。任何實作 ShoppingCart 介面的物件只能具有鍵類型為數字且值類型為 Product 的屬性。

然後我們定義一個類型為ShoppingCart的變數cart，並將一個空物件賦值給它。然後我們向購物車添加一些條目，其中鍵應該是產品id，值應該是產品對象。我們可以看到條目正確地添加到了購物車中，如果值不是Product類型或產品物件缺少Product介面中定義的任何屬性，則會發生錯誤。

interface Product {
   name: string
   price: number
}

// ShoppingCart interface
interface ShoppingCart {
   [key: number]: Product
}

let cart: ShoppingCart = {}

cart[1] = { name: 'Shirt', price: 20 }
cart[2] = { name: 'Pants', price: 30 }
cart[3] = { name: 'Shoes', price: 40 }

console.log(cart[1])
console.log(cart[2])
console.log(cart[3])

在編譯時，它將產生以下的JavaScript程式碼−

var cart = {};
cart[1] = { name: 'Shirt', price: 20 };
cart[2] = { name: 'Pants', price: 30 };
cart[3] = { name: 'Shoes', price: 40 };
console.log(cart[1]);
console.log(cart[2]);
console.log(cart[3]);

輸出 

上述程式碼將產生以下輸出 -

{ name: 'Shirt', price: 20 }
{ name: 'Pants', price: 30 }
{ name: 'Shoes', price: 40 }

這些範例說明如何使用索引簽章來強制物件的屬性類型。索引簽名是一個強大的功能，可以幫助您編寫更健壯和可維護的程式碼，但是重要的是要明智地使用它們，只在必要時使用。

以上是如何強制執行Typescript物件的索引成員類型的詳細內容。更多資訊請關注PHP中文網其他相關文章！