Why Extract type in Typescript? - Purpose & Use Cases

The Big Idea

What if you could instantly grab just the pieces you want from a big puzzle without searching through every piece?

The Scenario

Imagine you have a big box of mixed toys, and you want to pick only the red cars out of it by hand every time you play.

The Problem

Manually sorting through all toys each time is slow, tiring, and you might miss some red cars or pick wrong toys by mistake.

The Solution

The Extract type lets you quickly and safely pick only the parts you want from a big set, like grabbing all red cars instantly without sorting by hand.

Before vs After

✗ Before

type Vehicle = 'car' | 'truck' | 'bike';
type RedVehicles = 'car';

✓ After

type Vehicle = 'car' | 'truck' | 'bike';
type RedVehicles = Extract<Vehicle, 'car'>;

What It Enables

You can easily create new types by selecting exactly what you need from existing ones, making your code cleaner and safer.

Real Life Example

When building a form, you might want to extract only the string fields from a big user data type to handle text inputs separately.

Key Takeaways

Extract type helps pick specific parts from a bigger type.

It saves time and avoids mistakes compared to manual selection.

It makes your TypeScript code clearer and more reliable.