Building Mapped Types and Utility Types

TypeScript types

In addition to limiting variables to a set of specific literal values and defining enums, TypeScript allows us to define types that are based on other types, much like super-powered generics. These are called mapped types. TypeScript also has many predefined mapped types that it calls utility types.

So, let’s say we have our existing type TicketData:

interface TicketData {
  id: number
  row: number
  number: number
  status: TicketStatus
}

Let’s also say that we have an unreliable data source and we want to make all the fields optional for data coming from that source. We could create a new type:

interface OptionalTicketData {
  id?: number
  row?: number
  number?: number
  status?: TicketStatus
}

That’s needlessly complete and, if the TicketData type changes, we also have to change the new type.

TypeScript lets us do this more generically:

type OptionalTicketData = [P in keyof TicketData]?: TicketData[P]

The syntax is not complete yet because we have a variable P that iterates over each type (in keyof and then adds the optional signifier to each type ?). Essentially, we get a new type where every key in the old type is optional. This is similar to a type or function declaration.

Mapped types with generic types

More usefully, we can create a mapped type with a generic type rather than with a specific type:

type Partial<T> = { [P in keyof T]?: T[P] }
type OptionalTicketData = Partial<TicketData>

## or you can skip the declaration
const x: Partial<TicketData>

We are unlikely to create these generic types in the real world, but TypeScript defines a few of them, and we can see that a few would be useful now and again. To list a few, there is like Readonly<T>, which makes all the properties of the type read only, NonNullable<T>, which constructs a new type excluding null or undefined, and ReturnType<T>, which resolves to the return type of a functional type.

Here’s the application we have so far: