Excess property checks vs structural compatibility in Typescript - Hands-On Comparison

Excess property checks vs structural compatibility

📖 Scenario: Imagine you are creating a simple app to manage user profiles. You want to make sure the user data fits the expected shape, but sometimes extra information might be included. You will learn how TypeScript checks for extra properties and how it compares object shapes.

🎯 Goal: Build a TypeScript program that shows how excess property checks work when assigning objects to a typed variable, and how structural compatibility allows objects with extra properties to be assigned to variables with fewer properties.

📋 What You'll Learn

Create an interface User with properties name (string) and age (number).

Create an object user1 with exact properties name and age.

Create an object user2 with extra property email in addition to name and age.

Assign user1 and user2 to variables typed as User and observe excess property checks and structural compatibility.

Print the assigned variables to see their values.

💡 Why This Matters

🌍 Real World

In real apps, you often receive data with extra information. Understanding how TypeScript checks object shapes helps you write safer code and avoid bugs.

💼 Career

Many jobs require working with TypeScript interfaces and understanding type compatibility, especially when integrating APIs or working with complex data structures.

1

Create the User interface and user1 object

Create an interface called User with properties name of type string and age of type number. Then create an object called user1 with name set to "Alice" and age set to 30.

Typescript

// Your code here

Hint

Use interface User { name: string; age: number; } and then const user1 = { name: "Alice", age: 30 };

2

Create user2 object with an extra property

Create an object called user2 with properties name set to "Bob", age set to 25, and an extra property email set to "[e-mail]".

Typescript

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

const user1 = { name: "Alice", age: 30 };
// Your code here

Hint

Make sure to add the extra email property in user2.

3

Assign user1 and user2 to variables typed as User

Create two variables called profile1 and profile2 both typed as User. Assign user1 to profile1 and user2 to profile2. Use explicit type annotations for profile1 and profile2.

Typescript

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

const user1 = { name: "Alice", age: 30 };

const user2 = { name: "Bob", age: 25, email: "[e-mail]" };
// Your code here

Hint

Use const profile1: User = user1; and const profile2: User = user2; to see how TypeScript handles extra properties.

4

Print profile1 and profile2 to see the results

Write two console.log statements to print profile1 and profile2.

Typescript

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

const user1 = { name: "Alice", age: 30 };

const user2 = { name: "Bob", age: 25, email: "[e-mail]" };

const profile1: User = user1;
const profile2: User = user2;
// Your code here

Hint

Use console.log(profile1); and console.log(profile2); to display the objects.

Practice

1. What does TypeScript's excess property checks primarily prevent when assigning an object literal to a variable of a specific type?

easy

A. Assigning object literals with extra properties not defined in the target type

B. Assigning objects with missing properties

C. Assigning objects with incompatible property types

D. Assigning objects with properties in a different order

Solution

1. Step 1: Understand excess property checks context

   Excess property checks happen when assigning an object literal directly to a typed variable.

2. Step 2: Identify what excess property checks prevent

   They prevent extra properties not declared in the target type from being assigned, catching typos or mistakes.

3. Final Answer:

   Assigning object literals with extra properties not defined in the target type -> Option A

4. Quick Check:

   Excess property checks = prevent extra properties [OK]

Hint: Excess checks block extra properties in direct object literals [OK]

Common Mistakes:

• Confusing excess property checks with missing property errors
• Thinking property order matters
• Assuming excess checks apply to variables, not literals

2. Which of the following TypeScript assignments will cause an excess property check error?

easy

A. const obj: {name: string} = {name: 'Dave'} as {name: string};

B. const extra = {name: 'Bob', age: 25}; const obj: {name: string} = extra;

C. const obj: {name: string} = {name: 'Carol'};

D. const obj: {name: string} = {name: 'Alice', age: 30};

Solution

1. Step 1: Check direct object literal assignments

   const obj: {name: string} = {name: 'Alice', age: 30}; assigns a literal with an extra property age directly to a typed variable, triggering excess property checks.

2. Step 2: Compare with other options

   const extra = {name: 'Bob', age: 25}; const obj: {name: string} = extra; assigns from a variable, so excess property checks do not apply. Options C and D have no extra properties.

3. Final Answer:

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

4. Quick Check:

   Direct literal with extra property = error [OK]

Hint: Extra properties in direct literals cause errors, variables do not [OK]

Common Mistakes:

• Thinking variables cause excess property errors
• Ignoring the difference between literals and variables
• Assuming type assertions always cause errors

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

interface Person { name: string; }
const extra = { name: 'Eve', age: 40 };
const p: Person = extra;
console.log(p.name);

medium

A. Runtime error

B. Error: Excess property 'age' not allowed

C. Eve

D. undefined

Solution

1. Step 1: Understand assignment from variable

   Assigning from variable extra bypasses excess property checks, so assignment is allowed.

2. Step 2: Check console output

   Accessing p.name prints 'Eve' as expected.

3. Final Answer:

   Eve -> Option C

4. Quick Check:

   Variable assignment allows extra properties, prints name [OK]

Hint: Variables with extra props assign fine; literals with extras error [OK]

Common Mistakes:

• Expecting excess property error on variable assignment
• Confusing compile-time error with runtime output
• Assuming extra properties are removed

4. Identify the error in this TypeScript code and fix it:

interface Car { make: string; }
const car = { make: 'Toyota', year: 2020 };
const myCar: Car = { make: 'Honda', year: 2018 };

medium

A. Error due to extra property 'year' in direct object literal; fix by assigning from variable

B. Error due to missing property 'year'; fix by adding 'year' to interface

C. No error; code is correct

D. Error due to wrong property type; fix by changing 'year' to string

Solution

1. Step 1: Identify excess property check error

   Direct assignment of object literal with extra property year causes error.

2. Step 2: Fix by assigning from variable

   Assigning from variable car avoids excess property checks and fixes error.

3. Final Answer:

   Error due to extra property 'year' in direct object literal; fix by assigning from variable -> Option A

4. Quick Check:

   Direct literal with extra prop = error; use variable [OK]

Hint: Assign extra props via variable, not direct literal [OK]

Common Mistakes:

• Adding extra properties to interface unnecessarily
• Ignoring excess property check rules
• Assuming no error on direct literal with extra props

5. Given this interface and code, which assignment will NOT cause a TypeScript error?

interface User { username: string; }

// Option 1
const u1: User = { username: 'john', email: '[e-mail]' };

// Option 2
const extraUser = { username: 'jane', email: '[e-mail]' };
const u2: User = extraUser;

// Option 3
const u3 = { username: 'doe', email: '[e-mail]' } as User;

// Option 4
const u4: User = { username: 'max' };

hard

A. Only Option 3 and Option 4

B. Only Option 2 and Option 4

C. Only Option 1 and Option 3

D. All options cause errors

Solution

1. Step 1: Analyze Option 1

   Direct literal with extra property email causes excess property check error.

2. Step 2: Analyze Option 2 and 4

   Option 2 assigns from variable, so no error. Option 4 matches interface exactly, no error.

3. Step 3: Analyze Option 3

   Type assertion on direct object literal with extra property email still triggers excess property checks, causing an error.

4. Final Answer:

   Only Option 2 and Option 4 -> Option B

5. Quick Check:

   Direct literal with extras errors; variable assignment and exact match okay [OK]

Hint: Direct literals with extras error; variables and exact matches okay [OK]

Common Mistakes:

• Thinking type assertions bypass excess property checks on object literals
• Thinking all direct literals with extras are allowed
• Ignoring structural compatibility rules