Skip to content
All essays
WebMarch 28, 202518 min

Advanced TypeScript Types: Utility Types & Conditional Types

Master advanced TypeScript types. Learn utility types, conditional types, and type manipulation.

Ü
Ümit Uz
Mobile & Full Stack Developer

Utility Types

Partial

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

function updateUser(id: string, updates: Partial<User>) {
  // Updates can have any subset of User properties
  const user = getUser(id);
  return { ...user, ...updates };
}

Required

typescript
interface PartialUser {
  id?: string;
  name?: string;
  email?: string;
}

type CompleteUser = Required<PartialUser>;
// All properties are now required

Readonly

typescript
interface Config {
  apiUrl: string;
  timeout: number;
}

const config: Readonly<Config> = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

// config.apiUrl = '...'; // ❌ Cannot assign to readonly

Conditional Types

typescript
type NonNullable<T> = T extends null | undefined ? never : T;

type Response<T> = T extends string
  ? { message: T }
  : { data: T };

// Usage
type StringResponse = Response<string>; // { message: string }
type NumberResponse = Response<number>; // { data: number }

Mapped Types

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

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

type UserGetters = Getters<User>;
// {
//   getName: () => string;
//   getAge: () => number;
// }

Conclusion

Advanced TypeScript types enable powerful type-safe abstractions.

Related essays

Next essay
Vue 3 Composition API: Complete Guide