Excess property checking behavior in Typescript - Mini Project: Build & Apply

Understanding Excess Property Checking Behavior

📖 Scenario: Imagine you are creating a simple app to manage user profiles. Each user profile should have a name and age. Sometimes, extra information might be added by mistake. TypeScript helps catch these mistakes with excess property checking.

🎯 Goal: You will create a user profile object, add a configuration variable, use a function to accept only allowed properties, and finally print the user profile to see how TypeScript handles extra properties.

📋 What You'll Learn

Create an interface UserProfile with name as string and age as number

Create a variable user with name, age, and an extra property location

Create a boolean variable allowExtra set to false

Write a function createUser that accepts only UserProfile type

Call createUser with user and print the result

💡 Why This Matters

🌍 Real World

In real apps, you often receive data with extra fields. Understanding excess property checking helps you catch mistakes early and keep your data clean.

💼 Career

Many jobs require writing safe TypeScript code. Knowing how to handle excess properties is important for building reliable applications and avoiding bugs.

1

Create the UserProfile interface and user object

Create an interface called UserProfile with properties name (string) and age (number). Then create a variable called user with name set to "Alice", age set to 30, and an extra property location set to "Wonderland".

Typescript

// Your code here

Hint

Use interface UserProfile { name: string; age: number; } and then create const user = { name: "Alice", age: 30, location: "Wonderland" }.

2

Add a configuration variable

Create a boolean variable called allowExtra and set it to false.

Typescript

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

const user = {
  name: "Alice",
  age: 30,
  location: "Wonderland"
};

// Your code here

Hint

Just write const allowExtra = false; below the user object.

3

Write a function to accept only UserProfile type

Write a function called createUser that takes one parameter profile of type UserProfile and returns it.

Typescript

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

const user = {
  name: "Alice",
  age: 30,
  location: "Wonderland"
};

const allowExtra = false;

// Your code here

Hint

Define function createUser(profile: UserProfile): UserProfile { return profile; }.

4

Call createUser and print the result

Call the function createUser with the variable user and print the result using console.log.

Typescript

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

const user = {
  name: "Alice",
  age: 30,
  location: "Wonderland"
};

const allowExtra = false;

function createUser(profile: UserProfile): UserProfile {
  return profile;
}

// Your code here

Hint

Write console.log(createUser(user)); to see the output.

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