Classes and Objects 🏛️

1. Classes, Fields & the Constructor

A class is a blueprint for objects. The constructor is a special method that runs once when you write new ClassName(...); its job is to store the starting values on this — the brand-new object being built. A method is just a function that lives on the object. Read this worked example, run it, then you'll write your own.

// A class is a BLUEPRINT. You stamp out objects from it with "new".
console.log("=== Building objects from a class ===");

class User {
  // The constructor runs once, when you write "new User(...)".
  // Its job: store the incoming values on "this" (the new object).
  constructor(name, email, age) {
    this.name = name;     // this = the object being built
    this.email = email;
    this.age = age;
  }

  // A method = a function that lives on the object.
  greet() { return "Hi, I'm " + this
...

In TypeScript you add a type to every field and parameter, so the compiler catches mistakes before the code runs. You declare the fields above the constructor with name: string. TypeScript also offers a shortcut called parameter properties: put an access modifier on a constructor parameter and TypeScript declares the field and assigns it for you — no this.name = name boilerplate. (This block is read-only; it's TypeScript-specific syntax.)

// TypeScript version — note the type annotations the JS above hides.

class User {
  // Declare each field WITH its type, above the constructor:
  name: string;
  email: string;
  age: number;

  constructor(name: string, email: string, age: number) {
    this.name = name;     // TS checks the types line up
    this.email = email;
    this.age = age;
  }

  greet(): string {       // the ": string" is the RETURN type
    return `Hi, I'm ${this.name} (${this.age})`;
  }
}

// ---- Parameter properties: the same class, written shorthand ----
// A modifier (public/private/readonly) on a constructor PARAMETER
// declares the field AND assigns it for you. No "this.x = x" needed.

class UserShort {
  constructor(
    public name: string,
    public email: string,
    public age: number
  ) {}                    // empty body — TS wired it all up

  greet(): string {
    return `Hi, I'm ${this.name} (${this.age})`;
  }
}

2. Access Modifiers & readonly

Modifiers decide who can touch a field. public (the default) is readable everywhere; private is reachable only inside the same class; protected adds subclasses to that circle; and readonly lets a field be set once (in the constructor) and then locks it. These checks are TypeScript-only — they protect you while you type, then vanish at runtime — so this is a read-only block.

// Access modifiers control WHO can touch a field. (TypeScript-only.)

class BankAccount {
  public  owner: string;        // ✅ readable everywhere (public is the default)
  private balance: number;      // 🔒 only inside THIS class
  protected pin: string;        // 🔒 this class AND subclasses, not outside
  readonly id: string;          // set once (in the constructor), then frozen

  constructor(owner: string, balance: number, id: string) {
    this.owner = owner;
    this.balance = balance;
    this.id = id;               // ✅ readonly fields may be set in the constructor
  }

  deposit(amount: number): void {
    this.balance += amount;     // ✅ private is reachable from inside the class
  }
}

const acc = new BankAccount("Alice", 1000, "ACC-001");
console.log(acc.owner);         // ✅ "Alice"  (public)
// console.log(acc.balance);    // ❌ TS2341: 'balance' is private
// acc.id = "ACC-002";          // ❌ TS2540: 'id' is read-only

3. Getters & Setters

A getter looks like a plain property when you read it (temp.fahrenheit, no parentheses) but actually runs code — great for values you want to compute on the fly. A setter runs when you assign (temp.celsius = 30), which is the perfect place to validate. By convention the backing field is named with a leading underscore, like _celsius.

// Getters and setters look like a plain property but run CODE.
console.log("=== Getters & setters ===");

class Temperature {
  constructor(celsius) { this._celsius = celsius; } // _name = "internal"

  // "get" runs when you READ the property (no parentheses!)
  get celsius() { return this._celsius; }
  get fahrenheit() { return this._celsius * 9 / 5 + 32; }

  // "set" runs when you ASSIGN to the property — perfect for validation
  set celsius(value) {
    if (value < -273.15) throw new Error
...

Your turn. The Book class below is almost finished — fill in the five blanks marked ___ using the // 👉 hints, then run it and check your output.

// 🎯 YOUR TURN — replace each ___ then press "Try it Yourself".
console.log("=== Build a Book ===");

class Book {
  constructor(title, author, pages) {
    // 1) Store each parameter on "this":
    this.title  = ___;     // 👉 title
    this.author = ___;     // 👉 author
    this.pages  = ___;     // 👉 pages
  }

  // 2) Return a one-line summary using the fields:
  describe() {
    return ___ + " by " + ___ + " (" + this.pages + " pages)";
    // 👉 use this.title and this.author
  }
}

let
...

4. Inheritance: extends & super

extends says "this class is a kind of that one" and inherits its fields and methods. Inside a subclass constructor you must call super(...) first — that runs the parent's constructor before you touch this. A subclass can override a method by redefining it; each object then uses its own version. Read the worked example, then complete the exercise below it.

// extends = "is a kind of".  super = "the parent's version".
console.log("=== Inheritance ===");

class Shape {
  constructor(name, color) { this.name = name; this.color = color; }
  describe() { return this.color + " " + this.name; }
  area() { return 0; }                 // a default, overridden below
}

class Circle extends Shape {
  constructor(radius, color) {
    super("circle", color);            // run Shape's constructor FIRST
    this.radius = radius;              // ...then add Circl
...

Now you try. Make Dog inherit from Animal, call super in its constructor, and override speak(). Fill in the four blanks:

// 🎯 YOUR TURN — finish the subclass using extends and super.
console.log("=== Animals ===");

class Animal {
  constructor(name) { this.name = name; }
  speak() { return this.name + " makes a sound"; }
}

// 1) Make Dog inherit from Animal:
class Dog extends ___ {        // 👉 Animal
  constructor(name, breed) {
    // 2) Call the PARENT constructor first (it sets this.name):
    ___(name);                 // 👉 super
    this.breed = breed;
  }

  // 3) Override speak() to return name + " bar
...

5. Implementing an Interface

An interface is a contract: a list of methods and properties a class promises to provide. Writing class Product implements Comparable tells TypeScript "check that Product has everything Comparable requires." If a method is missing you get error TS2420 at compile time, long before users hit it. A class can implement several interfaces at once. Here's the TypeScript contract, then a runnable class that fulfils it:

interface Serializable {
  toJSON(): string;
}
interface Comparable<T> {
  compareTo(other: T): number;
}

// One class, two contracts — TS checks BOTH are satisfied:
class Product implements Serializable, Comparable<Product> {
  constructor(public name: string, public price: number) {}
  toJSON(): string { return JSON.stringify({ name: this.name, price: this.price }); }
  compareTo(other: Product): number { return this.price - other.price; }
}

// In TS, "class Product implements Comparable" is a PROMISE that the
// class supplies every method the interface lists. JS has no interfaces,
// so here we just show the class that the contract describes.
console.log("=== implements a contract ===");

// TS interface (for reference):
//   interface Comparable {
//     compareTo(other: Product): number;
//   }

class Product {
  constructor(name, price) { this.name = name; this.price = price; }

  // The method the interface required:
  compare
...

class Box<T> {
  private value: T;
  constructor(value: T) { this.value = value; }
  get(): T { return this.value; }        // returns the SAME type you put in
}

const n = new Box<number>(42);
const s = new Box<string>("hi");
n.get();    // typed as number
s.get();    // typed as string
// new Box<number>("oops");  // ❌ TS2345: string is not assignable to number

// 🎯 MINI-CHALLENGE: a Stack
console.log("=== Stack ===");

// 1. Make a class "Stack" whose constructor sets  this.items = [];
// 2. push(item): add item to the end of this.items
// 3. pop(): remove and RETURN the last item
// 4. peek(): return the last item WITHOUT removing it
// 5. get size(): a GETTER returning this.items.length
//
// Then run the test lines at the bottom — they should print the
// expected output below.

// your code here


// ---- test (uncomment once your class exists) -
...