📘 TypeScript: Day 2 – Interfaces & Object Types

Did you remember? We used inline object typing like this:

const car: { brand: string; year: number } = {
  brand: "Tata",
  year: 2025
};

That works fine, but imagine you have lots of objects with the same shape. Typing { brand: string; year: number } again and again is messy.
👉 This is where interfaces come in.

1. Interfaces (the clean way)

interface Car {
  brand: string;
  year: number;
}

const car1: Car = { brand: "Tata", year: 2025 };
const car2: Car = { brand: "Tesla", year: 2024 };

console.log(car1) // { brand: 'Tata', year: 2025 }
console.log(car2) // { brand: 'Tesla', year: 2024 }

2. Optional Properties

Sometimes an object might not have all properties:

interface User {
  name: string;
  age?: number; // optional
}

const user1: User = { name: "Sagar" };
const user2: User = { name: "Sakshi", age: 30 };

console.log(user1) // { name: 'Sagar' }
console.log(user2) // { name: 'Sakshi', age: 30 }

3. Readonly Properties

If you don’t want something to change:

interface Book {
  readonly id: number;
  title: string;
}

const book: Book = { id: 1, title: "TypeScript Basics" };

console.log(book) // { id: 1, title: 'TypeScript Basics' }

book.title = "Advanced TS"; // ✅ OK
// book.id = 2; ❌ Error: Cannot assign to 'id' because it is a read-only property

4. Functions Inside Interfaces

Interfaces can also describe methods:

interface Calculator {
  add(a: number, b: number): number;
}

const calc: Calculator = {
  add(a, b) {
    return a + b;
  }
};

console.log(calc.add(5, 3)) // 8

📝 Exercises

Try these in the Playground or your setup:

1. Create an interface Person with:

   • name (string),

   • age (number),

   • isStudent (boolean, optional).
     Then make two objects with it.

2. Create an interface Movie with:

   • title (string),

   • year (number),

   • readonly id (number).
     Make one movie object, try changing the id (see what happens).

3. Create an interface MathOps with a method multiply(a: number, b: number): number.
   Implement it and call it.

Solution:

1. Create an interface Person with:

   • name (string),

   • age (number),

   • isStudent (boolean, optional).
     Then make two objects with it.

   Solution: 👨‍👩‍👧 Person Interface

   Blueprint:

   interface Person {
     name: string;
     age: number;
     isStudent?: boolean; // optional
   }
   

   Objects:

   const person1: Person = { name: "Sagar", age: 20, isStudent: true };
   const person2: Person = { name: "Sakshi", age: 15 };
   

   🧸 Explanation:

   • isStudent is optional → person2 can skip it.

   • TypeScript checks that both objects follow the Person blueprint.

   🖥 Output:

   { name: 'Sagar', age: 20, isStudent: true }
   { name: 'Sakshi', age: 15 }
   

2. Create an interface Movie with:

• title (string),

• year (number),

• readonly id (number).
  Make one movie object, try changing the id (see what happens).

🎬 Movie Interface

• Blueprint:

  interface Movie {
    readonly id: number;
    title: string;
    year: number;
  }
  

  Object:

  const movie1: Movie = { id: 1, title: "Bahubali", year: 2020 };
  

  Updating fields:

  movie1.title = "Chota Chetan"; // ✅ OK
  // movie1.id = 2; ❌ Error, id is readonly
  

  🧸 Explanation:

  • id is like a movie’s unique ticket number → can’t be changed.

  • title and year are normal, so you can update them.

  🖥 Output:

  { id: 1, title: 'Bahubali', year: 2020 }
  { id: 1, title: 'Chota Chetan', year: 2020 }
  

2. Create an interface MathOps with a method multiply(a: number, b: number): number.
   Implement it and call it.

🔢 MathOps Interface

Blueprint:

interface MathOps {
  multiply(a: number, b: number): number;
}

Object:

const result: MathOps = {
  multiply(a, b) {
    return a * b;
  }
};

console.log(result.multiply(2, 3));

🧸 Explanation:

• You told TypeScript: “Any object of type MathOps must have a multiply method.”

• The object result implements that method.

• Works like a mini calculator.

🖥 Output:

6

✅ All 3 exercises are 100% completed.
You used:

• Optional (?) ✔

• Read-only (readonly) ✔

• Function in interface ✔

Also Learn

• TypeScript: Day 1 – Variables, Types & Functions

• What is TypeScript?

Powered by wisp