Why union types are needed in Typescript - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use union types in TypeScript?

Consider a function that accepts either a string or a number. Why are union types useful in this case?

A They disable type checking for the function parameters.

B They allow the function to accept multiple types safely without losing type checking.

C They force the function to accept only one type, either string or number, but not both.

D They automatically convert all inputs to a single type before processing.

💡 Hint

Think about how TypeScript helps you write safer code when a variable can be more than one type.

Union types let you specify that a value can be one of several types. This helps the compiler check your code and catch errors early, while still allowing flexibility.

❓ Predict Output

intermediate

Output of function using union types

What is the output of this TypeScript code?

Typescript

function formatInput(input: string | number): string {
  if (typeof input === 'number') {
    return `Number: ${input.toFixed(2)}`;
  } else {
    return `String: ${input.toUpperCase()}`;
  }
}

console.log(formatInput(3.14159));
console.log(formatInput('hello'));

A

Number: 3.14
String: hello

B

Number: 3.14159
String: hello

C

Number: 3.14
String: HELLO

D TypeError at runtime

💡 Hint

Look at how the function treats numbers and strings differently.

The function checks the type of input. For numbers, it formats to 2 decimals. For strings, it converts to uppercase.

🔧 Debug

advanced

Identify the error with union types

What error does this TypeScript code produce?

Typescript

function process(value: string | number) {
  return value.toFixed(2);
}

process('test');

A Error: Property 'toFixed' does not exist on type 'string'.

B Runtime error: toFixed is not a function.

C Error: Cannot call function without type assertion.

D No error, outputs 'test'.

💡 Hint

Think about which types have the method toFixed.

The method toFixed exists only on numbers. Since value can be a string, TypeScript raises an error.

📝 Syntax

advanced

Correct union type syntax

Which option shows the correct way to declare a variable that can be a string or null?

A let data: string, null;

B let data: string & null;

C let data: string || null;

D let data: string | null;

💡 Hint

Union types use a specific symbol between types.

The pipe symbol | is used to declare union types in TypeScript.

🚀 Application

expert

Using union types in function parameters

Given this function, what will be the value of result after calling combine(5, ' apples')?

Typescript

function combine(a: number | string, b: number | string): string {
  if (typeof a === 'number' && typeof b === 'string') {
    return a + b;
  } else if (typeof a === 'string' && typeof b === 'number') {
    return a + b.toString();
  } else {
    return 'Invalid input';
  }
}

const result = combine(5, ' apples');

A "5 apples"

B "5"

C "Invalid input"

D TypeError at runtime

💡 Hint

Check the types of a and b and which condition matches.

Since a is a number and b is a string, the first condition is true and the function returns their concatenation.