Exploring Typescript Mapped Types And Transformations

This post will is 3 of 20 for my series on intermediate-to-advance TypeScript tips.

All tips can be run on the TypeScript Playground.

Introduction

In the third day of our series, we're delving into a powerful concept of TypeScript: Mapped Types. Mapped Types let us transform existing model types into new ones in a very flexible and type-safe way. Let's dive right in!

What are Mapped Types?

Mapped types are a unique feature of TypeScript that allows creating new types from old ones by mapping properties over to new types. A mapped type is essentially a type transformation, a way of creating a new type from an existing one.

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};
copy

The Readonly<T> mapped type transforms every property in T to be readonly.

Advanced Use Case: From String Keys to Computed Properties

Let's explore an advanced use case: creating a utility that converts an object with string keys to an object with computed properties based on those keys. Suppose we have an object where keys are string IDs, and we want to create an object with additional properties based on those keys. Here's how we can do that:

type TransformKeysToComputed<T> = {
  [P in keyof T as `get${Capitalize<string & P>}`]: () => T[P];
};

// Example usage
type User = {
  id: string;
  name: string;
};

type ComputedUser = TransformKeysToComputed<User>;

// Now ComputedUser is equivalent to:
// {
//     getId: () => string;
//     getName: () => string;
// }
copy

In the above example, TransformKeysToComputed<T> is our mapped type. It iterates over each key (P) in T and transforms the key into a new property that starts with 'get' followed by the capitalized key name (e.g., getId, getName). Each new property is a function that, when called, returns the type of the original property in T.

Summary

Mapped types allow you to leverage TypeScript's static typing features to create new types from existing ones, providing a flexible way to ensure type safety. As we have seen, we can use mapped types to transform an object's keys into computed properties, which is just one of the endless possibilities this feature offers.

Stay tuned for the next blog post in our series, where we will continue to dive deeper into TypeScript's powerful type system!

If you want to try these examples yourself, head to this saved TypeScript Playground.

Resources and further reading

Photo credit: adrienconverse