Why conditional types are needed in Typescript - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a type that returns 'string' if T is a string, otherwise 'number'.

Typescript

type CheckType<T> = T extends [1] ? 'string' : 'number';

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

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' instead of 'string' in the condition.

The conditional type checks if T extends string. If yes, it returns 'string', else 'number'.

2fill in blank

medium

Complete the code to create a type that returns 'true' if T is assignable to number, otherwise 'false'.

Typescript

type IsNumber<T> = T extends [1] ? true : false;

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

Anumber

Bstring

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' instead of 'number' in the condition.

The conditional type checks if T extends number. If yes, it returns true, else false.

3fill in blank

hard

Fix the error in the conditional type that should return 'Array' if T is an array, else 'NotArray'.

Typescript

type CheckArray<T> = T extends [1] ? 'Array' : 'NotArray';

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

AArray

B[]

Cany[]

DArray<any>

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Array' without generic type causes error.

To check if T is an array type, use any[] in the conditional type.

4fill in blank

hard

Fill both blanks to create a conditional type that returns the element type if T is an array, otherwise T itself.

Typescript

type ElementType<T> = T extends [1] ? [2] : T;

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

Aany[]

BT[number]

CArray<T>

DT[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using Array instead of any[] in condition.

The type checks if T is an array (any[]). If yes, it returns the element type using T[number], else returns T.

5fill in blank

hard

Fill all three blanks to create a conditional type that returns 'string' if T is string, 'number' if T is number, otherwise 'unknown'.

Typescript

type TypeName<T> = T extends [1] ? 'string' : T extends [2] ? 'number' : [3];

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

Astring

Bnumber

C'unknown'

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using any instead of 'unknown' in the else case.

This conditional type checks if T is string, then returns 'string'. Else if T is number, returns 'number'. Otherwise, returns 'unknown'.

Practice

1. Why do we need conditional types in TypeScript?
type Result<T> = T extends number ? string : boolean;

easy

A. To create loops in type definitions

B. To declare variables without types

C. To run code only if a condition is true

D. To select a type based on a condition, making code flexible

Solution

1. Step 1: Understand conditional types purpose

   Conditional types allow choosing one type or another based on a condition, like T extends number ? string : boolean.

2. Step 2: Match the purpose with options

   To select a type based on a condition, making code flexible correctly describes this as selecting a type based on a condition for flexibility.

3. Final Answer:

   To select a type based on a condition, making code flexible -> Option D

4. Quick Check:

   Conditional types choose types conditionally = D [OK]

Hint: Conditional types pick types based on conditions [OK]

Common Mistakes:

• Confusing conditional types with runtime if statements
• Thinking conditional types declare variables
• Believing conditional types create loops

2. Which of the following is the correct syntax for a conditional type in TypeScript?

easy

A. type Check<T> = T extends string ? number : boolean;

B. type Check<T> = if T then string else number;

C. type Check<T> = T ? string : number;

D. type Check<T> = T == string ? number : boolean;

Solution

1. Step 1: Recall conditional type syntax

   The correct syntax uses extends to check type relations: T extends U ? X : Y.

2. Step 2: Identify correct option

   type Check<T> = T extends string ? number : boolean; matches this syntax exactly. Options A, B, and D use invalid syntax for types.

3. Final Answer:

   type Check<T> = T extends string ? number : boolean; -> Option A

4. Quick Check:

   Conditional type syntax uses extends = C [OK]

Hint: Look for 'extends' keyword in conditional types [OK]

Common Mistakes:

• Using runtime if/else syntax in types
• Using == instead of extends
• Omitting the extends keyword

3. What is the output type of this code?

type Check<T> = T extends string ? number : boolean;
type Result = Check<'hello'>;

medium

A. string

B. number

C. boolean

D. any

Solution

1. Step 1: Evaluate the conditional type with T = 'hello'

   Since 'hello' is a string, T extends string is true.

2. Step 2: Determine the resulting type

   Because the condition is true, the type becomes number.

3. Final Answer:

   number -> Option B

4. Quick Check:

   'hello' extends string = number [OK]

Hint: Check if type matches condition to pick true branch [OK]

Common Mistakes:

• Confusing the true and false branches
• Thinking the output is string literal
• Assuming any or unknown type

4. Identify the error in this conditional type:

type Check<T> = T extends number ? 'num' : 'not num';
type Result = Check<>;

medium

A. Wrong use of extends keyword

B. Conditional types cannot return string literals

C. Missing type argument in Check<>

D. Result type must be declared with let or const

Solution

1. Step 1: Check usage of generic type parameter

   The type alias Check requires a type argument, but Check<> is missing it.

2. Step 2: Confirm other parts are correct

   The extends keyword and string literal return types are valid. Declaring a type does not use let or const.

3. Final Answer:

   Missing type argument in Check<> -> Option C

4. Quick Check:

   Generic types need arguments = B [OK]

Hint: Always provide type arguments for generic types [OK]

Common Mistakes:

• Leaving generic type arguments empty
• Confusing type aliases with variables
• Thinking extends is invalid in types

5. Given this conditional type, what is the type of Flattened?

type Flatten<T> = T extends Array ? U : T;
type Flattened = Flatten;

hard

A. number | string

B. number[] | string

C. Array

D. never

Solution

1. Step 1: Analyze the conditional type with union input

   The input is number[] | string. Conditional types distribute over unions, so it applies separately to number[] and string.

2. Step 2: Apply Flatten to each part

   For number[], it matches Array<infer U> with U = number, so result is number.
   For string, it does not match array, so result is string.

3. Step 3: Combine results

   The combined result is number | string.

4. Final Answer:

   number | string -> Option A

5. Quick Check:

   Conditional types distribute over unions = A [OK]

Hint: Remember conditional types distribute over union types [OK]

Common Mistakes:

• Not distributing over union types
• Returning array instead of element type
• Confusing infer usage