Extract type in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Extract type example?

Consider the following TypeScript code using the Extract utility type. What is the type of Result?

Typescript

type A = 'apple' | 'banana' | 'cherry';
type B = 'banana' | 'dragonfruit';
type Result = Extract<A, B>;

// What is the type of Result?

A "banana" | "dragonfruit"

B "apple" | "banana"

C "banana"

D "apple" | "banana" | "cherry"

💡 Hint

Extract keeps only the types that are in both sets.

The Extract type keeps only the types that are assignable to both A and B. Since only 'banana' is common, Result is 'banana'.

❓ Predict Output

intermediate

What is the output type of Extract with object types?

Given these types, what is the type of Selected after using Extract?

Typescript

type Fruit = { name: string; color: string } | { name: string; taste: string };
type SweetFruit = { name: string; taste: string };
type Selected = Extract<Fruit, SweetFruit>;

// What is Selected?

A never

B { name: string }

C { name: string; color: string } | { name: string; taste: string }

D { name: string; taste: string }

💡 Hint

Extract picks types from the first union that are assignable to the second.

Only the type { name: string; taste: string } from Fruit matches SweetFruit, so Selected is that type.

❓ Predict Output

advanced

What is the type of Z when Extract has no overlapping types?

Look at this code snippet. What is the type of Z?

Typescript

type X = string | number;
type Y = boolean;
type Z = Extract<X, Y>;

// What is Z?

A Z is never because no types overlap, no error occurs

B TypeScript error because Extract requires overlapping types

C Z is string | number | boolean

D Z is boolean

💡 Hint

Extract returns never if no types overlap.

Extract returns never if there is no overlap between the two types. No error occurs.

❓ Predict Output

advanced

What is the type of Result after extracting keys from an interface?

Given this interface and Extract usage, what is the type of Result?

Typescript

interface Person {
  name: string;
  age: number;
  location: string;
}
type Keys = keyof Person;
type Result = Extract<Keys, 'age' | 'location' | 'email'>;

// What is Result?

A "age" | "location"

B "name" | "age" | "location" | "email"

C "email"

D "name"

💡 Hint

Extract picks keys common to both sets.

Keys are 'name' | 'age' | 'location'. Extract keeps only keys also in 'age' | 'location' | 'email', so Result is 'age' | 'location'.

🧠 Conceptual

expert

Which option best describes the Extract utility type behavior?

Select the statement that correctly describes what the Extract utility type does in TypeScript.

A Extract<T, U> creates a new type with all types from U that are assignable to T.

B Extract<T, U> creates a new type with all types from T that are assignable to U.

C Extract<T, U> removes all types from T that are assignable to U.

D Extract<T, U> combines all types from T and U into a union.

💡 Hint

Think about which types from T remain after Extract.

Extract keeps only those types from T that can be assigned to U, filtering T by U.

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