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.

Practice

1. What does excess property checking in TypeScript do when you assign an object literal to a variable typed with an interface?

easy

A. It automatically removes extra properties from the object.

B. It ignores any extra properties without warnings.

C. It warns if the object literal has properties not defined in the interface.

D. It throws a runtime error if extra properties exist.

Solution

1. Step 1: Understand excess property checking purpose

   TypeScript checks object literals assigned to typed variables to catch unexpected properties early.

2. Step 2: Behavior on extra properties

   If the object literal has properties not in the interface, TypeScript warns to prevent bugs.

3. Final Answer:

   It warns if the object literal has properties not defined in the interface. -> Option C

4. Quick Check:

   Excess property checking warns on extra keys [OK]

Hint: Extra keys in object literals cause warnings [OK]

Common Mistakes:

• Thinking extra properties are removed automatically
• Believing excess property checking applies to variables, not literals
• Assuming runtime errors occur due to excess properties

2. Which of the following TypeScript code snippets will cause an excess property checking error?

easy

A. const obj: {name: string} = {name: "Alice", age: 30};

B. const obj = {name: "Alice", age: 30};

C. const obj: {name: string, age?: number} = {name: "Alice"};

D. const obj: {name: string} = {name: "Alice"};

Solution

1. Step 1: Identify object literal with extra property

   const obj: {name: string} = {name: "Alice", age: 30}; assigns an object literal with an extra property 'age' to a type expecting only 'name'.

2. Step 2: Check excess property rules

   TypeScript flags extra properties in object literals when they don't exist in the target type.

3. Final Answer:

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

4. Quick Check:

   Extra property 'age' causes error [OK]

Hint: Extra keys in typed object literals cause errors [OK]

Common Mistakes:

• Confusing object literals with variables
• Ignoring optional properties
• Assuming all extra properties are allowed

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

interface Person { name: string; age: number; }
const p: Person = { name: "Bob", age: 25, city: "NY" };

medium

A. Compilation error due to excess property 'city'.

B. Object p is created with all three properties.

C. Runtime error because 'city' is not in Person.

D. Only 'name' and 'age' are assigned; 'city' is ignored.

Solution

1. Step 1: Check object literal assignment to interface

   The object literal has an extra property 'city' not defined in Person.

2. Step 2: Apply excess property checking rules

   TypeScript raises a compile-time error for extra properties in object literals assigned to typed variables.

3. Final Answer:

   Compilation error due to excess property 'city'. -> Option A

4. Quick Check:

   Extra property in literal causes compile error [OK]

Hint: Extra keys in object literals cause compile errors [OK]

Common Mistakes:

• Thinking extra keys are ignored silently
• Expecting runtime errors instead of compile errors
• Assuming object creation succeeds with extra keys

4. Consider this TypeScript code:

interface Car { make: string; model: string; }
const myCar = { make: "Toyota", model: "Camry", year: 2020 };
const car: Car = myCar;

Why does this code NOT cause an excess property checking error?

medium

A. Because TypeScript ignores extra properties in all assignments.

B. Because excess property checking only applies to object literals, not variables.

C. Because 'year' is an optional property in Car.

D. Because 'myCar' is explicitly typed as Car.

Solution

1. Step 1: Identify assignment type

   The variable 'myCar' is assigned to 'car', not an object literal directly.

2. Step 2: Understand excess property checking scope

   Excess property checking only triggers on object literals, not on variables or expressions.

3. Final Answer:

   Because excess property checking only applies to object literals, not variables. -> Option B

4. Quick Check:

   Excess check skips variables [OK]

Hint: Excess check triggers only on object literals [OK]

Common Mistakes:

• Assuming optional properties cause errors
• Thinking all assignments trigger excess checks
• Believing extra properties cause runtime errors

5. You want to assign an object literal with extra properties to a variable typed by an interface without errors. Which approach correctly avoids excess property checking errors?

interface User { username: string; }
// Which option works without error?

hard

A. const user: User = { username: "john", age: 30 };

B. const user: { username: string } = { username: "john", age: 30 };

C. const user: User = { username: "john" };
user.age = 30;

D. const user: User = { username: "john", age: 30 } as User;

Solution

1. Step 1: Understand excess property checking on object literals

   Assigning an object literal with extra properties directly causes errors.

2. Step 2: Use type assertion to bypass excess property checking

   Using 'as User' tells TypeScript to trust the type, skipping excess property checks.

3. Step 3: Analyze options

   const user: User = { username: "john", age: 30 } as User; uses type assertion on the object literal, avoiding error. const user: { username: string } = { username: "john", age: 30 }; causes excess property error. const user: User = { username: "john" }; user.age = 30; tries to add property after but TypeScript errors: Property 'age' does not exist on type 'User'. const user: User = { username: "john", age: 30 }; causes excess property error.

4. Final Answer:

   const user: User = { username: "john", age: 30 } as User; -> Option D

5. Quick Check:

   Type assertion on literal skips excess check [OK]

Hint: Use 'as Type' to bypass excess property errors [OK]

Common Mistakes:

• Trying to assign extra properties directly without assertion
• Asserting variable instead of object literal
• Adding extra properties after assignment without type update