Utility Types

Transform types with Partial, Required, Pick, Omit, Record, Readonly, and ReturnType

Knowledge0%

Learn & Drill

Fluency0%

Drill & Speed

Retention0%

Mastery & Review

Confidence0%

All modes

Practice

Free tier: read the explanation here. Upgrade to Pro for Drills, Speed challenges & Mastery badges.

Upgrade

Knowledge

Fluency

Retention

Knowledge Debt detected

You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.

Generics0%

Explanation

TypeScript's built-in utility types transform existing types — making all properties optional, picking a subset, or constructing a new type from keys. They're generic types available everywhere without imports.

`Partial<T>` — makes all properties optional: ``typescript interface User { id: number; name: string; email: string; } type UserUpdate = Partial<User>; // { id?: number; name?: string; email?: string; } function updateUser(id: number, changes: Partial<User>): void { // Patch only the provided fields } updateUser(1, { name: 'Alice' }); // OK — email and id not required

`Required<T>` — opposite of Partial, makes all optional properties required: ``typescript interface Config { host?: string; port?: number; } type FullConfig = Required<Config>; // { host: string; port: number; }

`Pick<T, Keys>` — keep only the listed properties: ``typescript type UserPreview = Pick<User, 'id' | 'name'>; // { id: number; name: string; }

`Omit<T, Keys>` — remove the listed properties: ``typescript type UserWithoutEmail = Omit<User, 'email'>; // { id: number; name: string; }

`Record<Keys, Value>` — create an object type with given keys and value type: ``typescript type PageMap = Record<string, string>; // { [key: string]: string } type StatusMap = Record<'active' | 'inactive', number>; // { active: number; inactive: number; }

`Readonly<T>` — all properties become read-only: ``typescript const config: Readonly<Config> = { host: 'localhost', port: 3000 }; // config.port = 4000; // Error: Cannot assign to 'port' because it is read-only

`ReturnType<T>` — extract the return type of a function type: ``typescript function getUser() { return { id: 1, name: 'Alice' }; } type User = ReturnType<typeof getUser>; // { id: number; name: string; }

`NonNullable<T>` — removes null and undefined from a union: ``typescript type MaybeName = string | null | undefined; type Name = NonNullable<MaybeName>; // string

Examples

Partial and Omit for CRUD operations

Combining `Omit` + `Partial` covers the three CRUD patterns: read (full type), create (omit server-set fields), update (partial of writable fields).

interface Article {
  id: number;
  title: string;
  body: string;
  authorId: number;
  publishedAt: Date | null;
}

// Create: everything except id (assigned by DB) and publishedAt (set on publish)
type CreateArticle = Omit<Article, 'id' | 'publishedAt'>;
// { title: string; body: string; authorId: number; }

// Update: any subset of fields (PATCH semantics)
type UpdateArticle = Partial<Omit<Article, 'id'>>;
// { title?: string; body?: string; authorId?: number; publishedAt?: Date | null; }

function createArticle(data: CreateArticle): Article {
  return { ...data, id: Math.random(), publishedAt: null };
}

function updateArticle(id: number, changes: UpdateArticle): void {
  // Apply only the provided fields
}

updateArticle(1, { title: 'New title' }); // Partial — only title
createArticle({ title: 'Hello', body: 'World', authorId: 42 });

Record and ReturnType

`Record` is the clean alternative to `{ [key: string]: T }` — especially powerful with string literal union keys, which makes every case mandatory.

// Record<Keys, Value> — typed dictionary
type HttpStatus = 400 | 401 | 403 | 404 | 500;
const statusMessages: Record<HttpStatus, string> = {
  400: 'Bad Request',
  401: 'Unauthorized',
  403: 'Forbidden',
  404: 'Not Found',
  500: 'Internal Server Error',
};

// TypeScript enforces every key is present — add 429 → must add it here too

// ReturnType — derive type from a function
function fetchUser(id: number) {
  return { id, name: 'Alice', role: 'admin' as const };
}

type UserData = ReturnType<typeof fetchUser>;
// { id: number; name: string; role: 'admin' }

// Useful when you can't import the type but can access the function
const user: UserData = fetchUser(1);
console.log(user.role); // 'admin' — typed

How well did you understand this?