Excess property checks vs structural compatibility in Typescript - Visual Side-by-Side Comparison

Concept Flow - Excess property checks vs structural compatibility

Create object with extra property

↓

Assign to variable with fewer properties

↓

Excess Property Check?

↓

Error at assignment

↓

Use object

When assigning objects, TypeScript checks for extra properties only in direct assignments (excess property checks). Otherwise, it allows assignments if the object structure matches (structural compatibility).

Execution Sample

Typescript

interface Point { x: number; y: number; }
const p1: Point = { x: 1, y: 2, z: 3 };
const p2 = { x: 1, y: 2, z: 3 };
const p3: Point = p2;

Shows excess property check error on direct assignment, but no error when assigning via variable due to structural compatibility.

Execution Table

Step	Code Line	Action	Check Type	Result
1	interface Point { x: number; y: number; }	Define Point type	N/A	Point expects x and y
2	const p1: Point = { x: 1, y: 2, z: 3 };	Assign object with extra 'z' directly to Point	Excess Property Check	Error: 'z' not allowed
3	const p2 = { x: 1, y: 2, z: 3 };	Create object with extra 'z' assigned to p2	No check	Allowed, p2 has x,y,z
4	const p3: Point = p2;	Assign p2 to Point variable	Structural Compatibility	Allowed: p2 has x,y (extra ignored)
5	Use p3	Access p3.x and p3.y	N/A	Works fine, no 'z' property on Point

💡 Execution stops after assignment checks; direct assignment with extra property errors, variable assignment allows extra properties due to structural compatibility.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
p1	undefined	Error (not assigned)	Error (no change)	Error (no change)	Error (no value)
p2	undefined	undefined	{ x:1, y:2, z:3 }	{ x:1, y:2, z:3 }	{ x:1, y:2, z:3 }
p3	undefined	undefined	undefined	{ x:1, y:2 } (structural)	{ x:1, y:2 }

Key Moments - 2 Insights

Why does direct assignment of an object with extra properties cause an error, but assigning via a variable does not?

Direct assignment triggers excess property checks (see Step 2 in execution_table), which disallow extra properties. Assigning via a variable skips this check and uses structural compatibility (Step 4), allowing extra properties.

Does structural compatibility mean extra properties are lost or ignored?

Extra properties exist on the object but are ignored by the type system when assigned to a variable with fewer properties (Step 4). The variable only sees the expected properties.

Visual Quiz - 3 Questions

Look at the execution_table at Step 2. What causes the error when assigning p1?

A The object is missing required properties

B The object has extra properties not in the type

C The variable p1 is not declared

D The object properties have wrong types

💡 Hint

Check the 'Check Type' and 'Result' columns at Step 2 in execution_table.

At which step does TypeScript allow assigning an object with extra properties to a variable of a smaller type?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Check Type' column for structural compatibility in execution_table.

If we remove the variable p2 and assign the object directly to p3, what happens?

A Error due to excess property check

B No error, assignment allowed

C Error due to missing properties

D TypeScript ignores the extra properties silently

💡 Hint

Compare Step 2 and Step 4 in execution_table to understand when excess property checks apply.

Concept Snapshot

Excess property checks occur on direct object assignments to typed variables and cause errors if extra properties exist.
Structural compatibility allows assigning objects with extra properties via variables without error.
Direct assignment: strict check; variable assignment: flexible check.
Extra properties are ignored, not removed.
Use variables to bypass excess property checks safely.

Full Transcript

This visual execution trace shows how TypeScript handles excess property checks versus structural compatibility. When you assign an object directly to a typed variable, TypeScript checks if the object has any extra properties not in the type. If yes, it gives an error (Step 2). However, if you first assign the object to a variable and then assign that variable to the typed variable, TypeScript allows it because it uses structural compatibility, ignoring extra properties (Step 4). Variables p2 and p3 illustrate this difference. The extra property 'z' causes an error on direct assignment but is allowed when assigned via p2. This helps understand when TypeScript is strict and when it is flexible with object shapes.