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
};
β 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",
};
β 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",
};
β 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,
};
β 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'
β 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",
};
β 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">>;
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?
Top comments (0)