Frontend Engineering | VoidX Academy

11. Interfaces & Object Modifiers

Interfaces: The Object Blueprints

In the previous modules, we used type aliases to define object shapes. However, TypeScript provides another, incredibly powerful way to define objects: the Interface. Interfaces are the industry standard for defining object structures, especially in large-scale React applications.

Defining an Interface

An interface strictly defines the contract that an object must adhere to. The syntax looks very similar to a class or an object literal, but without the equals sign.

// Defining an Interface (Notice: No '=' sign after the name) interface User {
  name: string;
  age: number;
}

// Using the Interface
const currentUser: User = {
  name: "Prince",
  age: 20
};

Interface vs Type: What's the difference?

For basic objects, interface and type do the exact same thing. The primary difference is extendability. Interfaces are designed to be extended (inherited from), just like Object-Oriented classes. Types use intersections (&) which can get messy, while Interfaces use the clean extends keyword.

interface BaseEmployee {
  name: string;
  department: string;
}

// Manager automatically inherits 'name' and 'department', and adds its own properties!
interface Manager extends BaseEmployee {
  teamSize: number;
}

const boss: Manager = {
  name: "Alice",
  department: "Engineering",
  teamSize: 12
};

Optional Properties

In real-world data, some fields are not guaranteed to exist. If you fetch a user from a database, they might not have provided a phone number. We use the Optional Modifier (?) to tell TypeScript that a property is allowed to be missing.

interface Customer {
  name: string;
  email: string;
  age?: number; // This property is entirely optional
}

// Perfectly valid! We did not provide an age.
const newCustomer: Customer = {
  name: "John Doe",
  email: "john@voidx.io"
};

Readonly Properties

Sometimes you want to assign a value to a property when the object is created, but ensure that it can never be changed or mutated afterward (like a database ID or a created timestamp). The readonly modifier enforces this.

interface DatabaseRecord {
  readonly id: number; // Locked at creation
  title: string;
}

const record: DatabaseRecord = {
  id: 1045,
  title: "Introduction to TypeScript"
};

// We can change the title...
record.title = "Advanced TypeScript";

// But TS will throw an error if we touch the ID!
// record.id = 9999; // ERROR: Cannot assign to 'id' because it is a read-only property.

11. Interfaces & Object Modifiers

Interfaces: The Object Blueprints

Defining an Interface

An interface strictly defines the contract that an object must adhere to. The syntax looks very similar to a class or an object literal, but without the equals sign.

// Defining an Interface (Notice: No '=' sign after the name) interface User {
  name: string;
  age: number;
}

// Using the Interface
const currentUser: User = {
  name: "Prince",
  age: 20
};

Interface vs Type: What's the difference?

interface BaseEmployee {
  name: string;
  department: string;
}

// Manager automatically inherits 'name' and 'department', and adds its own properties!
interface Manager extends BaseEmployee {
  teamSize: number;
}

const boss: Manager = {
  name: "Alice",
  department: "Engineering",
  teamSize: 12
};

Optional Properties

interface Customer {
  name: string;
  email: string;
  age?: number; // This property is entirely optional
}

// Perfectly valid! We did not provide an age.
const newCustomer: Customer = {
  name: "John Doe",
  email: "john@voidx.io"
};

Readonly Properties

interface DatabaseRecord {
  readonly id: number; // Locked at creation
  title: string;
}

const record: DatabaseRecord = {
  id: 1045,
  title: "Introduction to TypeScript"
};

// We can change the title...
record.title = "Advanced TypeScript";

// But TS will throw an error if we touch the ID!
// record.id = 9999; // ERROR: Cannot assign to 'id' because it is a read-only property.

11. Interfaces & Object Modifiers

Interfaces: The Object Blueprints

Defining an Interface

Interface vs Type: What's the difference?

Optional Properties

Readonly Properties

Knowledge Check

11. Interfaces & Object Modifiers

Interfaces: The Object Blueprints

Defining an Interface

Interface vs Type: What's the difference?

Optional Properties

Readonly Properties

Knowledge Check