Why union types are needed in Typescript - Visual Breakdown

Concept Flow - Why union types are needed

Start: Variable declaration

↓

Assign value of type A

↓

Use variable

↓

Assign value of type B

↓

Use variable

↓

Type error if no union

↓

Union type allows multiple types

↓

No type error, flexible usage

↓

End

This flow shows how union types let a variable hold values of different types without errors.

Execution Sample

Typescript

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

This code shows a variable that can hold either a number or a string and prints both.

Execution Table

Step	Action	Variable 'value' Type	Variable 'value' Value	Output	Type Error?
1	Declare 'value' with type number | string	number | string	undefined		No
2	Assign 42 to 'value'	number | string	42		No
3	Print 'value'	number | string	42	42	No
4	Assign "hello" to 'value'	number | string	"hello"		No
5	Print 'value'	number | string	"hello"	hello	No
6	If 'value' was only number, assign string causes error	number	N/A		Yes

💡 Execution stops after demonstrating that union types prevent type errors when assigning different types.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
value	undefined	42	"hello"	"hello"

Key Moments - 3 Insights

Why does assigning a string to a variable declared only as number cause an error?

Because the variable expects only numbers, assigning a string breaks the type rule, shown in execution_table step 6.

How does the union type prevent type errors when assigning different types?

Union type allows multiple types, so assigning number or string is valid, as seen in execution_table steps 2 and 4.

What happens if we try to use the variable with a type not included in the union?

TypeScript will show an error because the value is not allowed by the union, preventing unsafe usage.

Visual Quiz - 3 Questions

Look at the execution_table, what is the type of 'value' after step 2?

A string

B number | string

C number

D undefined

💡 Hint

Check the 'Variable 'value' Type' column at step 2 in execution_table.

At which step does assigning a string to 'value' happen without error?

A Step 4

B Step 2

C Step 6

D Step 3

💡 Hint

Look at the 'Action' and 'Type Error?' columns in execution_table.

If 'value' was declared only as number, what would happen at step 4?

A No error, string assigned

B Variable becomes undefined

C Type error occurs

D Value changes to number automatically

💡 Hint

Refer to execution_table step 6 where type error is shown for assigning string to number.

Concept Snapshot

Union types let a variable hold values of multiple types.
Syntax: let varName: typeA | typeB;
Prevents errors when assigning different types.
Useful for flexible, safe code.
Without union, assigning wrong type causes error.

Full Transcript

This lesson shows why union types are needed in TypeScript. We start by declaring a variable that can hold either a number or a string using a union type. Then we assign a number and print it, followed by assigning a string and printing it again. The execution table tracks each step, showing the variable's type and value, and confirms no type errors occur. We also see that if the variable was declared only as a number, assigning a string would cause a type error. Key moments clarify why union types prevent errors and allow flexible variable usage. The quiz tests understanding of variable types and error conditions. The snapshot summarizes union types as a way to safely allow multiple types for a variable.