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

Need a 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

Need a 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

Need a 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

Need a hint?

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