Extract type in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extract the type of elements from the array.

Typescript

type ElementType = Extract<[1], string[]>;

Drag options to blanks, or click blank then click option'

Astring[]

Bnumber[]

Cboolean[]

Dany[]

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a type that is not part of the union.

Confusing the order of types in Extract.

The Extract utility type extracts from the first type those types that are assignable to the second. Here, it extracts string[] from the union.

2fill in blank

medium

Complete the code to extract only the string literal types from the union.

Typescript

type OnlyStrings = Extract<'a' | 1 | true, [1]>;

Drag options to blanks, or click blank then click option'

Anumber

Bboolean

Cstring

Dstring | number

Attempts:

3 left

💡 Hint

Common Mistakes

Using a union type instead of a single type.

Using the wrong primitive type.

The Extract type keeps only the types assignable to string, so only the string literals remain.

3fill in blank

hard

Fix the error in the code to correctly extract the function type from the union.

Typescript

type FuncType = Extract<() => void | string, [1]>;

Drag options to blanks, or click blank then click option'

Astring

BFunction

Cvoid

D() => void

Attempts:

3 left

💡 Hint

Common Mistakes

Using Function which is too broad.

Extracting the wrong type from the union.

The Extract type extracts the function type () => void from the union.

4fill in blank

hard

Fill both blanks to extract only the number types from the union and assign it to the variable.

Typescript

type NumbersOnly = Extract<[1], [2]>;

Drag options to blanks, or click blank then click option'

A'a' | 1 | 2 | true

Bnumber

Cstring

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the order of the types in Extract.

Using the wrong type to extract.

The first blank is the union type containing strings, numbers, and booleans. The second blank is number to extract only number types.

5fill in blank

hard

Fill all three blanks to extract the types assignable to string or boolean from the union.

Typescript

type Extracted = Extract<[1], [2] | [3]>;

Drag options to blanks, or click blank then click option'

A'hello' | 42 | false | true

Bstring

Cboolean

Dnumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using number instead of boolean.

Not using a union type in the second argument.

The first blank is the union type with string, number, and boolean literals. The second and third blanks are string and boolean to extract those types.

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