Extract type in Typescript - Step-by-Step Execution

Concept Flow - Extract type

Define union type

↓

Use Extract<Type, Union>

↓

Check each member of Type

↓

Keep members assignable to Union

↓

Result: new union with extracted members

Extract type takes two types and keeps only those members from the first type that are assignable to the second.

Execution Sample

Typescript

type Fruit = "apple" | "banana" | "orange";
type Citrus = Extract<Fruit, "orange" | "lemon">;
// Citrus is "orange"

Extracts only the members from Fruit that are also in the union "orange" | "lemon".

Execution Table

Step	Member Checked	Is Member in Extract Type?	Reason	Resulting Extract Type
1	"apple"	No	"apple" is not assignable to "orange" | "lemon"	"" (empty)
2	"banana"	No	"banana" is not assignable to "orange" | "lemon"	"" (empty)
3	"orange"	Yes	"orange" is assignable to "orange" | "lemon"	"orange"
4	End	N/A	All members checked	"orange"

💡 All union members checked; only "orange" is assignable to "orange" | "lemon".

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
ExtractedType	"" (empty)	"" (empty)	"" (empty)	"orange"	"orange"

Key Moments - 3 Insights

Why is "apple" not included in the Extract type?

"apple" is not assignable to the union "orange" | "lemon", so it is excluded as shown in execution_table row 1.

What happens if none of the members match the Extract condition?

The resulting Extract type becomes empty (never), as shown after checking "apple" and "banana" in rows 1 and 2.

Can Extract be used with non-union types?

Extract works by checking assignability; if the second type is not a union, it returns the type if assignable, else never.

Visual Quiz - 3 Questions

Look at the execution_table, what is the Extract type after checking "banana"?

A "" (empty)

B "orange"

C "banana"

D "apple" | "banana"

💡 Hint

Check execution_table row 2 under 'Resulting Extract Type' column.

At which step does the Extract type become "orange"?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

See execution_table row 3 where "orange" is included.

If we change the Extract to Extract<Fruit, "banana" | "lemon">, what would the Extract type be?

A "lemon"

B "orange"

C "banana"

D "banana" | "lemon"

💡 Hint

Only members from Fruit assignable to "banana" | "lemon" are kept; "lemon" is not in Fruit.

Concept Snapshot

Extract<Type, Union>
- Takes two types
- Keeps members of Type assignable to Union
- Result is a new union type
- Useful to filter union members
- If no match, result is never

Full Transcript

The Extract type in TypeScript takes two types: a type to extract and a union type. It checks each member of the union and keeps only those assignable to the second type. For example, given Fruit as "apple" | "banana" | "orange" and Extract<Fruit, "orange" | "lemon">, it checks each Fruit member. "apple" and "banana" are not assignable to "orange" | "lemon", so they are excluded. "orange" is assignable, so it is included. The final Extract type is "orange". This process is shown step-by-step in the execution table and variable tracker. Common confusions include why some members are excluded and what happens if no members match. Extract is useful to filter union types based on assignability.

Practice

1. What does the TypeScript Extract<T, U> utility type do?

easy

A. It combines types T and U into a union type.

B. It removes types from T that are assignable to U.

C. It creates a new type by picking types from T that are assignable to U.

D. It converts a type T into a string literal type.

Solution

1. Step 1: Understand the purpose of Extract

   Extract<T, U> picks from T only those types that can be assigned to U.

2. Step 2: Compare with other utility types

   Unlike Exclude<T, U> which removes types, Extract keeps matching types.

3. Final Answer:

   It creates a new type by picking types from T that are assignable to U. -> Option C

4. Quick Check:

   Extract = picks matching types [OK]

Hint: Extract keeps only types from T assignable to U [OK]

Common Mistakes:

• Confusing Extract with Exclude
• Thinking Extract combines types
• Assuming Extract converts types to strings

2. Which of the following is the correct syntax to extract only string types from a union type U = string | number | boolean?

easy

A. type OnlyString = Extract;

B. type OnlyString = Extract;

C. type OnlyString = Extract;

D. type OnlyString = Extract;

Solution

1. Step 1: Identify the correct order of parameters

   Extract<T, U> takes the big union T first, then the type to pick U.

2. Step 2: Match the desired extracted type

   We want to pick string from U = string | number | boolean, so Extract<U, string> is correct.

3. Final Answer:

   type OnlyString = Extract<U, string>; -> Option A

4. Quick Check:

   Extract<Union, PickType> syntax [OK]

Hint: First param is full union, second is type to pick [OK]

Common Mistakes:

• Swapping the order of parameters
• Picking wrong type in second parameter
• Using Extract with unrelated types

3. Given the code:

type Mixed = string | number | boolean;
type Result = Extract;

What is the type of Result?

medium

A. string

B. never

C. string | number | boolean

D. number | boolean

Solution

1. Step 1: Understand the union types involved

   Mixed is string | number | boolean. We want to extract types assignable to number | boolean.

2. Step 2: Extract matching types

   From Mixed, only number and boolean match number | boolean. string is excluded.

3. Final Answer:

   number | boolean -> Option D

4. Quick Check:

   Extract picks matching types [OK]

Hint: Extract keeps only types assignable to second param [OK]

Common Mistakes:

• Including types not in second parameter
• Confusing Extract with union
• Thinking Extract returns never if partial match

4. Identify the error in this code snippet:

type A = string | number;
type B = Extract;

What will be the type of B?

medium

A. boolean

B. never

C. string | number

D. Error: incompatible types

Solution

1. Step 1: Analyze the Extract parameters

   A is string | number, and we try to extract boolean types.

2. Step 2: Determine matching types

   Since boolean is not assignable to string or number, no types match, so the result is never.

3. Final Answer:

   never -> Option B

4. Quick Check:

   No matching types means never [OK]

Hint: No matches in Extract means type is never [OK]

Common Mistakes:

• Expecting an error instead of never
• Assuming Extract returns original union
• Confusing Extract with Exclude

5. You have a union type type Data = string | number | null | undefined. You want to create a type that excludes null and undefined but only keeps string and number. Which Extract usage achieves this?

hard

A. type CleanData = Extract;

B. type CleanData = Extract;

C. type CleanData = Extract;

D. type CleanData = Extract;

Solution

1. Step 1: Identify the types to keep

   We want to keep only string and number, excluding null and undefined.

2. Step 2: Use Extract with correct second parameter

   Using Extract<Data, string | number> picks only string and number from Data.

3. Final Answer:

   type CleanData = Extract<Data, string | number>; -> Option A

4. Quick Check:

   Extract filters union by matching types [OK]

Hint: Extract with desired types filters out unwanted ones [OK]

Common Mistakes:

• Including null or undefined in second param
• Using Exclude instead of Extract
• Confusing Extract with union