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)