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

Need a 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

Need a 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

Need a 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

Need a hint?

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