Advanced

Mapped and Conditional Types

Derive new types from existing ones with mapped types and pick/omit helpers.

What you will see

{ host: 'localhost', port: 8080 } { host: 'localhost', port: 8080 }

About 2 min of reading

Quick check

Before this new lesson, one small question about the lesson you just finished. Recall it, do not look it up.

Try It

Mapped types derive new types by iterating `keyof T`; conditional types pick between two shapes with a ternary. These are compile-time-only transforms with no runtime effect, exercise the equivalent plain-JS behavior instead.

Building a Readonly type

Before you run it, say out loud what it will print. Then open the answer.

What it prints

Ada 30

Pick and Omit

Before you run it, say out loud what it will print. Then open the answer.

What it prints

{ name: 'Ada', age: 30 } { name: 'Ada', age: 30 }

Partial and Required

function markOptional(obj) { return obj; } function markRequired(obj) { return obj; } const cfg = { host: "localhost", port: 8080 }; console.log(markOptional(cfg), markRequired(cfg));

Before you run it, say out loud what it will print. Then open the answer.

What it prints

{ host: 'localhost', port: 8080 } { host: 'localhost', port: 8080 }

Put it in order

Before you write anything, put these lines back in the right order. Click a line to move it up one step. This support step is easier than writing code from scratch, and it is here to make the last example stick.

Data Flow

A source type is transformed by iterating its keys or matching a condition, producing a new derived type.

1 Start with a source type T

↓

2 Mapped type iterates keyof T

↓

3 Apply modifier or rename each property

↓

4 Emit a new derived type for the compiler

Why this works

How mapped types work

A mapped type transforms one type into another by iterating its properties:

type LowercaseKeys<T> = {
  [P in keyof T as Lowercase<P>]: T[P];
};

The as clause lets you rename keys during mapping. Combined with modifiers like readonly/?, mapped types express a huge range of derived shapes.

Conditional types

Conditional types choose between two shapes:

type IsString<T> = T extends string ? true : false;
type A = IsString<"x">;   // true
type B = IsString<42>;    // false

T extends U ? X : Y is like a ternary for types. They power advanced helpers and can be distributed over unions when used over a naked type parameter.

Examples

Building a Readonly type

Mapped types

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};
interface User { name: string; age: number; }
const r: Readonly<User> = { name: "Ada", age: 30 };
// r.name = "x";  // error: readonly

[P in keyof T] iterates over every property P of T. Adding readonly in front applies it to each property.

Pick and Omit

Built-in mapped helpers

interface User {
  name: string;
  age: number;
  password: string;
}
type Public = Pick<User, "name" | "age">;
type Anonymous = Omit<User, "password">;

Pick keeps selected keys; Omit removes them. Both are mapped types under the hood, letting you build narrower contracts.

Partial and Required

Toggle optionality

interface Config { host: string; port: number; }
type OptionalConfig = Partial<Config>;  // all props optional
type MandatoryConfig = Required<Config>; // all props required

Partial<T> makes every property optional; Required<T> makes them all required. Handy for update payloads.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← Generics

Previous Lesson

Generics

Next Lesson

Decorators

Decorators →