TypeScript Indexed Access Types

In this article, we are going to learn about the Indexed Access Types in TypeScript, TypeScript is a powerful language that allows developers to write code with fewer errors and more safety than JavaScript. One feature that makes TypeScript stand out is the Indexed Access Types. Indexed Access Types provide a way to access the properties of an object using an index signature. In TypeScript, an index signature is a way to define the shape of an object with keys that are not known at compile time.

Syntax:

type ObjectKeyType = keyof ObjectType;
type PropertyType = ObjectType[ObjectKeyType];

Where –

• ObjectType is the object that we want to access the properties of. 
• ObjectKeyType is the type of key that we want to use to access the property. 
• PropertyType is the type of property that we want to access.

Example 1: In this example, we want to get the value of a property, so that we have an object that contains information about a book. The object has properties such as title, author, and year, and we want to get the value of the title property using an index signature. we define the Book interface that represents the shape of our object. We then define the PropertyType variable and use the Indexed Access Types syntax to access the title property of the Book interface. We then create an instance of the Book interface, and finally, we use the title key to access the value of the title property.

Javascript

type Book = {
    title: string;
    author: string;
    year: number;
};

type PropertyType = Book["title"];

const book: Book = {
    title: "The Hitchhiker's Guide to the Galaxy",
    author: "Douglas Adams",
    year: 1979,
};

const title: PropertyType = book["title"];

// Output: The Hitchhiker's Guide to the Galaxy
console.log(title);

Output:

Example 2: In this example, we want to change the value of the title property using an index signature. Here’s how we can do it using Indexed Access Types, we define the Book interface that represents the shape of our object. We then define the PropertyType variable and use the Indexed Access Types syntax to access the title property of the Book interface. We then create an instance of the Book interface and change the value of the title property using the title key.

Javascript

type Book = {
    title: string;
    author: string;
    year: number;
};

type PropertyType = Book["title"];

const book: Book = {
    title: "The Hitchhiker's Guide to the Galaxy",
    author: "Douglas Adams",
    year: 1979,
};

book["title"] = "Harry Potter and the Philosopher's Stone";

console.log(book);

Output:

Conclusion: In this article, we have covered what Indexed Access Type is, their syntax, and how to use them with working examples and their output. Indexed Access Type provides a powerful way to access and manipulate the properties of an object in a type-safe manner. It allows developers to access the properties of an object using an index signature and perform various operations on them. By using Indexed Access Types, developers can write more reliable and maintainable code.