如何在 TypeScript 物件中強制執行索引成員的型別
TypeScript 程式語言基於 JavaScript,並且是強型別、面向物件和編譯型的。該語言透過靜態型別、類和介面等工具得到了改進,有助於早期錯誤檢測並使 JavaScript 更易於管理。TypeScript 的一項功能是能夠強制執行物件索引成員的型別,此過程也稱為索引簽名。
索引簽名是一組鍵值對,描述了物件可能具有的許多屬性。分別使用值和鍵指定屬性名稱的型別和屬性值的型別。要強制執行物件屬性的型別,使用者可以使用 TypeScript 的索引簽名功能。
索引簽名可以有效地強制執行某些物件屬性,但它們也可能使程式碼難以理解和維護。因此,只有在必要時才使用索引簽名非常重要。
語法
let objectName: {
[key: string]: string
}
在上述語法中,“objectName”是我們的物件名稱,我們強制執行鍵型別為字串,值也為字串。
示例 1
在此示例中,我們有兩個介面,Person 和 PhoneBook。Person 介面定義了具有兩個屬性的人員物件的結構:name(字串)和 age(數字)。PhoneBook 介面定義了一個索引簽名,該簽名使用字串型別作為鍵,使用 Person 介面作為值。這意味著任何實現 PhoneBook 介面的物件只能具有鍵型別為字串且值型別為 Person 的屬性。
然後,我們定義一個變數 phoneBook 型別為 PhoneBook 並分配一個空物件。然後,我們向電話簿中新增一些條目,這些條目應以名稱作為鍵,以 Person 物件作為值。最後,我們控制檯輸出這些值以驗證我們是否嘗試放置任何其他型別的變數而不是提到的型別,然後編譯器將給出錯誤。
// 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 的屬性。
然後,我們定義一個名為 cart 的變數,其型別為 ShoppingCart,並向其分配一個空物件。然後,我們向購物車中新增一些條目,這些條目應以產品 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 }
這些示例說明了如何使用索引簽名來強制執行物件的屬性型別。索引簽名是一個強大的功能,可以幫助您編寫更健壯且更易於維護的程式碼,但重要的是明智地使用它們,並且僅在必要時使用。
資料結構
網路
關係資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP