TypeScript Extract Type: Syntax, Use Cases, and Examples

The TypeScript extract utility type allows you to selectively pull out parts of a union type that match another type. In extract TypeScript, this utility becomes especially helpful when you want to filter a union based on specific criteria and ensure that only compatible members remain.

This article will guide you through the syntax and practical use cases of Extract<T, U>. You'll learn how to apply it to literal types, union types, object shapes, and generics. You’ll also discover techniques for extracting function argument types, array item types, and generic values from complex structures.

What Is TypeScript Extract?

The Extract<T, U> utility type constructs a new type by extracting from T those members that are assignable to U.

Internal definition:

type Extract<T, U> = T extends U ? T : never;

So, when a type in the union T matches U, it's preserved. All others become never.

Syntax of Extract TypeScript

The basic syntax is:

Extract<FromUnionType, MatchingType>

Example:

type Input = "a" | "b" | "c";
type Output = Extract<Input, "a" | "c">; // "a" | "c"

Here, only the values that match "a" or "c" are retained.

Why Use Extract TypeScript?

You use TypeScript extract when:

• You want to filter a union to only keep certain types
• You’re inferring types from a list or configuration
• You need to extract argument types from functions
• You want to isolate a subset of values from a generic

This utility gives you precise control over complex types and is a vital tool in many advanced TypeScript patterns.

Extract Literal Types from Unions

You can use Extract to isolate specific literal types from a broader union.

Example:

type Roles = "admin" | "editor" | "viewer";
type AdminOnly = Extract<Roles, "admin">; // "admin"
type VisibleRoles = Extract<Roles, "admin" | "editor">; // "admin" | "editor"

This is useful for role-based access control or validation logic.

Extract Object Shapes from Unions

You can also extract specific object shapes from a union of object types.

Example:

type Actions =
  | { type: "click"; payload: number }
  | { type: "hover"; payload: string }
  | { type: "scroll" };

type ClickActions = Extract<Actions, { type: "click"; payload: number }>;

Now ClickActions is the specific action object matching the click structure.

This is helpful when modeling action reducers, message dispatchers, or event handlers.

Extract Function Argument Type TypeScript

TypeScript doesn't directly expose function argument types in a readable way, but you can use utility types to extract them.

Example:

type GetArgs<T> = T extends (...args: infer A) => any ? A : never;

function log(message: string, level: number) {}
type LogArgs = GetArgs<typeof log>; // [message: string, level: number]

You can use this to strongly type helper functions, wrappers, or testing tools.

Extract Return Type

Though Extract is not designed specifically for return types, it pairs well with conditional types.

type GetReturn<T> = T extends (...args: any[]) => infer R ? R : never;

type Result = GetReturn<() => number>; // number

This pattern is common in dynamic dispatch systems, API wrappers, or functional programming helpers.

Extract Array Type TypeScript

You can extract the item type from an array type using conditional types:

type ItemType<T> = T extends Array<infer U> ? U : never;

type Data = string[];
type Item = ItemType<Data>; // string

You can also extract from readonly arrays or tuples in a similar way.

This helps define transformation functions that work on each element of an array.

Extract Type from Generic Type TypeScript

Extract is powerful when applied inside mapped or conditional types to extract valid subtypes from generics.

Example:

type Response<T> =
  | { status: "ok"; data: T }
  | { status: "error"; message: string };

type SuccessResponse = Extract<Response<string>, { status: "ok"; data: string }>;

This filters the union to only include the successful variant.

Filtering Complex Union Types

extract TypeScript can isolate specific types from a larger, more varied set.

type Shape =
  | { type: "circle"; radius: number }
  | { type: "square"; side: number }
  | { type: "triangle"; base: number; height: number };

type CirclesOnly = Extract<Shape, { type: "circle"; radius: number }>;

Use this when processing a discriminated union in a switch statement or conditional logic.

Using Extract in Generic Components

In generic components or utilities, you can use Extract to work only with props that match specific constraints.

Example:

type Props =
  | { kind: "button"; onClick: () => void }
  | { kind: "link"; href: string };

type ButtonProps = Extract<Props, { kind: "button" }>;

This is helpful when building strongly typed React components or reusable form handlers.

Extracting Union Keys

To extract a set of keys from a union of objects:

type Events =
  | { type: "start"; value: string }
  | { type: "stop"; timestamp: number };

type StartEvent = Extract<Events, { type: "start" }>;

Use this in combination with keyof and infer to filter keys dynamically from types that vary structurally.

Using Extract with Conditional Access

You can use Extract to define access logic in permission systems:

type Permission = "read" | "write" | "delete" | "archive";

type WritePermissions = Extract<Permission, "write" | "delete">;

This ensures compile-time safety when dealing with role-based access systems or feature flags.

Extracting Types from Discriminated Unions

When working with discriminated unions in reducers or control logic, you can extract the type that matches a discriminator.

type Action =
  | { type: "create"; payload: string }
  | { type: "update"; payload: number }
  | { type: "delete"; id: number };

type UpdateAction = Extract<Action, { type: "update" }>;

This is useful in Redux reducers or command processors where different logic paths depend on the type property.

Limitations of TypeScript Extract

While powerful, extract TypeScript has some boundaries:

• It works best on unions
• It doesn’t match partial structures—exact matches are needed
• It cannot extract from values at runtime—it’s compile-time only

In cases where you need partial or fuzzy matches, custom conditional types or manual filtering might be required.