In TypeScript, Indexed access types are also known as lookup types. It is used to access the type of property of another type. It is a powerful way and helpful to access the type properties of the complex type structure. This feature allows you to use the type system more effectively, ensuring type safety in scenarios involving property access and manipulation.
Syntax
You can follow the syntax below to use the index access types in TypeScript.
typenew_type= existing_type[key];- In the above syntax, ‘type’ is a keyword to define a new type.
- ‘existing_type’ is an existing type.
- The ‘key’ is a property of the existing_type whose type we need to get.
Examples
Let’s understand the indexed access types with the help of some examples in TypeScript.
Example: Accessing Object Property Types
Indexed access types are very useful when you need to get the type of the specific property of the existing type.
In the code below, we have defined the User type which contains the id, and age properties of the number type and name property of the string type.
The User[‘name’] is used to access the type of the ‘name’ property of the User type, which is a string.
Next, we have defined the userName variable whose type is ‘UserNameType’ (string). If you try to assign a number to the userName variable, it will throw an error.
typeUser={
id:number;
name:string;
age:number;};// Access the type of 'name' property from UsertypeUserNameType= User['name'];// type is stringlet userName: UserNameType;
userName ="Alice";// Okconsole.log(userName);// Alice// userName = 123; // Error: Type 'number' is not assignable to type 'string'.On compiling, it will generate the following JavaScript code.
let userName;
userName ="Alice";// Okconsole.log(userName);// Alice// userName = 123; // Error: Type 'number' is not assignable to type 'string'.Output
Alice
Example: Accessing Nested Object Property Types
Indexed access types are more useful when you need to get the type of any property of the complex type structure.
In the code below, the ‘Product’ type has id and details properties. The details property is a nested type containing the name and price properties.
We used the Product[‘details’][‘price’] to access the type of the ‘price’ property of the ‘details’ property, which is a number.
typeProduct={
id:number;
details:{
name:string;
price:number;};};// Access the type of the nested 'price' propertytypeProductPriceType= Product['details']['price'];// type is numberlet price: ProductPriceType;
price =19.99;// Correct usageconsole.log(price);// Output: 19.99// price = "20.00"; // Error: Type 'string' is not assignable to type 'number'.On compiling, it will generate the following JavaScript code.
let price;
price =19.99;// Correct usageconsole.log(price);// Output: 19.99// price = "20.00"; // Error: Type 'string' is not assignable to type 'number'.Output
19.99
Example: Using the keyof operator with indexed access types
This example is similar to the first example. Here, we have used the ‘keyof’ operator to access all keys of the User type.
When you use the Keyof operator with the type and use it as an index value, it gets the union of type of all properties of the object. Here, ‘keyof User’ gives us the number | string, which is a type of all properties of the User type.
typeUser={
id:number;
name:string;
age:number;};// Access the type of 'name' property from UsertypeUserNameType= User[keyof User];// type is number | stringlet userName: UserNameType;
userName ="Hello";// Correct usageconsole.log(userName);// Output: Hello
userName =123;// Correct usageconsole.log(userName);// Output: 123On compiling, it will generate the following JavaScript code.
let userName;
userName ="Hello";// Correct usageconsole.log(userName);// Output: Hello
userName =123;// Correct usageconsole.log(userName);// Output: 123Output
Hello
123
Example: Indexed Access with Arrays
When you want to access the type of the array elements, you can use the ‘number’ as an index.
In the code below, we have defined the StringArray type, which contains the array of the string.
The ‘StringArray[number]’ gets the type of the array element, which is a string.
typeStringArray=string[];// Access the type of an array elementtypeElementType= StringArray[number];// type is stringlet element: ElementType;
element ="Hello";// Correct usageconsole.log(element);// element = 123; // Error: Type 'number' is not assignable to type 'string'.On compiling, it will generate the following JavaScript code.
let element;
element ="Hello";// Correct usageconsole.log(element);// element = 123; // Error: Type 'number' is not assignable to type 'string'.Output
Hello
This way you can access the type of the properties of the existing types using the indexed access type. You can also use the ‘number’ property to access the type of the array elements.