Conditional type syntax in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the basic syntax of a conditional type in TypeScript?

A conditional type uses the syntax:
T extends U ? X : Y
It means if type T can be assigned to type U, then the type is X, otherwise it is Y.

beginner

Explain the role of extends in conditional types.

In conditional types, extends checks if one type can be assigned to another. It acts like a question: "Does T fit into U?" If yes, the true branch is chosen; if no, the false branch is chosen.

beginner

What does this conditional type do?
type IsString<T> = T extends string ? true : false;

It checks if the type T is a string. If yes, it returns true, otherwise false. For example, IsString<'hello'> = true and IsString<42> = false.

intermediate

Can conditional types be nested in TypeScript?

Yes, conditional types can be nested inside each other to create more complex type logic. For example:
type Nested<T> = T extends string ? (T extends 'hello' ? true : false) : false;

intermediate

What happens if the condition in a conditional type is distributive?

If the type T is a union, the conditional type is applied to each member separately, then results are combined. This is called distributive conditional types.

What does this conditional type return?
type Check<T> = T extends number ? 'Yes' : 'No';
What is Check<string>?

A number

B 'Yes'

C string

D 'No'

Since string does not extend number, the false branch 'No' is returned.

In T extends U ? X : Y, what happens if T is a union type?

A The conditional type applies to each member of the union separately

B The conditional type fails to compile

C The conditional type ignores the union and treats it as one type

D The conditional type always returns Y

Conditional types distribute over unions, applying the condition to each member individually.

What keyword is used to check type compatibility in conditional types?

A extends

B implements

C is

D typeof

The keyword extends is used to check if one type can be assigned to another.

Which of these is a valid conditional type?

A type T = if (T extends U) X else Y;

B type T = string ? number : boolean;

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

D type T = T is U ? X : Y;

The correct syntax uses extends with the ternary operator: T extends U ? X : Y.

What is the result of this type?
type Result = 'a' | 'b' extends string ? true : false;

A false

B true

C 'a' | 'b'

D string

The union 'a' | 'b' extends string, so the condition is true.

Explain how conditional types work in TypeScript and give a simple example.

Think of it like an if-else for types.

Describe what distributive conditional types are and why they are useful.

Consider how a condition applies to multiple types inside a union.

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