Interfaces and Type Aliases 📐

1. Describing an Object's Shape

An interface is a named description of what an object must contain. You list each property and its type. Once an object is annotated with that interface, TypeScript guarantees every listed property exists and has the right type. Here's the real TypeScript syntax — read every comment:

// An interface describes the SHAPE an object must have.
interface User {
  id: number;        // required: every User must have a number id
  name: string;      // required: must be text
  email: string;     // required: must be text
  isActive: boolean; // required: true or false
}

// This object matches the shape, so TypeScript is happy.
const alice: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
  isActive: true,
};

// Missing "email" -> error TS2741 (see Common Errors below):
// const bob: User = { id: 2, name: "Bob", isActive: true };

At runtime the interface vanishes and you're left with a plain JavaScript object. Run this worked example to see the shape come to life — the comments state exactly what each line prints:

// The interface lives only in TypeScript. At runtime it disappears,
// leaving a plain JS object that MATCHES the shape we promised.
//
// interface User {
//   id: number;
//   name: string;
//   email: string;
//   isActive: boolean;
//   bio?: string;        // optional
//   readonly joinedAt: string;
// }

const user = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
  isActive: true,
  joinedAt: "2024-03-01",   // readonly: we set it once, here
  // bio is omitted — that's allowed
...

2. Optional ? and readonly Properties

Not every property is required. Add a ? after the name to make a property optional — objects may include it or leave it out. Add readonly before a property to lock it after creation: you can set it once, but any later assignment is a compile error. This is how you model "an id is fixed forever, but a bio can be added later."

interface UserProfile {
  name: string;        // required
  email: string;       // required
  readonly id: number; // set once, then locked
  bio?: string;        // optional — the ? means "may be missing"
  avatar?: string;     // optional
}

const p: UserProfile = { id: 7, name: "Alice", email: "a@ex.com" };
// bio and avatar were omitted — that's fine, they're optional.

p.bio = "Developer"; // ✅ ok to add later
p.id = 99;           // ❌ error TS2540: 'id' is read-only and cannot change

Your turn. The program below builds an object that must match a Book shape (with one readonly and one optional field). Fill in the two blanks marked ___, then run it.

// 🎯 YOUR TURN — replace each ___ then press "Try it Yourself".
//
// You're modelling a Book for a library app. In TypeScript the shape is:
//
//   interface Book {
//     readonly isbn: string;  // set once, never changes
//     title: string;          // required
//     pages: number;          // required
//     subtitle?: string;      // optional
//   }
//
// Build a matching object below.

const book = {
  isbn: "978-0131103627",
  title: ___,        // 👉 a book title in "double quotes"
 
...

3. Method Signatures & Extending Interfaces

Interfaces aren't just for data — they can require methods too. A method signature like speak(): string says "this object must have a function called speak that returns a string." And extends lets you build a bigger interface on top of a smaller one: a Dog gets everything an Animal has, plus its own extras. You can even extend several interfaces at once to compose shapes together.

// Method signatures: describe a function a property must provide.
interface Animal {
  name: string;
  speak(): string;            // a method that takes nothing, returns a string
  feed(amount: number): void; // takes a number, returns nothing
}

// "extends" builds a bigger interface from a smaller one (inheritance).
interface Dog extends Animal {
  breed: string;              // Dog has name + speak + feed AND breed
}

// You can extend MORE than one at a time:
interface Timestamped { createdAt: Date; }
interface Post extends User, Timestamped {
  title: string;             // Post has every User + Timestamped field, plus title
}

Run this to see an object that satisfies an extended interface (with a method) behaving at runtime:

// interface Animal { name: string; speak(): string; }
// interface Dog extends Animal { breed: string; }
//
// A Dog object must supply EVERY Animal member plus its own.

const rex = {
  name: "Rex",
  breed: "Beagle",
  speak() { return this.name + " says Woof!"; }, // satisfies speak(): string
};

console.log(rex.name);      // Rex
console.log(rex.breed);     // Beagle
console.log(rex.speak());   // Rex says Woof!

// Index signature in action: a dictionary of string -> string.
// interface S
...

Now you add a method. A Square extends Shape, so it must provide an area() method. Fill in the blank so it returns the correct area:

// 🎯 YOUR TURN — fill in the blanks.
//
// In TypeScript:
//   interface Shape { name: string; area(): number; }
//   interface Square extends Shape { side: number; }
//
// A Square must have name, side, AND an area() method.

const square = {
  name: "tile",
  side: 4,
  // 👉 add a method "area" that returns side * side
  area() {
    return ___;     // 👉 multiply this.side by this.side
  },
};

console.log(square.name + " area = " + square.area());

// ✅ Expected output:
//    tile area = 1
...

4. Index Signatures

Sometimes you don't know the property names ahead of time — you just know they'll all be strings mapping to, say, strings. An index signature [key: string]: string describes exactly that: "any string key is allowed, and its value must be a string." It's perfect for dictionaries, config maps, and translation tables.

// An index signature says "any key of this type maps to that value type".
interface StringMap {
  [key: string]: string;   // any string key -> a string value
}

const env: StringMap = {
  NODE_ENV: "production",
  API_KEY: "abc123",
  PORT: "3000",
};
env.REGION = "eu-west-1"; // ✅ any new string key is allowed
// env.count = 5;         // ❌ value must be a string, not a number

5. interface vs type — Which to Use?

A type alias (type) gives a name to any type — not just object shapes. That includes unions (string | number), intersections (A & B), literal types, tuples, and function types — things an interface simply can't express. For plain object shapes, both work and read almost identically.

// type alias: a name for ANY type, not just object shapes.
type Point = { x: number; y: number };       // object shape
type ID = string | number;                    // union — interface CANNOT do this
type Direction = "up" | "down" | "left" | "right"; // literal union
type Callback = (data: string) => void;       // function type

// Both can describe an object shape:
interface PointI { x: number; y: number }     // same idea, interface style

// Rule of thumb:
//  • interface  -> object shapes & things classes implement (it can be extended/merged)
//  • type       -> unions, intersections, primitives, tuples, function types

// 🎯 MINI-CHALLENGE: a typed Product
//
// In TypeScript you'd write this interface (you don't have to retype it):
//   interface Product {
//     readonly sku: string;   // unique code, never changes
//     name: string;
//     price: number;
//     onSale?: boolean;       // optional
//     describe(): string;     // method returning a string
//   }
//
// 1. Create an object "product" with: sku, name, price (a number),
//    and a describe() method.
// 2. describe() should return:  name + " —
...