Interfaces

A small working example

Follow the values through this example, then change one input.

interface Lesson {
  title: string;
  completed?: boolean;
}
const lesson: Lesson = { title: "Interfaces" };
console.log(lesson.title);

1. title is required.
2. completed may be absent.
3. The interface is removed when transpiling.

Basic Interface

Defining a simple interface for object structure.

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

const user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
  age: 25
};

function displayUser(user: User) {
  console.log(`${user.name} (${user.email})`);
}

displayUser(user);

Optional Properties

Using optional properties and readonly modifiers.

interface Product {
  id: number;
  name: string;
  price: number;
  description?: string;  // Optional
  readonly category: string;  // Cannot be modified
}

const product: Product = {
  id: 101,
  name: "Laptop",
  price: 999.99,
  category: "Electronics"
};

// product.category = "Tech"; // Error: readonly property
console.log(product);

// Using optional property
if (product.description) {
  console.log(product.description);
}

Extending Interfaces

Creating new interfaces by extending existing ones.

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  employeeId: number;
  department: string;
  salary: number;
}

const employee: Employee = {
  name: "Bob",
  age: 30,
  employeeId: 12345,
  department: "Engineering",
  salary: 75000
};

// Multiple inheritance
interface Manager extends Employee, Person {
  teamSize: number;
  managerId: number;
}

console.log(employee);

Function Types

Using interfaces to define function signatures.

interface MathOperation {
  (a: number, b: number): number;
}

const add: MathOperation = (a, b) => a + b;
const subtract: MathOperation = (a, b) => a - b;

console.log(add(5, 3));      // 8
console.log(subtract(10, 4)); // 6

// Interface for object with methods
interface Calculator {
  add(a: number, b: number): number;
  subtract(a: number, b: number): number;
  multiply(a: number, b: number): number;
}

const calc: Calculator = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b
};