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.