DEV Community

Cover image for Mastering TypeScript Utility Types: Partial, Pick, Omit, Record & More
NJOKU SAMSON EBERE
NJOKU SAMSON EBERE

Posted on

1

Mastering TypeScript Utility Types: Partial, Pick, Omit, Record & More

TypeScript utility types are powerful tools that help developers write cleaner, more maintainable, and type-safe code. Whether you’re building frontend apps with React or backend APIs with Node.js, utility types let you transform and manipulate types without rewriting logic.

πŸŽ₯ Watch the full tutorial video here:

.


πŸ” What You'll Learn

This video and blog cover the most commonly used TypeScript utility types:


Partial<T>

Makes all properties in a type optional.

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

const updateUser = (id: number, updates: Partial<User>) => {
  // updates can include one or more fields
};
Enter fullscreen mode Exit fullscreen mode

βœ… Useful for update forms or PATCH requests.


Pick<T, K>

Creates a new type by picking a subset of properties.

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

type UserPreview = Pick<User, "id" | "name">;

const preview: UserPreview = {
  id: 1,
  name: "Jane",
};
Enter fullscreen mode Exit fullscreen mode

βœ… Great for displaying minimal data in components or lists.


Omit<T, K>

Creates a new type by omitting specific properties.

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

type UserWithoutEmail = Omit<User, "email">;

const user: UserWithoutEmail = {
  id: 1,
  name: "John",
};
Enter fullscreen mode Exit fullscreen mode

βœ… Ideal when hiding sensitive fields (e.g., passwords, emails).


Record<K, T>

Creates an object type with keys of type K and values of type T.

type Roles = "admin" | "user" | "guest";

const permissions: Record<Roles, boolean> = {
  admin: true,
  user: true,
  guest: false,
};
Enter fullscreen mode Exit fullscreen mode

βœ… Useful for enums, permission sets, or configuration maps.


Readonly<T>

Makes all properties in a type immutable.

interface Settings {
  theme: string;
  darkMode: boolean;
}

const config: Readonly<Settings> = {
  theme: "light",
  darkMode: false,
};

config.theme = "dark"; // ❌ Error: Cannot assign to 'theme'
Enter fullscreen mode Exit fullscreen mode

βœ… Prevents accidental mutations.


Required<T>

Makes all optional properties required.

interface Profile {
  username?: string;
  bio?: string;
}

type CompleteProfile = Required<Profile>;

const user: CompleteProfile = {
  username: "samnjoku",
  bio: "Dev Advocate",
};
Enter fullscreen mode Exit fullscreen mode

βœ… Useful when ensuring that an object is fully populated before sending.


πŸ“Ί Watch & Share

πŸ“Ί Watch the full YouTube video here and get hands-on with real-world examples.

If you found the content helpful, please like, comment, and subscribe to support the channel!


🧠 Bonus Tip

You can combine utility types like this:

type EditableUser = Partial<Omit<User, "id">>;
Enter fullscreen mode Exit fullscreen mode

This makes all properties except id optional.


Thanks for reading and watching!
Let me know in the comments: Which TypeScript utility type do you use the most?

Heroku

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more