Extract type in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

It creates a new type by selecting from type T only those types that are assignable to type U. Think of it as filtering T to keep only the parts that fit U.

beginner

How would you use Extract<string | number | boolean, number | boolean>?

This extracts the types from string | number | boolean that are assignable to number | boolean. The result is number | boolean.

intermediate

Why is Extract<T, U> useful in real code?

It helps you narrow down types when you have a union and want to keep only certain parts. For example, when filtering event types or extracting specific keys from a union of string literals.

intermediate

What happens if no types in T are assignable to U in Extract<T, U>?

The result is never, meaning no types match the condition.

beginner

Show a simple example of Extract<T, U> with string literal types.

Example:
type T = 'a' | 'b' | 'c';
type U = 'a' | 'c' | 'd';
type Result = Extract<T, U>; // 'a' | 'c'
This keeps only the common string literals between T and U.

What is the result of Extract<string | number | boolean, number>?

A number

B string | number | boolean

C string

D boolean

Extract keeps only types from the first union assignable to the second. Only number fits.

If T has no types assignable to U, what does Extract<T, U> return?

A never

B unknown

C any

D void

When no types match, Extract returns never, meaning no possible value.

Which utility type is the opposite of Extract<T, U>?

A Omit<T, U>

B Pick<T, U>

C Exclude<T, U>

D Partial<T>

Exclude<T, U> removes types assignable to U from T, opposite of Extract.

What does Extract<'a' | 'b' | 'c', 'b' | 'd'> evaluate to?

A never

B 'a' | 'b' | 'c' | 'd'

C 'd'

D 'b'

Only 'b' is common and assignable to both unions.

Can Extract<T, U> be used with non-union types?

A No, it causes a compile error

B Yes, it works the same way

C Yes, but it always returns never

D No, it only works with unions

Extract works with any types, but is most useful with unions to filter types.

Explain in your own words what the Extract<T, U> type does and give a simple example.

Think about keeping only the parts of T that fit inside U.

How can Extract<T, U> help when working with union types in TypeScript?

Consider when you want to keep only some options from a bigger set.

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