Excess property checks vs structural compatibility in Typescript - Practice Questions

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of excess property check with object literal

What will be the output of this TypeScript code when compiled and run in JavaScript?

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

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

Typescript

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

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

A Logs 'undefined' to the console

B Logs 'Alice' to the console

C Runtime error: 'location' is not defined

D Compilation error due to excess property 'location'

💡 Hint

Excess property checks apply only to object literals assigned directly to typed variables.

When assigning an object literal directly to a variable typed as an interface, TypeScript performs excess property checks. The extra property 'location' is not allowed, causing a compile-time error.

❓ Predict Output

intermediate

Structural compatibility with extra properties in variable

What will be the output of this TypeScript code when compiled and run in JavaScript?

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

const extra = { name: "Bob", age: 25, location: "LA" };
const p2: Person = extra;
console.log(p2.name);

Typescript

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

const extra = { name: "Bob", age: 25, location: "LA" };
const p2: Person = extra;
console.log(p2.name);

A Compilation error due to excess property 'location'

B Logs 'Bob' to the console

C Logs 'undefined' to the console

D Runtime error: 'location' is not defined

💡 Hint

Excess property checks do not apply when assigning from a variable.

When assigning from a variable, TypeScript uses structural compatibility and does not check for excess properties. The assignment succeeds and logs 'Bob'.

🔧 Debug

advanced

Identify the error in excess property check

Why does this TypeScript code produce an error?

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

function printCar(car: Car) {
  console.log(car.make + " " + car.model);
}

printCar({ make: "Toyota", model: "Corolla", year: 2020 });

Typescript

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

function printCar(car: Car) {
  console.log(car.make + " " + car.model);
}

printCar({ make: "Toyota", model: "Corolla", year: 2020 });

A Error: Object literal has excess property 'year'

B No error, code runs and logs 'Toyota Corolla'

C Error: Missing property 'year' in interface Car

D Runtime error: 'year' is undefined

💡 Hint

Check how object literals are checked when passed as function arguments.

Passing an object literal with an extra property 'year' to a function expecting Car triggers excess property checks and causes a compile-time error.

❓ Predict Output

advanced

Output when assigning object with extra properties via variable

What will be the output of this TypeScript code when compiled and run in JavaScript?

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

const novel = { title: "1984", author: "Orwell", pages: 328 };
const b: Book = novel;
console.log(b.pages);

Typescript

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

const novel = { title: "1984", author: "Orwell", pages: 328 };
const b: Book = novel;
console.log(b.pages);

A Logs 328 to the console

B Compilation error due to excess property 'pages'

C Logs 'undefined' to the console

D Runtime error: Property 'pages' does not exist on type 'Book'

💡 Hint

TypeScript allows extra properties when assigned from variables, but type annotations affect access.

The variable 'b' is typed as Book, but the underlying object has 'pages'. JavaScript allows access to 'pages', so it logs 328.

🧠 Conceptual

expert

Why does excess property check not apply in this case?

Consider this TypeScript code:

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

const data = { username: "user1", email: "[e-mail]", isAdmin: true };
const user: User = data;

Why does TypeScript allow this assignment without error?

A Because TypeScript ignores extra properties in all assignments

B Because 'isAdmin' is optional in the User interface

C Because 'data' is a variable, excess property checks are skipped and structural compatibility applies

D Because the interface User explicitly allows extra properties

💡 Hint

Think about when excess property checks are enforced.

Excess property checks only apply to object literals assigned directly to typed variables or passed as arguments. Assignments from variables skip this check and rely on structural compatibility.