TypeScript: A Gentle Introduction to Mapped Types

Learn to build your own set of TypeScript’s tooling

Photo by Markus Spiske on Unsplash.

Mapped types are by far the best feature in the TypeScript language. They let you create new types base on existing ones and some rules that you define. That does lead to a more readable and declarative code base.

Keeping your code DRY is one of the principles you should follow, and mapped types help you with that. You will find that there is a massive boilerplate reduction. You have to code less as you can reuse more.

Mapped types are a bit of a scary feature to look at first. Especially if there is a knowledge gap. So, before jumping straight into it, we will revisit some key features that are the foundation on which mapped types are built upon.

Hopefully, by reducing the knowledge gap, it will look less overwhelming. When learning new features I think taking baby steps is key to success.

5 Key TypeScript Features To Build Types

1. The keyof operator

keyof is a very important tool. It lets you get all the type properties in a union format. Let’s check the documentation:

“The keyof operator takes an object type and produces a string or numeric literal union of its keys.” — TypeScript docs

Let’s check out an example:

We can see that we have extracted all the Person keys into PersonKeys type.

2. Accessing a TypeScript type/interface variable

It is widely unknown that you can access type properties by using a very familiar JavaScript syntax: square brackets. This will be very important later on.