Conditional type syntax in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Typescript

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

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

Astring

Bnumber

Cany

Dboolean

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'number' instead of 'string' as the true branch.

Confusing the order of true and false branches.

The conditional type checks if T extends number. If yes, it returns string, otherwise boolean.

2fill in blank

medium

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

Typescript

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

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.

Swapping true and false branches.

The conditional type checks if T extends string. If yes, it returns true, otherwise false.

3fill in blank

hard

Fix the error in the conditional type that should return 'never' if T is 'null', otherwise T.

Typescript

type NonNull<T> = T extends [1] ? never : T;

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

Avoid

Bundefined

Cnull

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'undefined' instead of 'null' in the condition.

Returning 'never' in the wrong branch.

The conditional type checks if T extends null. If yes, it returns never, otherwise it returns T.

4fill in blank

hard

Fill both blanks to create a conditional type that returns 'Array<U>' if T is an array of U, otherwise T.

Typescript

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

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

AArray<infer U>

BU

CT

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Not using 'infer' keyword.

Using 'T' instead of 'U' in the second blank.

This conditional type uses infer U to extract the element type from the array T. If T is an array, it returns Array<U>, otherwise it returns T.

5fill in blank

hard

Fill the two blanks to create a conditional type that returns the type of the property K in T if it exists, otherwise 'never'.

Typescript

type PropType<T, K extends keyof any> = K extends keyof T ? T[1] : [2];

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

A[K]

Bnever

C.

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot notation instead of bracket notation.

Returning 'any' instead of 'never' in the false branch.

This conditional type checks if K is a key of T. If yes, it returns the type of property K in T using T[K]. Otherwise, it returns never.

Practice

1. What does a conditional type in TypeScript do?
T extends U ? X : Y

easy

A. Checks if T equals U and returns a boolean

B. Chooses type X if T is assignable to U, otherwise type Y

C. Creates a new type by combining T and U

D. Defines a function that returns X or Y

Solution

1. Step 1: Understand the conditional type syntax

   The syntax T extends U ? X : Y means if type T can be assigned to type U, then use type X.

2. Step 2: Interpret the meaning

   If T is not assignable to U, then the type becomes Y instead.

3. Final Answer:

   Chooses type X if T is assignable to U, otherwise type Y -> Option B

4. Quick Check:

   Conditional type picks between X and Y based on T extends U [OK]

Hint: Remember: condition ? trueType : falseType [OK]

Common Mistakes:

• Thinking it returns a boolean value
• Confusing extends with equality check
• Assuming it creates a function

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

easy

A. type Result = T extends U then X else Y;

B. type Result = if (T extends U) X else Y;

C. type Result = T extends U ? X : Y;

D. type Result = T ? U : X : Y;

Solution

1. Step 1: Recall the correct conditional type syntax

   TypeScript uses type Result = T extends U ? X : Y; to define conditional types.

2. Step 2: Identify incorrect options

   Options A, B, and C use invalid syntax not supported by TypeScript.

3. Final Answer:

   type Result = T extends U ? X : Y; -> Option C

4. Quick Check:

   Correct conditional type syntax uses ? and : [OK]

Hint: Look for ? and : after extends keyword [OK]

Common Mistakes:

• Using if-else keywords inside type definitions
• Misplacing question mark or colon
• Writing 'then' instead of '?'

3. What is the resulting type of this code?

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

medium

A. number

B. boolean

C. string

D. 'hello'

Solution

1. Step 1: Analyze the conditional type Check<T>

   If T extends string, then the type is number; otherwise boolean.

2. Step 2: Substitute T with 'hello'

   'hello' is a string literal, so it extends string, making the type number.

3. Final Answer:

   number -> Option A

4. Quick Check:

   'hello' extends string -> number [OK]

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

Common Mistakes:

• Confusing the output type with input type
• Assuming literal types don't extend their base types
• Choosing boolean instead of number

4. Identify the error in this conditional type:

type Example<T> = T extends number ? 'num' : 'not num'

medium

A. Conditional types cannot return string literals

B. Incorrect use of extends keyword

C. Missing semicolon after type definition

D. No error, syntax is correct

Solution

1. Step 1: Review the conditional type syntax

   The syntax type Example<T> = T extends number ? 'num' : 'not num' is valid in TypeScript.

2. Step 2: Check for syntax errors

   Semicolon after type alias is optional; string literals are valid return types.

3. Final Answer:

   No error, syntax is correct -> Option D

4. Quick Check:

   Conditional types can return string literals [OK]

Hint: Conditional types allow any valid type as result [OK]

Common Mistakes:

• Expecting semicolon is mandatory
• Thinking extends is only for classes
• Believing string literals can't be types

5. Given this conditional type:

type Flatten<T> = T extends any[] ? T[number] : T;

What is the type of Flatten<string[] | number>?

hard

A. string | number

B. string[] | number

C. string

D. number

Solution

1. Step 1: Understand the conditional type Flatten<T>

   If T is an array type, it returns the element type (T[number]), else returns T itself.

2. Step 2: Apply Flatten to union type string[] | number

   Conditional types distribute over unions, so Flatten<string[] | number> = Flatten<string[]> | Flatten<number> = string | number.

3. Final Answer:

   string | number -> Option A

4. Quick Check:

   Conditional types distribute over unions [OK]

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

Common Mistakes:

• Not distributing over union types
• Returning array type instead of element type
• Confusing T[number] with T