📖 The Story: The Shape Shifter

A team was building a payment gateway. The frontend developer assumed the API response for a transaction looked like this: { amount: number, currency: string }. They wrote transaction.amount.toFixed(2) to display the price.

In production, the API started returning { amount: "100.00", currency: "USD" } because a backend dev decided strings were easier to format. The frontend crashed instantly: toFixed is not a function.

Because they were using plain JavaScript, there was no contract. The data shape shifted without warning. The team immediately adopted TypeScript Interfaces. They defined a Transaction interface. The backend team looked at the interface, realized their mistake, and fixed the API to return a number. The crash never happened again.

Without interfaces, data is a shape-shifting monster. With interfaces, it's a locked box with a clear label.

🎯 Why Interfaces?

🧒 Explain Like I'm 10

Imagine you are ordering a Happy Meal. The Happy Meal has a contract: it must come with a burger, fries, a drink, and a toy.

If the cashier hands you a bag with just a burger and fries, you know it's wrong. An Interface is the picture on the menu that shows exactly what should be in the bag. TypeScript is the manager who checks the bag before handing it to you.

🎓 Professional Explanation

An Interface is a way to describe the shape of an object. It acts as a blueprint. Unlike classes, interfaces do not exist at runtime; they are purely for compile-time type checking. TypeScript uses "structural typing", meaning if an object has the properties required by the interface, it is considered compatible, regardless of its name.

⚙️ Defining Interfaces

Here is how you define and use a basic interface:

// 1. Define the contract
interface User {
  id: number;
  name: string;
  email: string;
}

// 2. Use it
const adminUser: User = {
  id: 1,
  name: "Ram",
  email: "ram@test.com"
};

// Error: Property 'email' is missing.
const guestUser: User = {
  id: 2,
  name: "Guest"
};

🔒 Optional & Readonly Properties

Sometimes a property isn't required, or shouldn't be changed after initialization.

interface Product {
  // Readonly: Can only be set once
  readonly sku: string;
  name: string;
  price: number;
  
  // Optional: Doesn't have to exist
  description?: string;
}

const laptop: Product = {
  sku: "LP-2025",
  name: "MacBook Pro",
  price: 1999
  // description is omitted, which is valid!
};

laptop.sku = "LP-2026"; // Error: Cannot assign to 'sku' because it is read-only

🔗 Extending Interfaces

Interfaces can inherit from other interfaces, allowing you to build complex models from simple ones.

interface Animal {
  legs: number;
}

interface Dog extends Animal {
  bark(): void;
}

const myDog: Dog = {
  legs: 4, // Inherited from Animal
  bark() { console.log("Woof!"); }
};

⚔️ Type vs Interface

TypeScript has two ways to define shapes: interface and type. Which should you use?

⚠️ Common Mistakes

Mistake 1: Excess Property Checking

If you pass an object literal directly, TypeScript checks for excess properties.

interface User { name: string; }

// Error: 'age' does not exist in type 'User'
const u: User = { name: "Ram", age: 30 };

// Valid: Excess properties aren't checked on variables
const rawData = { name: "Ram", age: 30 };
const u2: User = rawData; // OK!

✅ Best Practices

1. Use PascalCase: Name interfaces like UserProfile, not userProfile.
2. Don't prefix with 'I': Avoid IUser. TypeScript context makes it clear it's an interface.
3. Prefer Interfaces for Objects: Reserve type for complex utility types.

🏗️ Senior Deep Dive

Declaration Merging

Interfaces can "merge". If you declare two interfaces with the same name, TypeScript combines them. This is extremely useful for extending third-party library types or augmenting the global Window object.

interface Window {
  myCustomGlobalVar: string;
}

window.myCustomGlobalVar = "Hello"; // No TS error!

💼 Interview Questions

🏋️ Practical Exercise

📝 Quiz

📦 Summary