Exclude type in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to exclude the type 'string' from the union.

Typescript

type Result = Exclude<string | number | boolean, [1]>;

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

Astring

Bboolean

Cnumber

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using a type that is not in the union to exclude.

Confusing Exclude with Extract.

The Exclude type removes the specified type from the union. Here, 'string' is excluded.

2fill in blank

medium

Complete the code to exclude 'null' and 'undefined' from the type.

Typescript

type NonNullableType = Exclude<string | null | undefined, [1]>;

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

Anull | undefined

Bstring

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Excluding only one of the types instead of both.

Using a single type instead of a union.

Exclude removes all types in the second parameter from the first union type. Here, both 'null' and 'undefined' are excluded.

3fill in blank

hard

Fix the error in excluding 'number' from the union type.

Typescript

type CleanType = Exclude<string | number | boolean, [1]>;

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

Aboolean

Bnumber

Cstring

Dnever

Attempts:

3 left

💡 Hint

Common Mistakes

Excluding a type not present in the union.

Using 'never' which excludes nothing.

To exclude 'number' from the union, you must specify 'number' as the second parameter.

4fill in blank

hard

Fill both blanks to exclude 'string' and 'boolean' from the union.

Typescript

type Filtered = Exclude<[1], [2]>;

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

Astring | number | boolean

Bstring | boolean

Cnumber | boolean

Dstring | number

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the two blanks.

Excluding types not in the original union.

The first blank is the original union type. The second blank is the union of types to exclude.

5fill in blank

hard

Fill all three blanks to exclude 'null' and 'undefined' from the union.

Typescript

type Cleaned = Exclude<[1], [2] | [3]>;

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

Astring | number | boolean | null | undefined | false

Bnull

Cundefined

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Not including all types in the first blank.

Excluding only some of the unwanted types.

The first blank is the full union type. The second and third blanks are types to exclude combined with '|'.

Practice

1. What does the TypeScript Exclude utility type do?

easy

A. Converts a type to a string

B. Adds new types to a union type

C. Removes specific types from a union type

D. Creates a readonly version of a type

Solution

1. Step 1: Understand the purpose of Exclude

   Exclude is designed to remove certain types from a union type.

2. Step 2: Compare with other utility types

   Unlike adding or converting types, Exclude specifically filters out unwanted types.

3. Final Answer:

   Removes specific types from a union type -> Option C

4. Quick Check:

   Exclude = Remove types [OK]

Hint: Exclude filters out unwanted types from unions [OK]

Common Mistakes:

• Thinking it adds types instead of removing
• Confusing with Partial or Readonly utility types
• Assuming it converts types to strings

2. Which of the following is the correct syntax to exclude type 'b' from the union 'a' | 'b' | 'c'?

easy

A. type Result = Exclude<'a' | 'b' | 'c', ['b']>;

B. type Result = Exclude<'a' | 'b' | 'c', 'b'>;

C. type Result = Exclude<'a' | 'b' | 'c'>;

D. type Result = Exclude<'a' | 'b' | 'c', 'd'>;

Solution

1. Step 1: Check the syntax of Exclude

   The correct syntax is Exclude<UnionType, ExcludedType>.

2. Step 2: Match the correct exclusion

   type Result = Exclude<'a' | 'b' | 'c', 'b'>; correctly excludes 'b' from the union 'a' | 'b' | 'c'.

3. Final Answer:

   type Result = Exclude<'a' | 'b' | 'c', 'b'>; -> Option B

4. Quick Check:

   Exclude syntax = Exclude<Union, TypeToRemove> [OK]

Hint: Use Exclude syntax [OK]

Common Mistakes:

• Using array syntax for second parameter
• Omitting the second parameter
• Excluding a type not in the union

3. What is the resulting type of this code?

type Letters = 'x' | 'y' | 'z';
type Result = Exclude;

medium

A. 'x'

B. 'x' | 'y' | 'z'

C. 'y' | 'z'

D. never

Solution

1. Step 1: Identify the original union type

   Letters is 'x' | 'y' | 'z'.

2. Step 2: Apply Exclude to remove 'y' and 'z'

   Removing 'y' and 'z' leaves only 'x'.

3. Final Answer:

   'x' -> Option A

4. Quick Check:

   Exclude removes 'y' and 'z', leaving 'x' [OK]

Hint: Exclude removes all listed types from the union [OK]

Common Mistakes:

• Thinking it keeps excluded types
• Confusing with intersection types
• Assuming result is never when some types remain

4. Identify the error in this TypeScript code:

type Colors = 'red' | 'green' | 'blue';
type NoGreen = Exclude<Colors>;

medium

A. Missing second parameter in Exclude

B. Colors is not a union type

C. Exclude cannot be used with string literals

D. No error, code is correct

Solution

1. Step 1: Check the Exclude syntax

   Exclude requires two parameters: the union type and the type(s) to exclude.

2. Step 2: Identify the missing parameter

   The code only provides one parameter, missing the second one to exclude.

3. Final Answer:

   Missing second parameter in Exclude -> Option A

4. Quick Check:

   Exclude needs two types: Union and Excluded [OK]

Hint: Exclude always needs two type parameters [OK]

Common Mistakes:

• Forgetting the second parameter
• Assuming Exclude works with one argument
• Confusing Exclude with other utility types

5. Given this code, what is the type of Filtered?

type Status = 'success' | 'error' | 'pending' | 'cancelled';
type Filtered = Exclude;

hard

A. 'error' | 'cancelled' | 'unknown'

B. 'success' | 'pending' | 'unknown'

C. never

D. 'success' | 'pending'

Solution

1. Step 1: Identify the original union and excluded types

   Status is 'success' | 'error' | 'pending' | 'cancelled'. We exclude 'error', 'cancelled', and 'unknown'.

2. Step 2: Remove excluded types from the union

   'error' and 'cancelled' are removed. 'unknown' is not in Status, so it has no effect.

3. Final Answer:

   'success' | 'pending' -> Option D

4. Quick Check:

   Exclude removes only matching types from union [OK]

Hint: Exclude only removes types present in the union [OK]

Common Mistakes:

• Including excluded types in the result
• Adding excluded types not in the union
• Assuming result is never if unknown type excluded