TypeScript Mapped Types

TypeScript Mapped Types: Iterating & Remapping Property Keys

Mapped types allow you to create new object types by iterating over keys of an existing type using the [K in keyof T] index signature operator.

Mapped Type Syntax Variations

• [K in keyof T]: Iterates over keys in T.
• readonly [K in keyof T]: Makes all properties read-only.
• [K in keyof T]?:: Makes all properties optional.
• -readonly or -?: Removes modifiers.
• as key remapping: [K in keyof T as NewKey] (Remaps or filters keys).

Practical Code Example

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

// Custom implementation of Readonly<T> using Mapped Type
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K];
};

// Custom implementation of Optional<T>
type MyPartial<T> = {
  [K in keyof T]?: T[K];
};

// Key Remapping using 'as' & Template Literals
type GetterMethods<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = GetterMethods<User>;
// Generates:
// {
//   getId: () => number;
//   getName: () => string;
//   getEmail: () => string;
// }

const userGetters: UserGetters = {
  getId: () => 101,
  getName: () => "Alice",
  getEmail: () => "[email protected]"
};

console.log("User Email:", userGetters.getEmail());

Best Practices & Gotchas

• Use Key Remapping as never to Filter Keys: Exclude specific properties during mapping by mapping their key to never.
• Leverage Utility Helpers: Combine mapped types with built-in string utilities (Capitalize, Uncapitalize, Uppercase, Lowercase).
• Keep Mapped Types Modular: Re-use generic mapped transformations across different domain interfaces.

Self-Check Challenge

Create a mapped type Nullable<T> that maps every property K of T to T[K] | null.