Excess property checking behavior in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code with excess property?

Consider the following TypeScript code snippet. What will be the output when compiled and run with strict excess property checking enabled?

Typescript

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

const p: Person = { name: "Alice", age: 30, location: "NY" };
console.log(p);

A Compilation warning but code runs and prints { name: 'Alice', age: 30 }

B { name: 'Alice', age: 30, location: 'NY' } printed to console

C Compilation error: Object literal may only specify known properties, and 'location' does not exist in type 'Person'.

D Runtime error: Property 'location' is not defined on type 'Person'.

💡 Hint

Think about how TypeScript treats extra properties in object literals assigned to typed variables.

TypeScript's excess property checking disallows object literals with properties not defined in the target type. Here, 'location' is not in 'Person', so the compiler throws an error.

❓ Predict Output

intermediate

What happens when assigning an object with excess properties via a variable?

Given this TypeScript code, what will be the output or error?

Typescript

interface Car {
  make: string;
  year: number;
}

const obj = { make: "Toyota", year: 2020, color: "red" };
const myCar: Car = obj;
console.log(myCar);

A Runtime error: 'color' property not allowed on type 'Car'.

B Compilation error due to excess property 'color'.

C { make: 'Toyota', year: 2020 } printed to console, 'color' ignored.

D { make: 'Toyota', year: 2020, color: 'red' } printed to console.

💡 Hint

Excess property checking applies only to object literals assigned directly to typed variables.

When assigning a variable to a typed variable, TypeScript does not perform excess property checking, so the extra 'color' property remains and is printed.

🔧 Debug

advanced

Why does this TypeScript code cause an error with excess properties?

Identify the cause of the error in this code and select the correct explanation.

Typescript

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

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

printBook({ title: "1984", author: "Orwell", pages: 328 });

A Error because 'pages' is missing in the 'Book' interface.

B Error because 'pages' is an excess property not defined in 'Book' interface.

C No error; extra properties are allowed in function arguments.

D Error because 'title' and 'author' are missing in the object.

💡 Hint

Check how TypeScript treats object literals passed directly as function arguments.

Excess property checking applies to object literals passed directly to functions expecting a typed parameter. The extra 'pages' property causes a compilation error.

📝 Syntax

advanced

Which option correctly bypasses excess property checking in TypeScript?

You want to assign an object with extra properties to a typed variable without error. Which option achieves this?

Typescript

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

const user = { username: "john", email: "[e-mail]", age: 25 };

A const u: User = user as User; // no error

B const u: User = { ...user }; // no error

C const u: User = user; // no error

D const u: User = { username: user.username, email: user.email }; // no error

💡 Hint

Type assertion can bypass excess property checks.

Using 'as User' tells TypeScript to trust the type, bypassing excess property checks. Direct object literals with extra properties cause errors.

🚀 Application

expert

How many properties does the resulting object have after this code runs?

Analyze the following TypeScript code and determine how many properties the final object 'result' has.

Typescript

interface Config {
  host: string;
  port: number;
}

const extra = { port: 8080, protocol: "https" };
const config: Config = { host: "localhost", ...extra };
const result = config;

A Compilation error due to excess property 'protocol'

B 3 properties: 'host', 'port', and 'protocol'

C 1 property: 'host' only

D 2 properties: 'host' and 'port'

💡 Hint

Excess property checking applies to object literals, including properties from spread operators if they introduce unknown properties.

Even with the spread operator, TypeScript performs excess property checking on the resulting object literal. Since 'extra' introduces 'protocol' not in 'Config', it causes a compilation error.

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