Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

Utility Types in TypeScript

Utility Types

~16 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026

TypeScript ships a collection of built-in, generic helper types that TRANSFORM existing types, without rewriting them. This chapter introduces the most important ones, all demonstrated directly on our Book interface.

Partial<T>: making all properties optional

function updateBook(book: Book, updates: Partial<Book>): Book {
  return { ...book, ...updates };
}

updateBook(myBook, { title: 'New Title' });          // ✓ only ONE property needed
updateBook(myBook, { title: 'X', pageCount: 500 }); // ✓ multiple properties

Partial<Book> produces a VERSION of Book where ALL properties are marked with ? (optional, chapter 7) – perfect for "update" functions where only SOME fields should change.

Required<T> and Readonly<T>: the counterparts

type BookDraft = Partial<Book>;
type CompleteBook = Required<BookDraft>; // makes ALL properties required again

type ImmutableBook = Readonly<Book>; // makes ALL properties readonly (chapter 7)

Pick<T, K> and Omit<T, K>: selecting properties

type BookPreview = Pick<Book, 'title' | 'author' | 'coverImageUrl'>;
// { title: string; author: Author; coverImageUrl?: string }

type BookWithoutStatus = Omit<Book, 'status'>;
// ALL properties of Book EXCEPT 'status'

Pick SELECTS a subset of properties (useful for lean "preview" objects, e.g. for a results list), Omit specifically REMOVES properties (useful for creating an "almost identical" interface without ONE specific property).

Record<K, V>: typed objects with fixed keys

type GenreCounter = Record<Genre, number>;

const counter: GenreCounter = {
  Fantasy: 0,
  Mystery: 0,
  NonFiction: 0,
  Biography: 0,
  Novel: 0,
  ChildrensBook: 0,
}; // EVERY Genre value MUST be present as a key - forgetting one isn't possible

Record<Genre, number> forces an object where EVERY possible Genre value (from our literal union, chapter 10) MUST be present as a key – if one's missing, TypeScript shows an error IMMEDIATELY, where a plain {{ [key: string]: number }} couldn't.

Exclude<T, U> and Extract<T, U>: filtering unions

type AllStatuses = 'available' | 'borrowed' | 'reserved' | 'lost';
type ActiveStatuses = Exclude<AllStatuses, 'lost'>;
// 'available' | 'borrowed' | 'reserved'

type ProblemStatuses = Extract<AllStatuses, 'lost' | 'damaged'>;
// only 'lost' - 'damaged' doesn't exist in AllStatuses at all, gets ignored

ReturnType<T> and Parameters<T>: deriving function types

Remember RootState = ReturnType<typeof store.getState> from "React for Professionals" chapter 40? The same tool, explained here without a framework context:

function createBook(title: string, pageCount: number): Book {
  /* ... */
  return {} as Book;
}

type CreatedBookType = ReturnType<typeof createBook>; // Book
type CreateBookParameters = Parameters<typeof createBook>; // [string, number]

ReturnType/Parameters AUTOMATICALLY derive the type from an EXISTING function – if the function changes later, these derived types adapt AUTOMATICALLY, instead of needing to be manually kept in sync (the EXACT same principle as RootState).

Tipp: Rule of thumb: before writing a new type by hand, check whether a utility type already solves the problem – Partial/Pick/Omit cover MOST everyday "type X, but slightly modified" cases, without duplication. A full list can be found in the official TypeScript documentation under "Utility Types".