Union type syntax and behavior in Typescript - Mini Project: Build & Apply

Union type syntax and behavior

📖 Scenario: Imagine you are building a simple form that accepts either a number or a string as input. You want to handle both types safely in your code.

🎯 Goal: Learn how to use union types in TypeScript to accept multiple types for a variable and handle them correctly.

📋 What You'll Learn

Create a variable with a union type of number | string

Assign values of both types to the variable

Use a type check to handle each type differently

Print the result based on the type

💡 Why This Matters

🌍 Real World

Union types help when you want to accept multiple kinds of input in forms, APIs, or functions safely.

💼 Career

Understanding union types is important for writing flexible and type-safe TypeScript code in web development jobs.

1

Create a variable with a union type

Create a variable called input with the union type number | string and assign it the number 42.

Typescript

let input: number | string = 42;
// Your code here

Hint

Use the pipe symbol | to combine types in TypeScript.

2

Assign a string value to the variable

Change the value of the variable input to the string "hello".

Typescript

let input: number | string = 42;
input = "hello";
// Your code here

Hint

You can assign any value that matches the union type.

3

Use a type check to handle each type

Write an if statement that checks if input is a string. Inside the if, create a variable result and set it to input.toUpperCase(). Otherwise, set result to input + 1.

Typescript

let input: number | string = 42;
input = "hello";

let result;
if (typeof input === "string") {
    // Your code here
} else {
    // Your code here
}

Hint

Use typeof to check the type before using type-specific methods.

4

Print the result

Write a console.log statement to print the value of result.

Typescript

let input: number | string = 42;
input = "hello";

let result;
if (typeof input === "string") {
    result = input.toUpperCase();
} else {
    result = input + 1;
}

// Your code here

Hint

Use console.log(result); to show the output.

Practice

1. What does a union type in TypeScript allow a variable to do?

easy

A. Hold values of multiple specified types safely

B. Hold only one fixed type value

C. Automatically convert types at runtime

D. Restrict values to a single primitive type

Solution

1. Step 1: Understand union type purpose

   A union type lets a variable accept values from multiple specified types, not just one.

2. Step 2: Compare options with definition

   Only Hold values of multiple specified types safely correctly describes this behavior; others describe fixed or automatic conversions which union types do not do.

3. Final Answer:

   Hold values of multiple specified types safely -> Option A

4. Quick Check:

   Union type = multiple types allowed [OK]

Hint: Union types use | to allow multiple types [OK]

Common Mistakes:

• Thinking union types convert values automatically
• Believing union types restrict to one type only
• Confusing union with intersection types

2. Which of the following is the correct syntax to declare a variable value that can be either a string or a number?

easy

A. let value: string | number;

B. let value: string & number;

C. let value: string, number;

D. let value: string | number[];

Solution

1. Step 1: Recall union type syntax

   Union types use the pipe symbol | between types without parentheses needed.

2. Step 2: Evaluate each option

   let value: string | number; uses correct syntax: string | number. let value: string & number; uses & which means intersection, not union. let value: string, number; uses comma which is invalid. let value: string | number[]; uses number[] which is an array of numbers, not a single number.

3. Final Answer:

   let value: string | number; -> Option A

4. Quick Check:

   Union syntax uses | without commas [OK]

Hint: Use | between types, no commas or & for union [OK]

Common Mistakes:

• Using & instead of | for union types
• Separating types with commas
• Using number[] instead of number

3. What will be the output of this TypeScript code?

function printId(id: string | number) {
  if (typeof id === 'string') {
    console.log('ID is a string: ' + id.toUpperCase());
  } else {
    console.log('ID is a number: ' + id.toFixed(2));
  }
}
printId(42);

medium

A. ID is a string: 42

B. ID is a number: 42

C. ID is a number: 42.00

D. Runtime error due to wrong method

Solution

1. Step 1: Analyze type check and method calls

   The function checks if id is a string or number. For number, it calls toFixed(2) which formats number with 2 decimals.

2. Step 2: Apply input and output

   Input is 42 (number), so else branch runs and prints 'ID is a number: 42.00'.

3. Final Answer:

   ID is a number: 42.00 -> Option C

4. Quick Check:

   Number uses toFixed(2) = 42.00 [OK]

Hint: Check typeof before calling type-specific methods [OK]

Common Mistakes:

• Calling string methods on numbers without check
• Expecting no decimal places in toFixed output
• Ignoring type narrowing with typeof

4. Identify the error in this TypeScript code using union types:

function formatInput(input: string | number) {
  return input.toUpperCase();
}

medium

A. No error, code works fine

B. Error: toUpperCase() not available on number

C. Error: Missing return type annotation

D. Error: Union types cannot be used in functions

Solution

1. Step 1: Check method usage on union type

   Method toUpperCase() exists on string but not on number.

2. Step 2: Understand type safety with union

   Without checking type, calling toUpperCase() on input causes error because input might be number.

3. Final Answer:

   Error: toUpperCase() not available on number -> Option B

4. Quick Check:

   Call methods only after type check [OK]

Hint: Always check type before calling type-specific methods [OK]

Common Mistakes:

• Calling string methods on union without type check
• Assuming union types allow all methods
• Ignoring compiler errors about method availability

5. Given this TypeScript code, what will be the output?

type Result = string | null;
function process(value: Result) {
  return value?.toUpperCase() ?? 'No value';
}
console.log(process(null));
console.log(process('hello'));

hard

A. No value\nhello

B. null\nhello

C. Error: Cannot call toUpperCase on null

D. No value\nHELLO

Solution

1. Step 1: Understand optional chaining and nullish coalescing

   The expression value?.toUpperCase() calls toUpperCase() only if value is not null or undefined. Otherwise, it returns undefined.

2. Step 2: Apply nullish coalescing fallback

   If the left side is undefined, ?? 'No value' returns 'No value'. So for null, output is 'No value'. For 'hello', it returns 'HELLO'.

3. Final Answer:

   No value HELLO -> Option D

4. Quick Check:

   Optional chaining + ?? handles null safely [OK]

Hint: Use ?. and ?? to safely handle null in unions [OK]

Common Mistakes:

• Expecting error when calling method on null
• Ignoring optional chaining usage
• Confusing null and undefined handling