Why conditional types are needed in Typescript - Quick Recap

Recall & Review

beginner

What is a conditional type in TypeScript?

A conditional type chooses one type or another based on a condition, like an if-else for types.

beginner

Why do we need conditional types in TypeScript?

They let us create flexible types that change based on input types, making code safer and easier to reuse.

intermediate

How do conditional types improve code safety?

By selecting types based on conditions, they prevent errors by ensuring variables have the right type in different situations.

beginner

Give a simple example of a conditional type.

Example: `type IsString<T> = T extends string ? true : false;` This checks if T is a string and returns true or false.

intermediate

What problem do conditional types solve that regular types can't?

They solve the problem of needing types that adapt based on other types, which normal static types can't do.

What does a conditional type in TypeScript do?

A Runs code conditionally

B Selects a type based on a condition

C Defines a function

D Creates a variable

Conditional types choose one type or another depending on a condition.

Which syntax represents a conditional type?

A T extends U ? X : Y

B function foo() {}

C let x = 5;

D class MyClass {}

The syntax 'T extends U ? X : Y' is how conditional types are written.

Why are conditional types useful?

A They create variables

B They speed up code execution

C They replace all functions

D They allow types to change based on other types

Conditional types let types adapt depending on other types, increasing flexibility.

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

A 'No'

B number

C 'Yes'

D string

Since string does not extend number, the type returns 'No'.

Can conditional types help reduce code duplication?

A Only in JavaScript

B No, they increase duplication

C Yes, by creating flexible reusable types

D Only for variables

Conditional types let you write one type that works for many cases, reducing repeated code.

Explain in your own words why conditional types are needed in TypeScript.

Think about how types can change depending on other types.

Describe a simple example where a conditional type improves your code.

Try to imagine checking if a type is string or number.

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