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.