Mapped Types & Template Literal Types

Mapped types create new types by iterating over keys of an existing type. Template literal types build string types dynamically using template syntax.

Mapped Types Syntax

typescript
type ReadOnlyObject<T> = {
  readonly [K in keyof T]: T[K];
};

type OptionalObject<T> = {
  [K in keyof T]?: T[K];
};

interface User {
  id: number;
  name: string;
}

type ReadonlyUser = ReadOnlyObject<User>;

Key Remapping with as

typescript
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

interface Person {
  name: string;
  age: number;
}

type PersonGetters = Getters<Person>;
/*
Resulting type:
{
  getName: () => string;
  getAge: () => number;
}
*/

Template Literal Types

typescript
type Event = "click" | "hover";
type EventHandler = `on${Capitalize<Event>}`; // "onClick" | "onHover"

TL;DR

• Mapped types iterate over keys using [K in keyof T].
• Key remapping using as can transform property names dynamically.
• Template literal types manipulate string literal unions at compile time.