Frontend Engineering | VoidX Academy

17. Mapped Types & Deep Utility Types

Generating Types from Types

In the previous module, we learned Conditional Types. Now, we introduce Mapped Types. Mapped Types allow you to loop over the keys of one object to automatically generate a completely new object type. This is exactly how utility types like Partial and Readonly are built internally by TypeScript.

The `keyof` Operator

Before mapping, you must understand keyof. It extracts all the property names of an interface and returns them as a literal Union Type.

interface Config {
  theme: string;
  volume: number;
}

// Extracts the keys: "theme" | "volume"
type ConfigKeys = keyof Config;

// We can only assign "theme" or "volume" to this variable
let setting: ConfigKeys = "theme"; 

Mapped Types

A Mapped Type uses the syntax [K in keyof T] to loop through properties.

// We loop through the keys of T, and make each one readonly
type MakeReadonly<T> = {
  readonly [K in keyof T]: T[K]; 
};

// LockedConfig is now exactly like Config, but immutable!
type LockedConfig = MakeReadonly<Config>;

Utility Types Deep Dive: ReturnType

TypeScript can extract the type data out of JavaScript functions you have already written. ReturnType<T> looks at a function and extracts the exact shape of the object it returns.

function createUser(name: string, age: number) {
  return { id: Math.random(), name, age, active: true };
}

// typeof createUser gets the function's signature.
// ReturnType extracts the output shape.
// UserObject is now: { id: number; name: string; age: number; active: boolean; }
type UserObject = ReturnType<typeof createUser>;

Utility Types Deep Dive: Parameters

Similarly, Parameters<T> extracts the arguments a function expects and returns them as a Tuple.

// Extracts the parameters as a Tuple: [name: string, age: number]
type UserParams = Parameters<typeof createUser>;

Required <T>

We've seen Partial (makes everything optional). Required is the opposite. It strips away all optional ? modifiers, forcing every property to be provided.

interface Props {
  title?: string;
  subtitle?: string;
}

// Now BOTH title and subtitle are strictly mandatory
type StrictProps = Required<Props>;

17. Mapped Types & Deep Utility Types

Generating Types from Types

The `keyof` Operator

Before mapping, you must understand keyof. It extracts all the property names of an interface and returns them as a literal Union Type.

interface Config {
  theme: string;
  volume: number;
}

// Extracts the keys: "theme" | "volume"
type ConfigKeys = keyof Config;

// We can only assign "theme" or "volume" to this variable
let setting: ConfigKeys = "theme"; 

Mapped Types

A Mapped Type uses the syntax [K in keyof T] to loop through properties.

// We loop through the keys of T, and make each one readonly
type MakeReadonly<T> = {
  readonly [K in keyof T]: T[K]; 
};

// LockedConfig is now exactly like Config, but immutable!
type LockedConfig = MakeReadonly<Config>;

Utility Types Deep Dive: ReturnType

TypeScript can extract the type data out of JavaScript functions you have already written. ReturnType<T> looks at a function and extracts the exact shape of the object it returns.

function createUser(name: string, age: number) {
  return { id: Math.random(), name, age, active: true };
}

// typeof createUser gets the function's signature.
// ReturnType extracts the output shape.
// UserObject is now: { id: number; name: string; age: number; active: boolean; }
type UserObject = ReturnType<typeof createUser>;

Utility Types Deep Dive: Parameters

Similarly, Parameters<T> extracts the arguments a function expects and returns them as a Tuple.

// Extracts the parameters as a Tuple: [name: string, age: number]
type UserParams = Parameters<typeof createUser>;

Required <T>

We've seen Partial (makes everything optional). Required is the opposite. It strips away all optional ? modifiers, forcing every property to be provided.

interface Props {
  title?: string;
  subtitle?: string;
}

// Now BOTH title and subtitle are strictly mandatory
type StrictProps = Required<Props>;

17. Mapped Types & Deep Utility Types

Generating Types from Types

The `keyof` Operator

Mapped Types

Utility Types Deep Dive: ReturnType

Utility Types Deep Dive: Parameters

Required <T>

Knowledge Check

17. Mapped Types & Deep Utility Types

Generating Types from Types

The `keyof` Operator

Mapped Types

Utility Types Deep Dive: ReturnType

Utility Types Deep Dive: Parameters

Required <T>

Knowledge Check