Excess property checking behavior in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an object matching the interface.

Typescript

interface Person { name: string; age: number; }
const person: Person = { name: "Alice", age: [1] };

Drag options to blanks, or click blank then click option'

A25

B"25"

Ctrue

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around numbers, making them strings.

Assigning boolean or null instead of a number.

The age property must be a number, so 25 is correct.

2fill in blank

medium

Complete the code to cause the excess property error when assigning an object literal.

Typescript

interface Car { make: string; model: string; }
const myCar: Car = { make: "Toyota", model: "Corolla", [1]: 2020 };

Drag options to blanks, or click blank then click option'

Aprice

Byear

Cowner

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Adding properties not declared in the interface causes errors.

Trying to assign extra properties directly in object literals.

The interface Car does not include year, so adding it causes an excess property error.

To fix the error, remove or avoid adding properties not defined in the interface.

3fill in blank

hard

Fix the error in the code by completing the type assertion.

Typescript

interface Book { title: string; author: string; }
const myBook = { title: "1984", author: "Orwell", pages: 328 } as [1];

Drag options to blanks, or click blank then click option'

ABook

Bany

Cobject

Dstring

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect types in assertions.

Not using type assertions when needed.

Using as Book tells TypeScript to treat the object as a Book, ignoring excess properties.

4fill in blank

hard

Fill both blanks to create a function that accepts an object matching the interface but allows extra properties.

Typescript

interface User { username: string; email: string; }
function registerUser(user: [1]) {
  console.log(user.username);
}

const newUser = { username: "john", email: "[e-mail]", [2]: true };
registerUser(newUser);

Drag options to blanks, or click blank then click option'

AUser & Record<string, any>

BUser

Cany

DisAdmin

Attempts:

3 left

💡 Hint

Common Mistakes

Using only the interface type without allowing extra properties.

Not defining the extra property in the object.

Using User & Record<string, any> allows extra properties.

The extra property isAdmin is allowed because of the intersection with Record<string, any>.

5fill in blank

hard

Fill all three blanks to create a function that accepts an object with required and optional properties, allowing excess properties.

Typescript

interface Config { host: string; port?: number; }
function connect(config: [1]) {
  console.log(`Connecting to ${config.host}:${config.[2] ?? 80}`);
}

const serverConfig = { host: "localhost", port: 8080, [3]: true };
connect(serverConfig);

Drag options to blanks, or click blank then click option'

AConfig & Record<string, unknown>

Bport

Csecure

DConfig

Attempts:

3 left

💡 Hint

Common Mistakes

Not allowing extra properties in the parameter type.

Accessing optional properties without checks.

The function parameter type Config & Record<string, unknown> allows extra properties.

The optional property port is accessed safely with ?? 80 as default.

The extra property secure is allowed due to the intersection with Record<string, unknown>.

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