Conditional types for overload replacement in Typescript - Step-by-Step Execution

Concept Flow - Conditional types for overload replacement

Call function with argument type

↓

Check argument type with conditional type

↓

Type matches A

↓

Return type A

↓

Function returns value

The function input type is checked using a conditional type to decide the return type, replacing multiple overloads with one flexible signature.

Execution Sample

Typescript

type Result<T> = T extends string ? number : boolean;
function example<T>(arg: T): Result<T> {
  if (typeof arg === 'string') return arg.length as Result<T>;
  else return false as Result<T>;
}

This code uses a conditional type to return number if input is string, otherwise boolean.

Execution Table

Step	Input arg	Check Condition	Return Type	Returned Value
1	'hello'	Is arg string? Yes	number	5
2	42	Is arg string? No	boolean	false
3	true	Is arg string? No	boolean	false
Exit	-	No more calls	-	-

💡 All test calls completed, function returns values based on conditional type check

Variable Tracker

Variable	Start	After Call 1	After Call 2	After Call 3	Final
arg	-	'hello'	42	true	-
Return Type	-	number	boolean	boolean	-
Returned Value	-	5	false	false	-

Key Moments - 2 Insights

Why does the return type change based on the input argument?

Because the conditional type Result<T> checks if T is string and returns number, else boolean, as shown in execution_table rows 1-3.

How does this replace multiple overloads?

Instead of writing separate function signatures for string and other types, the conditional type handles return type dynamically in one signature, seen in the code sample.

Visual Quiz - 3 Questions

Look at the execution table, what is the return type when the input is 42?

A number

B boolean

C string

D any

💡 Hint

Check row 2 in execution_table where input is 42 and return type is boolean

At which step does the function return a number?

A Step 3

B Step 2

C Step 1

D Exit

💡 Hint

Look at execution_table row 1 where input is 'hello' and return type is number

If the input argument was a boolean, what would the returned value be according to the variable tracker?

A false

B true

C 5

D undefined

💡 Hint

See variable_tracker row 'Returned Value' after call 3 with input true returns false

Concept Snapshot

Conditional types let you pick return types based on input types.
Syntax: type Result<T> = T extends X ? Y : Z;
Use in functions to replace overloads.
Example: string input returns number, else boolean.
Simplifies code and improves type safety.

Full Transcript

This example shows how conditional types in TypeScript can replace multiple function overloads. The function example takes an argument of any type T. Using the conditional type Result<T>, it returns a number if T is string, otherwise a boolean. The execution table traces calls with 'hello', 42, and true, showing how the return type and value change accordingly. The variable tracker records argument values and returned results step by step. Key moments clarify why the return type depends on input and how this approach simplifies overloads. The visual quiz tests understanding of return types and values based on inputs. Overall, conditional types provide a powerful way to write flexible, type-safe functions without many overloads.

Practice

1. What is the main purpose of using conditional types in TypeScript for overload replacement?

easy

A. To enforce runtime type checking in JavaScript

B. To create multiple functions with the same name but different parameters

C. To select a type based on a condition, replacing multiple overloads with one type

D. To convert all types to strings automatically

Solution

1. Step 1: Understand conditional types

   Conditional types allow choosing a type based on a condition, like an if-else for types.

2. Step 2: Relate to overload replacement

   They replace multiple function overloads by selecting the correct return type based on input types.

3. Final Answer:

   To select a type based on a condition, replacing multiple overloads with one type -> Option C

4. Quick Check:

   Conditional types = overload replacement [OK]

Hint: Think 'if-else' but for types to replace overloads [OK]

Common Mistakes:

• Confusing conditional types with runtime checks
• Thinking conditional types create multiple functions
• Believing conditional types convert types to strings

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

easy

A. type Result = if (T extends U) { X } else { Y };

B. type Result = T == U ? X : Y;

C. type Result = T ? U : V;

D. type Result = T extends U ? X : Y;

Solution

1. Step 1: Recall conditional type syntax

   Conditional types use the syntax: type Result = T extends U ? X : Y;

2. Step 2: Compare options

   type Result = T extends U ? X : Y; matches the correct syntax. Options A, C, and D use invalid or incorrect syntax.

3. Final Answer:

   type Result = T extends U ? X : Y; -> Option D

4. Quick Check:

   Conditional type syntax = type Result = T extends U ? X : Y; [OK]

Hint: Remember: 'extends' with '?' and ':' for conditional types [OK]

Common Mistakes:

• Using if-else syntax inside type definitions
• Confusing ternary operator with conditional types
• Using '==' instead of 'extends' keyword

3. Given the code below, what is the type of result?

type IsString<T> = T extends string ? "Yes" : "No";

let result: IsString<number>;

medium

A. "Yes"

B. "No"

C. number

D. string

Solution

1. Step 1: Analyze the conditional type

   The type IsString<T> returns "Yes" if T extends string, else "No".

2. Step 2: Apply to number

   Since number does not extend string, the type is "No".

3. Final Answer:

   "No" -> Option B

4. Quick Check:

   number extends string? No [OK]

Hint: Check if type extends string; if not, result is "No" [OK]

Common Mistakes:

• Assuming number extends string
• Confusing type with value
• Ignoring the conditional type logic

4. Identify the error in this conditional type usage:

type Check<T> = T extends number ? "Num" : "NotNum";

function test<T>(value: T): Check<T> {
  if (typeof value === "number") {
    return "Num";
  } else {
    return "NotNum";
  }
}

medium

A. Function return type does not match because conditional types are not resolved at runtime

B. The conditional type syntax is incorrect

C. The function parameter should be typed as number

D. The if condition should check for string instead of number

Solution

1. Step 1: Understand conditional types vs runtime

   Conditional types exist only at compile time and cannot be used to enforce runtime return types directly.

2. Step 2: Check function return

   The function tries to return a value matching Check<T>, but TypeScript cannot guarantee this at runtime, causing a type error.

3. Final Answer:

   Function return type does not match because conditional types are not resolved at runtime -> Option A

4. Quick Check:

   Conditional types = compile-time only [OK]

Hint: Remember conditional types are compile-time, not runtime checks [OK]

Common Mistakes:

• Thinking conditional types work at runtime
• Misusing conditional type syntax
• Changing parameter type unnecessarily

5. How can conditional types replace multiple overloads in this example?

function format(value: string): string;
function format(value: number): string;
function format(value: any): string {
  return value.toString();
}

Choose the best conditional type signature to replace these overloads.

hard

A. function format<T>(value: T): T extends string | number ? string : never;

B. function format<T>(value: T): string;

C. function format(value: T): T extends string ? string : string;

D. function format<T>(value: T): T extends string ? string : number;

Solution

1. Step 1: Understand original overloads

   Both string and number inputs return a string output.

2. Step 2: Choose conditional type matching overloads

   function format<T>(value: T): T extends string | number ? string : never; restricts T to string or number and returns string for those, else never (disallowed).

3. Step 3: Check other options

   function format<T extends string | number>(value: T): T extends string ? string : string;'s return type is redundant; function format<T>(value: T): string; allows any type; function format<T>(value: T): T extends string ? string : number; returns number incorrectly.

4. Final Answer:

   function format<T>(value: T): T extends string | number ? string : never; -> Option A

5. Quick Check:

   Conditional type restricts inputs and return string [OK]

Hint: Use conditional type to restrict inputs and unify return type [OK]

Common Mistakes:

• Allowing any input type without restriction
• Returning wrong types for some inputs
• Ignoring the need to exclude unsupported types