Conditional type with generics in Typescript - Mini Project: Build & Apply

Conditional type with generics

📖 Scenario: Imagine you are building a simple system that handles different types of user inputs. Sometimes the input is a string, and sometimes it is a number. You want to create a type that changes based on the input type to help your program understand what kind of data it is working with.

🎯 Goal: You will create a conditional type using generics in TypeScript that returns string if the input type is number, and returns number if the input type is string. Then, you will test this type with different inputs and print the results.

📋 What You'll Learn

Create a generic conditional type called SwapType that takes a type parameter T.

If T is number, SwapType<T> should be string.

If T is string, SwapType<T> should be number.

Create variables using SwapType with number and string to test the conditional type.

Print the values of these variables.

💡 Why This Matters

🌍 Real World

Conditional types with generics help create flexible and safe code that adapts to different data types automatically.

💼 Career

Understanding conditional types is important for TypeScript developers to write reusable and type-safe code in modern web applications.

1

Create the generic conditional type SwapType

Create a generic conditional type called SwapType that takes a type parameter T. It should return string if T is number, and number if T is string.

Typescript

// Your code here

Hint

Use the syntax type SwapType<T> = T extends number ? string : number; to create the conditional type.

2

Create variables using SwapType with number and string

Create a variable called stringValue of type SwapType<number> and assign it the value "hello". Then create a variable called numberValue of type SwapType<string> and assign it the value 42.

Typescript

type SwapType = T extends number ? string : number;
// Your code here

Hint

Remember to use const stringValue: SwapType<number> = "hello"; and const numberValue: SwapType<string> = 42;.

3

Create a function to display the values

Create a function called displayValues that takes two parameters: val1 of type SwapType<number> and val2 of type SwapType<string>. Inside the function, create a string that combines both values separated by a comma and assign it to a variable called result.

Typescript

type SwapType = T extends number ? string : number;

const stringValue: SwapType = "hello";
const numberValue: SwapType = 42;

// Your code here

Hint

Use a template string to combine val1 and val2 inside the function.

4

Print the combined result using displayValues

Call the function displayValues with stringValue and numberValue as arguments. Print the returned result using console.log.

Typescript

type SwapType = T extends number ? string : number;

const stringValue: SwapType = "hello";
const numberValue: SwapType = 42;

function displayValues(val1: SwapType, val2: SwapType) {
    const result = `${val1}, ${val2}`;
    return result;
}

// Your code here

Hint

Use console.log(displayValues(stringValue, numberValue)); to print the combined string.

Practice

1. What does a conditional type with generics in TypeScript do?

easy

A. It creates a new variable with a fixed type.

B. It selects one type or another based on a condition using generic types.

C. It runs a function only if a condition is true.

D. It converts all types to strings.

Solution

1. Step 1: Understand conditional types

   Conditional types choose between two types depending on a condition.

2. Step 2: Understand generics

   Generics allow types to be flexible and work with many types.

3. Final Answer:

   It selects one type or another based on a condition using generic types. -> Option B

4. Quick Check:

   Conditional type with generics = Selects type based on condition [OK]

Hint: Remember: conditional types pick types, generics make them flexible [OK]

Common Mistakes:

• Thinking conditional types run code instead of selecting types
• Confusing generics with fixed types
• Assuming conditional types convert values

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

easy

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

B. function Result<T> = T ? number : boolean;

C. let Result<T> = T extends string ? number : boolean;

D. class Result<T> = T extends string ? number : boolean;

Solution

1. Step 1: Identify correct conditional type syntax

   Conditional types use the syntax: type Name<T> = T extends Condition ? TrueType : FalseType;

2. Step 2: Check each option

   type Result<T> = T extends string ? number : boolean; matches the correct syntax. Others use function, let, or class incorrectly.

3. Final Answer:

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

4. Quick Check:

   Correct conditional type syntax = type Result<T> = T extends string ? number : boolean; [OK]

Hint: Conditional types use 'type' keyword with generic and '? :' [OK]

Common Mistakes:

• Using function or class instead of type
• Missing the 'extends' keyword
• Using let instead of type

3. What is the type of Result<string> given this code?

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

medium

A. boolean

B. never

C. number

D. string

Solution

1. Step 1: Check the condition for T = string

   The condition is T extends number. Since string does not extend number, the condition is false.

2. Step 2: Determine the resulting type

   Because the condition is false, the type after the colon is chosen, which is string.

3. Final Answer:

   string -> Option D

4. Quick Check:

   string extends number? No, so type = string [OK]

Hint: Check if generic type matches condition; else pick false type [OK]

Common Mistakes:

• Assuming string extends number
• Choosing the true type instead of false
• Confusing extends with assignment

4. Identify the error in this conditional type with generics:

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

medium

A. Incorrect use of generic parameter

B. Missing colon ':' after condition

C. Missing type after 'extends' keyword

D. Using 'type' instead of 'interface'

Solution

1. Step 1: Analyze the conditional type syntax

   The syntax requires a type after 'extends' to check the condition.

2. Step 2: Identify the missing part

   Here, 'T extends ?' is missing the type to compare with, causing a syntax error.

3. Final Answer:

   Missing type after 'extends' keyword -> Option C

4. Quick Check:

   Conditional type needs a type after 'extends' [OK]

Hint: Always put a type after 'extends' in conditional types [OK]

Common Mistakes:

• Leaving out the type after 'extends'
• Confusing '?' placement
• Using interface instead of type for conditional types

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

type IsArray<T> = T extends any[] ? 'array' : 'not array';
type Output = IsArray<string[] | number>;

hard

A. 'array' | 'not array'

B. 'array'

C. 'not array'

D. string[] | number

Solution

1. Step 1: Understand conditional type with union

   When conditional types receive a union, they distribute over each member separately.

2. Step 2: Apply condition to each union member

   string[] extends any[]? Yes, so 'array'. number extends any[]? No, so 'not array'.

3. Step 3: Combine results

   The result is the union of both: 'array' | 'not array'.

4. Final Answer:

   'array' | 'not array' -> Option A

5. Quick Check:

   Conditional distributes over union = 'array' | 'not array' [OK]

Hint: Conditional types distribute over unions automatically [OK]

Common Mistakes:

• Assuming single result for union input
• Forgetting distribution over union types
• Confusing output with input types