Learn TypeScript 3 by Building Web Applications

Bonus – mapped types

The Readonly<T> type that we have used in our code is actually an example of a mapped type. Mapped types are derived types that we can define based on existing types. Mapped types apply transformations to each property of the existing type they are based on.

Take a look at the definition of the Readonly<T> type that you can find in standard TypeScript libraries (https://github.com/Microsoft/TypeScript/blob/master/lib/lib.es5.d.ts):

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

This mapped type is actually really straightforward once you know how to read it. It takes each and every property (called P here) and adds the readonly keyword to them, making the whole type read-only. Using keyof and mapped types, you ...