Excess property checking behavior in Typescript - Step-by-Step Execution

Concept Flow - Excess property checking behavior

Define Interface

↓

Create Object Literal

↓

Assign Object to Interface Variable

↓

Check Properties

↓

Pass

↓

Use Object

When assigning an object literal to a variable typed by an interface, TypeScript checks if the object has extra properties not in the interface and reports errors if found.

Execution Sample

Typescript

interface Person {
  name: string;
  age: number;
}

const p: Person = { name: "Alice", age: 30, city: "NY" };

This code tries to assign an object with an extra property 'city' to a variable typed as Person, triggering excess property checking.

Execution Table

Step	Action	Check	Result	Error
1	Define interface Person with properties name and age	N/A	Interface created
2	Create object literal with name, age, and city	N/A	Object created
3	Assign object to variable p typed as Person	Check if object properties match Person	name and age match
4	Check for extra properties in object	city is not in Person	Extra property found	Error: Object literal may only specify known properties, 'city' does not exist in type 'Person'.

💡 Assignment fails due to excess property 'city' not defined in interface Person

Variable Tracker

Variable	Start	After Assignment	Final
p	undefined	{ name: 'Alice', age: 30, city: 'NY' } (error)	undefined (assignment rejected)

Key Moments - 2 Insights

Why does TypeScript give an error for the extra 'city' property?

Because when assigning an object literal directly to a typed variable, TypeScript checks for any properties not declared in the interface and reports them as errors, as shown in step 4 of the execution table.

What if the object with extra properties is assigned to a variable first, then assigned to the typed variable?

Excess property checking only applies to object literals assigned directly. If assigned to a variable first, TypeScript allows extra properties, so no error occurs.

Visual Quiz - 3 Questions

Look at the execution table, at which step does TypeScript detect the excess property?

A Step 4

B Step 2

C Step 3

D Step 1

💡 Hint

Check the 'Check' and 'Error' columns in the execution table rows.

According to the variable tracker, what is the final value of variable 'p' after the assignment?

A An object with name, age, and city properties

B undefined because assignment failed

C An object with only name and age

D null

💡 Hint

Look at the 'Final' column for variable 'p' in the variable tracker.

If the object literal had no extra properties, what would happen at step 4?

A TypeScript would ignore the interface

B Error would still occur

C No error, assignment passes

D The program would crash

💡 Hint

Refer to the 'Result' column in step 4 of the execution table.

Concept Snapshot

Excess Property Checking in TypeScript:
- Happens when assigning object literals to typed variables
- Checks for properties not in the interface
- Extra properties cause compile-time errors
- Assigning via intermediate variables skips this check
- Helps catch typos and unintended properties

Full Transcript

This visual execution shows how TypeScript performs excess property checking when assigning an object literal to a variable typed by an interface. The interface Person expects 'name' and 'age'. The object literal has an extra 'city' property. At assignment, TypeScript checks and finds 'city' is not declared in Person, causing an error. The variable 'p' does not get assigned due to this error. This check only applies to direct object literals, not variables holding objects. This helps catch mistakes early.