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.

Practice

1. What does TypeScript's excess property checks primarily prevent when assigning an object literal to a variable of a specific type?

easy

A. Assigning object literals with extra properties not defined in the target type

B. Assigning objects with missing properties

C. Assigning objects with incompatible property types

D. Assigning objects with properties in a different order

Solution

1. Step 1: Understand excess property checks context

   Excess property checks happen when assigning an object literal directly to a typed variable.

2. Step 2: Identify what excess property checks prevent

   They prevent extra properties not declared in the target type from being assigned, catching typos or mistakes.

3. Final Answer:

   Assigning object literals with extra properties not defined in the target type -> Option A

4. Quick Check:

   Excess property checks = prevent extra properties [OK]

Hint: Excess checks block extra properties in direct object literals [OK]

Common Mistakes:

• Confusing excess property checks with missing property errors
• Thinking property order matters
• Assuming excess checks apply to variables, not literals

2. Which of the following TypeScript assignments will cause an excess property check error?

easy

A. const obj: {name: string} = {name: 'Dave'} as {name: string};

B. const extra = {name: 'Bob', age: 25}; const obj: {name: string} = extra;

C. const obj: {name: string} = {name: 'Carol'};

D. const obj: {name: string} = {name: 'Alice', age: 30};

Solution

1. Step 1: Check direct object literal assignments

   const obj: {name: string} = {name: 'Alice', age: 30}; assigns a literal with an extra property age directly to a typed variable, triggering excess property checks.

2. Step 2: Compare with other options

   const extra = {name: 'Bob', age: 25}; const obj: {name: string} = extra; assigns from a variable, so excess property checks do not apply. Options C and D have no extra properties.

3. Final Answer:

   const obj: {name: string} = {name: 'Alice', age: 30}; -> Option D

4. Quick Check:

   Direct literal with extra property = error [OK]

Hint: Extra properties in direct literals cause errors, variables do not [OK]

Common Mistakes:

• Thinking variables cause excess property errors
• Ignoring the difference between literals and variables
• Assuming type assertions always cause errors

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

interface Person { name: string; }
const extra = { name: 'Eve', age: 40 };
const p: Person = extra;
console.log(p.name);

medium

A. Runtime error

B. Error: Excess property 'age' not allowed

C. Eve

D. undefined

Solution

1. Step 1: Understand assignment from variable

   Assigning from variable extra bypasses excess property checks, so assignment is allowed.

2. Step 2: Check console output

   Accessing p.name prints 'Eve' as expected.

3. Final Answer:

   Eve -> Option C

4. Quick Check:

   Variable assignment allows extra properties, prints name [OK]

Hint: Variables with extra props assign fine; literals with extras error [OK]

Common Mistakes:

• Expecting excess property error on variable assignment
• Confusing compile-time error with runtime output
• Assuming extra properties are removed

4. Identify the error in this TypeScript code and fix it:

interface Car { make: string; }
const car = { make: 'Toyota', year: 2020 };
const myCar: Car = { make: 'Honda', year: 2018 };

medium

A. Error due to extra property 'year' in direct object literal; fix by assigning from variable

B. Error due to missing property 'year'; fix by adding 'year' to interface

C. No error; code is correct

D. Error due to wrong property type; fix by changing 'year' to string

Solution

1. Step 1: Identify excess property check error

   Direct assignment of object literal with extra property year causes error.

2. Step 2: Fix by assigning from variable

   Assigning from variable car avoids excess property checks and fixes error.

3. Final Answer:

   Error due to extra property 'year' in direct object literal; fix by assigning from variable -> Option A

4. Quick Check:

   Direct literal with extra prop = error; use variable [OK]

Hint: Assign extra props via variable, not direct literal [OK]

Common Mistakes:

• Adding extra properties to interface unnecessarily
• Ignoring excess property check rules
• Assuming no error on direct literal with extra props

5. Given this interface and code, which assignment will NOT cause a TypeScript error?

interface User { username: string; }

// Option 1
const u1: User = { username: 'john', email: '[e-mail]' };

// Option 2
const extraUser = { username: 'jane', email: '[e-mail]' };
const u2: User = extraUser;

// Option 3
const u3 = { username: 'doe', email: '[e-mail]' } as User;

// Option 4
const u4: User = { username: 'max' };

hard

A. Only Option 3 and Option 4

B. Only Option 2 and Option 4

C. Only Option 1 and Option 3

D. All options cause errors

Solution

1. Step 1: Analyze Option 1

   Direct literal with extra property email causes excess property check error.

2. Step 2: Analyze Option 2 and 4

   Option 2 assigns from variable, so no error. Option 4 matches interface exactly, no error.

3. Step 3: Analyze Option 3

   Type assertion on direct object literal with extra property email still triggers excess property checks, causing an error.

4. Final Answer:

   Only Option 2 and Option 4 -> Option B

5. Quick Check:

   Direct literal with extras errors; variable assignment and exact match okay [OK]

Hint: Direct literals with extras error; variables and exact matches okay [OK]

Common Mistakes:

• Thinking type assertions bypass excess property checks on object literals
• Thinking all direct literals with extras are allowed
• Ignoring structural compatibility rules