Conditional type syntax in Typescript - Mini Project: Build & Apply

Conditional type syntax

📖 Scenario: Imagine you are building a simple TypeScript program that decides the type of a variable based on a condition. This is useful when you want your code to be flexible and safe at the same time.

🎯 Goal: You will create a conditional type that checks if a type is string. If it is, the type will become number, otherwise it will become boolean. Then you will use this conditional type with different example types and print the results.

📋 What You'll Learn

Create a conditional type called TypeCheck that checks if a generic type T extends string.

If T extends string, TypeCheck<T> should be number.

Otherwise, TypeCheck<T> should be boolean.

Create two variables: result1 with type TypeCheck<string> and result2 with type TypeCheck<number>.

Assign 42 to result1 and true to result2.

Print result1 and result2 to the console.

💡 Why This Matters

🌍 Real World

Conditional types help developers write code that changes behavior based on types, making libraries and applications more flexible and safer.

💼 Career

Understanding conditional types is important for TypeScript developers working on large codebases or libraries where type safety and flexibility are critical.

1

Create the conditional type

Create a conditional type called TypeCheck that takes a generic type T. Use the syntax T extends string ? number : boolean to define it.

Typescript

# Your code here

Hint

Use the extends keyword inside the type definition to check the condition.

2

Create variables using the conditional type

Create a variable called result1 with type TypeCheck<string> and assign it the value 42. Then create a variable called result2 with type TypeCheck<number> and assign it the value true.

Typescript

type TypeCheck = T extends string ? number : boolean;
# Your code here

Hint

Remember to specify the type of each variable using TypeCheck with the correct generic type.

3

Add a function to display the results

Create a function called displayResults that takes two parameters: a of type number and b of type boolean. Inside the function, use console.log to print both values with labels.

Typescript

type TypeCheck = T extends string ? number : boolean;

let result1: TypeCheck = 42;
let result2: TypeCheck = true;

# Your code here

Hint

Use console.log twice to print both values with clear labels.

4

Call the function to show the output

Call the function displayResults with result1 and result2 as arguments to print their values.

Typescript

type TypeCheck = T extends string ? number : boolean;

let result1: TypeCheck = 42;
let result2: TypeCheck = true;

function displayResults(a: number, b: boolean): void {
    console.log("Result 1:", a);
    console.log("Result 2:", b);
}

# Your code here

Hint

Call displayResults with the two variables you created.

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