Lesson 26 +10 XP

Mapped Types & Template Literal Types

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

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

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

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.