Building Mapped Types and Utility Types
Learn how to define types that are based on other types using mapped and utility types.
We'll cover the following
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:
Get hands-on with 1400+ tech skills courses.