Conditional types for overload replacement in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of conditional type overload replacement

What is the output of the following TypeScript code when calling getValue(10)?

Typescript

type Result<T> = T extends number ? string : boolean;
function getValue<T>(input: T): Result<T> {
  if (typeof input === 'number') {
    return (input.toString()) as Result<T>;
  } else {
    return (true) as Result<T>;
  }
}
console.log(getValue(10));

A TypeError at runtime

B "10"

C 10

D true

💡 Hint

Look at the conditional type Result and what it returns for number inputs.

The conditional type Result returns string if T is number. Since 10 is a number, getValue returns input.toString(), which is "10".

❓ Predict Output

intermediate

Return type of conditional type with union

Given the code below, what is the type of result after calling processValue('hello')?

Typescript

type Process<T> = T extends string ? number : boolean;
function processValue<T>(val: T): Process<T> {
  if (typeof val === 'string') {
    return val.length as Process<T>;
  } else {
    return false as Process<T>;
  }
}
const result = processValue('hello');

A number

B string

C boolean

D string | number

💡 Hint

Check the conditional type Process for string inputs.

For string input, Process resolves to number, so result is of type number.

🔧 Debug

advanced

Identify the error in conditional type overload replacement

What error does the following TypeScript code produce?

Typescript

type Output<T> = T extends string ? number : string;
function convert<T>(input: T): Output<T> {
  if (typeof input === 'string') {
    return input.length; // line A
  } else {
    return input; // line B
  }
}

A No error, code compiles fine

B Type 'string' is not assignable to type 'Output<T>' at line B

C Type 'number' is not assignable to type 'Output<T>' at line A

D Type 'T' is not assignable to type 'string' at line B

💡 Hint

Look at the return types and what Output expects for non-string T.

At line B, returning input (type T) is not guaranteed to be string, but Output expects string for non-string T, causing a type error.

📝 Syntax

advanced

Which option correctly uses conditional types for overload replacement?

Which of the following TypeScript function signatures correctly uses conditional types to replace overloads for a function format that returns string if input is number and number if input is string?

A function format<T>(input: T): T extends string ? string : number;

B function format<T>(input: T): T extends number ? number : string;

C function format<T>(input: T): T extends number ? string : number;

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

💡 Hint

Check the conditional type mapping input types to output types as described.

Option C correctly maps number input to string output and string input to number output using conditional types.

🚀 Application

expert

Determine the output type of a complex conditional type

Consider the following TypeScript code. What is the type of result after calling transform(true)?

Typescript

type Transform<T> = T extends string ? number : T extends number ? string : boolean;
function transform<T>(input: T): Transform<T> {
  if (typeof input === 'string') {
    return input.length as Transform<T>;
  } else if (typeof input === 'number') {
    return input.toString() as Transform<T>;
  } else {
    return false as Transform<T>;
  }
}
const result = transform(true);

A boolean

B string

C number

D never

💡 Hint

Check the conditional type Transform for boolean input.

For boolean input, Transform resolves to boolean, so result is boolean.