How to enforce type for indexed members of Typescript objects

The programming language TypeScript is based on JavaScript, which is strongly typed, object-oriented and compiled. The language is improved with tools like static typing, classes, and interfaces, which aid in early error detection and make JavaScript more manageable. A feature of TypeScript is the ability to enforce the types of indexed members of an object, and this process is also known as index signing.

An index signature is a set of key-value pairs that describe the many properties an object may have. Specify the type of the property name and the type of the property value using values ​​and keys respectively. To enforce the kind of an object's properties, users can take advantage of TypeScript's index signing feature.

Index signatures can effectively enforce certain object properties, but can also make code difficult to understand and maintain. Therefore, it is very important to only use index signatures when necessary.

grammar

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

In the above syntax, 'objectName' is the name of our object, and we force the key to be of type string and the value to be string.

Example 1

In this example, we have two interfaces, Person and PhoneBook. The Person interface defines the structure of a person object, including two attributes: name (string) and age (number). The PhoneBook interface defines an index signature, using the string type as the key and the Person interface as the value. This means that any object that implements the PhoneBook interface can only have properties whose key type is String and whose value type is Person.

Then we defined a variable phoneBook, of type PhoneBook, and assigned an empty object. Then we add some entries to the phonebook where the keys should be names and the values ​​should be Person objects. Finally, we verify through the console log that if we try to put any other type of variable besides the above type, the compiler will report an error.

// 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)

When compiling, it will generate the following JavaScript code −

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);

Output

The above code will produce the following output -

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

Example 2

In this example, we have an interface Product, which defines the structure of a product object with two properties: name (string) and price (number). Then we have another interface ShoppingCart which represents an index signature using a numeric type as the key and the Product interface as the value. Any object that implements the ShoppingCart interface can only have properties with a key type of Number and a value type of Product.

Then we define a variable cart of type ShoppingCart and assign an empty object to it. Then we add some entries to the shopping cart where the key should be the product id and the value should be the product object. We can see that the items are added to the cart correctly, if the value is not of type Product or the product object is missing any of the properties defined in the Product interface, an error will occur.

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])

When compiled, it will generate the following JavaScript code −

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]);

Output

The above code will produce the following output -

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

These examples illustrate how to use index signatures to enforce an object's property types. Index signatures are a powerful feature that can help you write more robust and maintainable code, but it's important to use them wisely and only when necessary.

The above is the detailed content of How to enforce type for indexed members of Typescript objects. For more information, please follow other related articles on the PHP Chinese website!