Nested conditional types in Typescript - Mini Project: Build & Apply

Understanding Nested Conditional Types in TypeScript

📖 Scenario: Imagine you are building a TypeScript utility that decides the type of a value based on multiple conditions. This helps in creating flexible and safe code that adapts to different input types.

🎯 Goal: You will create nested conditional types to determine if a type is a string, number, or boolean, and return a specific message type accordingly.

📋 What You'll Learn

Create a basic conditional type called CheckType that checks if a type is string or number.

Add a secondary conditional type called NestedCheck that uses CheckType and further checks if the type is boolean.

Use the nested conditional type NestedCheck with different types to see the results.

Print the results using type aliases and comments to show the resolved types.

💡 Why This Matters

🌍 Real World

Nested conditional types help create flexible and safe type utilities in TypeScript, which are useful in libraries, frameworks, and large applications.

💼 Career

Understanding nested conditional types is important for TypeScript developers to write advanced type-safe code and improve code quality in professional projects.

1

Create the basic conditional type CheckType

Create a conditional type called CheckType that takes a generic type T and returns 'string type' if T extends string, otherwise returns 'number type' if T extends number, else returns 'unknown type'.

Typescript

// Your code here

Hint

Use nested extends checks inside the conditional type to handle multiple cases.

2

Create the nested conditional type NestedCheck

Create a new conditional type called NestedCheck that takes a generic type T. It should use CheckType to check if T is string or number. If not, it should check if T extends boolean and return 'boolean type'. Otherwise, return 'other type'.

Typescript

type CheckType = T extends string ? 'string type' : T extends number ? 'number type' : 'unknown type';
// Your code here

Hint

Use the result of CheckType to decide if you need to check for boolean next.

3

Test NestedCheck with different types

Create type aliases TestString, TestNumber, TestBoolean, and TestObject that use NestedCheck with string, number, boolean, and {} respectively.

Typescript

type CheckType = T extends string ? 'string type' : T extends number ? 'number type' : 'unknown type';
type NestedCheck = CheckType extends 'unknown type' ? (T extends boolean ? 'boolean type' : 'other type') : CheckType;
// Your code here

Hint

Use the NestedCheck type with the exact types string, number, boolean, and {}.

4

Print the results using comments

Add comments that show the resolved types of TestString, TestNumber, TestBoolean, and TestObject as 'string type', 'number type', 'boolean type', and 'other type' respectively.

Typescript

type CheckType = T extends string ? 'string type' : T extends number ? 'number type' : 'unknown type';
type NestedCheck = CheckType extends 'unknown type' ? (T extends boolean ? 'boolean type' : 'other type') : CheckType;
type TestString = NestedCheck;
type TestNumber = NestedCheck;
type TestBoolean = NestedCheck;
type TestObject = NestedCheck;
// Your code here

Hint

Use comments to show what each type alias resolves to after applying NestedCheck.

Practice

1.

What does a nested conditional type in TypeScript allow you to do?

Example: type Example<T> = T extends string ? (T extends 'hello' ? number : boolean) : null;

easy

A. Write multiple unrelated types in one statement

B. Check multiple conditions inside one type to decide the result type

C. Create a function inside a type

D. Use loops inside type definitions

Solution

1. Step 1: Understand the conditional type structure

   The type checks if T extends string. If yes, it checks again if T extends 'hello'.

2. Step 2: Recognize nested conditions

   This shows a condition inside another condition, allowing different results based on multiple checks.

3. Final Answer:

   Check multiple conditions inside one type to decide the result type -> Option B

4. Quick Check:

   Nested conditional types = multiple checks [OK]

Hint: Nested ? inside ? means multiple conditions [OK]

Common Mistakes:

• Thinking nested means unrelated types
• Confusing conditional types with functions
• Assuming loops work inside types

2.

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

type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number';

easy

A. type Result<T> = T extends number ? T extends 5 ? 'Five' : 'Other' : 'Not a number';

B. type Result<T> = if T extends number then if T extends 5 then 'Five' else 'Other' else 'Not a number';

C. type Result<T> = T extends number ? { if T extends 5 then 'Five' else 'Other' } : 'Not a number';

D. type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number';

Solution

1. Step 1: Check the syntax of nested conditional types

   Nested conditional types use the syntax condition ? (nested condition ? trueType : falseType) : elseType.

2. Step 2: Identify correct parentheses and keywords

   type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number'; correctly uses parentheses and the ternary ? and : operators. Options A, B, and D have syntax errors or invalid keywords.

3. Final Answer:

   type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number'; -> Option D

4. Quick Check:

   Correct nested syntax = type Result<T> = T extends number ? (T extends 5 ? 'Five' : 'Other') : 'Not a number'; [OK]

Hint: Use parentheses around nested ? : parts [OK]

Common Mistakes:

• Omitting parentheses around nested condition
• Using if/then syntax inside types
• Using braces {} instead of parentheses

3.

What is the resulting type of CheckType<"hello"> given this code?

type CheckType<T> = T extends string ? (T extends "hello" ? number : boolean) : null;

medium

A. boolean

B. string

C. number

D. null

Solution

1. Step 1: Evaluate outer condition

   T is "hello", which extends string, so the outer condition is true.

2. Step 2: Evaluate inner condition

   Now check if T extends "hello". It does, so the inner condition returns number.

3. Final Answer:

   number -> Option C

4. Quick Check:

   "hello" extends "hello" = number [OK]

Hint: Check outer then inner condition stepwise [OK]

Common Mistakes:

• Ignoring inner condition and picking boolean
• Choosing null because of outer else
• Confusing string literal with string type

4.

Identify the error in this nested conditional type:

type Test<T> = T extends number ? T extends 10 ? 'Ten' : 'Other' : 'Not a number'

medium

A. Missing parentheses around the nested conditional

B. Using wrong keywords instead of extends

C. Missing semicolon at the end

D. Incorrect use of quotes around string literals

Solution

1. Step 1: Check nested conditional syntax

   The nested conditional T extends 10 ? 'Ten' : 'Other' must be wrapped in parentheses to group it properly.

2. Step 2: Identify missing parentheses impact

   Without parentheses, TypeScript cannot parse the nested condition correctly, causing a syntax error.

3. Final Answer:

   Missing parentheses around the nested conditional -> Option A

4. Quick Check:

   Nested condition needs parentheses [OK]

Hint: Always wrap nested ? : in parentheses [OK]

Common Mistakes:

• Forgetting parentheses causes syntax errors
• Thinking semicolon is required inside type
• Misusing extends keyword

5.

Given this nested conditional type, what is the type of Result<string | number>?

type Result<T> = T extends string ? (T extends 'a' ? 1 : 2) : (T extends number ? 3 : 4);

hard

A. 1 | 2 | 3

B. 1 | 2 | 3 | 4

C. 2 | 3

D. never

Solution

1. Step 1: Distribute conditional over union types

   For T = string | number, TypeScript applies the conditional to each union member separately.

2. Step 2: Evaluate each branch

   For string: if 'a' then 1 else 2. For number: 3. So combined type is 1 | 2 | 3.

3. Final Answer:

   1 | 2 | 3 -> Option A

4. Quick Check:

   Union splits nested condition = 1|2|3 [OK]

Hint: Conditional types distribute over unions [OK]

Common Mistakes:

• Including 4 which is for non-string/number
• Not splitting union types correctly
• Assuming single output type for union