DEV Community

Cover image for Write Like a Pro: 10 TypeScript Utilities You’re Probably Not Using Yet(Type Utilities!)(12)
Wisdom Bits profile image Karandeep Singh
Karandeep Singh for Wisdom Bits

Posted on

Write Like a Pro: 10 TypeScript Utilities You’re Probably Not Using Yet(Type Utilities!)(12)

#webdev #javascript #typescript #beginners

Today! We’re going to continue TypeScript learning like you’re a smart 5-year-old who loves to build things and asks “why?” (which is the best thing ever).

& yes “why?” is my way of learning.

I've divided this into 20 Chapters. and will go one by one and each will be of 2 - 3 min. of read.
This is a Continuation. if you have not read the Previous chapter -
Chapter 11

🧩 Chapter 12: Utility Types – TypeScript’s Built-In Tools

(aka: “Why rewrite what TypeScript already provides?”)

What are Utility Types?

TypeScript comes with pre-built helper types to transform, filter, or enhance types easily without writing repetitive manual types.

These utilities help you:

✅ Save time
✅ Avoid boilerplate
✅ Keep your types clean & DRY
✅ Write advanced typings easily

Typescript Utilities:

Utility Type Purpose
Partial<T> Make all props optional
Required<T> Make all props required
Readonly<T> Make all props readonly
Pick<T, K> Pick specific props
Omit<T, K> Remove specific props
Record<K, T> Object with specified keys and type
Exclude<T, U> Remove members from union
Extract<T, U> Extract members from union
ReturnType<T> Get function return type
Parameters<T> Get function parameters as tuple

🚀 Partial<Type>

Makes all properties optional.

type User = { id: number; name: string; email: string; }; type UpdateUser = Partial<User>;
Enter fullscreen mode Exit fullscreen mode

🚀 Required<Type>

Makes all properties required (even if optional originally).

type Settings = { darkMode?: boolean; fontSize?: number; }; type StrictSettings = Required<Settings>; const s: StrictSettings = { darkMode: true, fontSize: 16, }; // ✅ Now must provide all properties
Enter fullscreen mode Exit fullscreen mode

🚀 Readonly<Type>

Makes all properties readonly.

type Config = { apiUrl: string; }; const config: Readonly<Config> = { apiUrl: "https://api.com" }; config.apiUrl = "https://newapi.com"; // ❌ Error: cannot assign to readonly property
Enter fullscreen mode Exit fullscreen mode

🚀 Pick<Type, Keys>

Pick specific properties from a type to create a new type.

type User = { id: number; name: string; email: string; }; type UserPreview = Pick<User, "id" | "name">; const preview: UserPreview = { id: 1, name: "Karan", };
Enter fullscreen mode Exit fullscreen mode

🚀 Omit<Type, Keys>

Exclude specific properties from a type to create a new type.

type UserWithoutEmail = Omit<User, "email">; const u: UserWithoutEmail = { id: 2, name: "Chatu", };
Enter fullscreen mode Exit fullscreen mode

🚀 Record<Keys, Type>

Creates an object type with specific keys and a specific value type.

type Roles = "admin" | "editor" | "viewer"; type Permissions = Record<Roles, boolean>; const perms: Permissions = { admin: true, editor: true, viewer: false, };
Enter fullscreen mode Exit fullscreen mode

🚀 Exclude<UnionType, ExcludedMembers>

Removes specific members from a union.

type Status = "loading" | "success" | "error"; type NonErrorStatus = Exclude<Status, "error">; // Result: "loading" | "success"
Enter fullscreen mode Exit fullscreen mode

🚀 Extract<UnionType, Members>

Extracts only specified members from a union.

type Status = "loading" | "success" | "error"; type LoadingStatus = Extract<Status, "loading">; // Result: "loading"
Enter fullscreen mode Exit fullscreen mode

🚀 ReturnType<Type>

Gets the return type of a function.

function getUser() { return { id: 1, name: "Chatu" }; } type UserType = ReturnType<typeof getUser>; // { id: number; name: string }
Enter fullscreen mode Exit fullscreen mode

🚀 Parameters<Type>

Gets the types of parameters of a function as a tuple.

function user(name: string, age: number) {} type Params = Parameters<typeof user>; // [string, number]
Enter fullscreen mode Exit fullscreen mode

Read Previous Chapters

If you enjoyed this and want to master TypeScript and other technologies, follow the series and drop a like!🤝

I’m a passionate software developer sharing the cool things I discover, hoping they help you level up on your coding journey.

How i created my own State Management Library : Rethinking State Management in React — From a Dev, for Developers.

Top comments (0)