You are here: Home / Topics / Indexable Type Interface - Typescript

Indexable Type Interface - Typescript

Filed under: TypeScript on 2024-03-18 12:04:22

In TypeScript, an indexable type interface allows you to define a type that can be accessed using indexing, similar to how you access elements in an array or properties in an object. This feature allows you to specify the types for indexing operations using specific key types.
To define an indexable type interface in TypeScript, you use the square bracket notation within the interface declaration. Here's the general syntax:
 

interface MyIndexableType {
     [key: KeyType]: ValueType;
}

In this syntax:
MyIndexableType is the name of the interface you're defining. KeyType represents the type of the keys used for indexing. ValueType represents the type of the values associated with the keys.
For example, let's say you want to define an indexable type for a dictionary that stores the ages of people using their names as keys. Here's how you can create an interface for that:


Example 1: Indexable Type Interface (Dictionary of strings to numbers)
index.ts:

interface AgeDictionary {
   [name: string]: number;
}
const myDictionary: AgeDictionary = {
   "Alice": 25,
   "Bob": 30,
};
console.log(myDictionary["Alice"]); // Output: 25
console.log(myDictionary["Bob"]); // Output: 30

In the above example, myDictionary is an object that conforms to the AgeDictionary interface, where the keys are strings representing names, and the values are numbers representing ages.
It's important to note that indexable type interfaces can use other types for keys, not just strings. You can use number or even union types as the key type, depending on your requirements.
Indexable type interfaces in TypeScript provide a way to define flexible data structures that can be accessed using indexing operations. They are particularly useful when working with collections of data or dynamic object structures.

Example 8: Indexable Type Interface()
index.ts:
interface EmployeeStatus {
   [key: string]: string | boolean;
}
class EmloyeeService {
   employeesStatus: EmployeeStatus[];
   status: boolean;
   constructor() {
       this.status = false;
       this.employeesStatus = [
           { employeeId: '101', status: true },
           { employeeId: '102', status: false },
           { employeeId: '103', status: true },
       ];
   }
   iterateAllEmployeesStatus(): void {
       this.employeesStatus.forEach((employeeStatus) => {
           console.log(`employeeStatus: $
{employeeStatus.employeeId}, status: ${employeeStatus.status}`);
       });
   }
//status can have either a true or false value but null will represent that employee does not exist.
   getValue(employeeId: string): boolean | null {
       let status = null;
       this.employeesStatus.forEach((es) => {
           if (es.employeeId === employeeId) {
               status =
               <boolean>es.status; }
});
                   return status;
}
}
                   let employeeStatus = new EmloyeeService();
                   employeeStatus.iterateAllEmployeesStatus();
                   let returnValue = employeeStatus.getValue('103');
                   let result = (returnValue === null) ? "employee does not exist" :
                   returnValue === true ? "Status is valid" : "Status is Invalid"
                   console.log(result);

About Author:
J
Java Developer     View Profile
Hi, I am using MCQ Buddy. I love to share content on this website.