Excess property checking behavior in Typescript

Introduction

Excess property checking helps catch mistakes when you add extra properties that are not expected. It keeps your code safe and clear.

When you create an object to match a specific shape or type.

When you want to avoid typos in property names.

When you want to make sure you only pass allowed properties to functions.

When you want TypeScript to warn you about extra, unexpected properties.

When you want to keep your data structures clean and predictable.

Syntax

Typescript

interface TypeName {
  property1: Type1;
  property2: Type2;
}

const obj: TypeName = {
  property1: value1,
  property2: value2
  // extraProperty: value3, // This will cause an error
};

Excess property checking happens when you assign an object literal directly to a variable or pass it as an argument.

It only checks for extra properties in object literals, not in variables or expressions.

Examples

This example shows an error because 'location' is not part of the Person interface.

Typescript

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

const person: Person = {
  name: "Alice",
  age: 30,
  location: "Wonderland" // Error: 'location' does not exist in type 'Person'
};

Here, no error occurs because excess property checking only applies to object literals, not variables.

Typescript

interface Car {
  make: string;
  model: string;
}

const carDetails = {
  make: "Toyota",
  model: "Corolla",
  year: 2020
};

const car: Car = carDetails; // No error here because carDetails is a variable, not an object literal

Passing an object literal with an extra property to a function causes an error.

Typescript

interface Book {
  title: string;
  author: string;
}

function printBook(book: Book) {
  console.log(`${book.title} by ${book.author}`);
}

printBook({
  title: "1984",
  author: "George Orwell",
  pages: 328 // Error: 'pages' does not exist in type 'Book'
});

Sample Program

This program shows how excess property checking works. The commented-out code shows an error when an extra property is added directly in an object literal. But when the extra property is in a variable, TypeScript allows it.

Typescript

interface User {
  username: string;
  email: string;
}

// Correct object literal
const user1: User = {
  username: "john_doe",
  email: "[e-mail]"
};

// Object literal with extra property - causes error
// const user2: User = {
//   username: "jane_doe",
//   email: "[e-mail]",
//   age: 25 // Error: 'age' does not exist in type 'User'
// };

// Using a variable with extra property - no error
const extraInfo = {
  username: "mike",
  email: "[e-mail]",
  age: 40
};

const user3: User = extraInfo;

console.log(user1);
console.log(user3);

Important Notes

Excess property checking helps catch simple mistakes like typos in property names.

You can use type assertions or index signatures to bypass excess property checks if needed, but use them carefully.

Remember, excess property checking only applies to object literals assigned directly or passed as arguments.

Summary

Excess property checking warns you about extra properties in object literals.

It helps prevent bugs by catching unexpected properties early.

It only applies to object literals, not variables or expressions.

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