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.