Union type syntax and behavior in Typescript - Step-by-Step Execution

Concept Flow - Union type syntax and behavior

Declare variable with union type

↓

Assign value of first type

→Check if value matches type

| Yes↓

Use value safely

↓

Assign value of second type

→Check if value matches type

| Yes↓

Use value safely

↓

Assign value of other type

→Type error, stop

A variable can hold values of multiple types declared with a union. Assignments are checked against these types, allowing only matching types.

Execution Sample

Typescript

let value: string | number;
value = "hello";
console.log(value);
value = 42;
console.log(value);
// value = true; // Error

This code shows a variable that can be a string or a number, and logs both values.

Execution Table

Step	Action	Value Assigned	Type Check	Output or Error
1	Declare variable 'value' with type string | number	undefined	N/A	No output
2	Assign 'hello' to 'value'	"hello"	string matches union	No output
3	Print 'value'	"hello"	N/A	"hello"
4	Assign 42 to 'value'	42	number matches union	No output
5	Print 'value'	42	N/A	42
6	Assign true to 'value'	true	boolean NOT in union	Type error: boolean not assignable

💡 Execution stops at step 6 due to type error assigning boolean to union of string | number

Variable Tracker

Variable	Start	After 2	After 4	After 6
value	undefined	"hello"	42	Type error, no assignment

Key Moments - 3 Insights

Why can 'value' hold both a string and a number?

Because 'value' is declared with a union type 'string | number', it accepts values of either type as shown in execution_table steps 2 and 4.

Why does assigning 'true' cause an error?

At step 6, 'true' is a boolean, which is not part of the declared union 'string | number', so TypeScript reports a type error.

Does the union type allow any type of value?

No, only the types explicitly listed in the union are allowed. Other types cause errors, as seen in step 6.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'value' after step 4?

A "hello"

B true

C 42

D undefined

💡 Hint

Check the 'Value Assigned' column at step 4 in the execution_table.

At which step does the type error occur?

A Step 2

B Step 6

C Step 5

D Step 3

💡 Hint

Look at the 'Output or Error' column for the step where a type error is reported.

If we add 'boolean' to the union type, what happens at step 6?

A No error, assignment allowed

B Type error remains

C Error moves to step 4

D Variable becomes undefined

💡 Hint

Consider how the union type controls allowed assignments as shown in the execution_table.

Concept Snapshot

Union types allow a variable to hold values of multiple types.
Syntax: let varName: Type1 | Type2;
Assignments must match one of the types.
TypeScript checks types at assignment.
Errors occur if assigned value is not in union.

Full Transcript

This visual execution shows how union types work in TypeScript. A variable declared with a union type can hold values of any type listed in the union. The example declares 'value' as string or number. Assigning a string or number works fine, shown in steps 2 and 4. Printing the value outputs the assigned value. Assigning a boolean causes a type error at step 6 because boolean is not in the union. The variable tracker shows how 'value' changes from undefined to 'hello' to 42, then stops due to error. Key moments clarify why union types allow multiple types but restrict others. The quiz tests understanding of value changes, error step, and effect of changing the union. This helps beginners see how TypeScript enforces union types step-by-step.

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