13.Understanding Interfaces in TypeScript



What Is an Interface in TypeScript?

An interface in TypeScript is a contract or format that describes the shape an object, class, or another interface should follow. It defines the required properties and methods, but it does not provide the implementation itself.

Interfaces are useful because they give your code a standard structure. If an object does not match the interface, TypeScript can warn you during development before the code reaches the browser.

Declaring an Interface

We use the interface keyword to declare an interface.

interface InterfaceName {
  // properties and methods go here
}

Why Interfaces Are Useful

Suppose we have two employee objects. Both objects represent employees, so most of their fields should follow the same structure.

const sales = {
  empId: 1,
  firstName: 'Rajesh',
  lastName: 'Kumar',
  house: false,
  email: 'rajesh@gmail.com'
};

const customerSupport = {
  firstName: 'Anju',
  lastName: 'Patel',
  house: true,
  email: 'anju@gmail.com'
};

Here, both objects are similar, but the structure is not enforced. We can create an interface to make sure every employee object follows the same contract.

Employee Interface Example

interface Employee {
  id: number;
  firstName: string;
  lastName: string;
  house: boolean;
  email: string;
}

Now we can use this interface as a type for employee objects.

const sales: Employee = {
  id: 1,
  firstName: 'Rajesh',
  lastName: 'Kumar',
  house: false,
  email: 'rajesh@gmail.com'
};

const customerSupport: Employee = {
  id: 2,
  firstName: 'Anju',
  lastName: 'Patel',
  house: true,
  email: 'anju@gmail.com'
};

If we miss a required property, add a wrong property type, or leave the object incomplete, TypeScript will show an error.

Optional Properties in Interfaces

Sometimes every object does not need every property. TypeScript allows optional properties by using the question mark operator ?.

interface Employee {
  id: number;
  firstName: string;
  lastName: string;
  house: boolean;
  email: string;
  car?: string;
}

In this example, car is optional.

const sales: Employee = {
  id: 1,
  firstName: 'Rajesh',
  lastName: 'Kumar',
  house: false,
  email: 'rajesh@gmail.com'
};

const customerSupport: Employee = {
  id: 2,
  firstName: 'Anju',
  lastName: 'Patel',
  house: true,
  email: 'anju@gmail.com',
  car: 'Yes'
};

Rajesh does not have the car property, but TypeScript accepts it because that property is optional.

Importing Interfaces from Another File

In larger projects, especially Angular projects, interfaces are often defined in separate files and imported where needed.

import { Employee } from '../interfaces/Employee';

const sales: Employee = {
  id: 1,
  firstName: 'Rajesh',
  lastName: 'Kumar',
  house: false,
  email: 'rajesh@gmail.com'
};

Using Interfaces with Classes

A class can implement an interface. This means the class promises to provide all the properties and methods defined in the interface.

interface Car {
  color: string;
}

class Mercedes implements Car {
  color: string;
  computerized: string;

  constructor(color: string, computerized: string) {
    this.color = color;
    this.computerized = computerized;
  }
}

const obj = new Mercedes('Red', 'Yes');
console.log('Mercedes car is of color: ' + obj.color + ' and it is latest: ' + obj.computerized);

Interfaces are checked by TypeScript during compilation. They are not converted into JavaScript output because they are only used for type checking.

Interfaces and Arrays

Interfaces can also describe index-based structures such as arrays or key-value objects.

interface StudentsList {
  [index: number]: string;
}

const nameList: StudentsList = ['Rajesh', 'Anju'];

If we add a number to this array, TypeScript will show an error because the interface says every value must be a string.

interface AgeList {
  [name: string]: number;
}

const ageList: AgeList = {};
ageList['Kiran'] = 30; // OK
ageList['Hetal'] = 25; // OK

Interface Inheritance

One interface can extend another interface. This allows us to reuse properties and build larger structures from smaller ones.

interface Student {
  roll: number;
}

interface WebDesignStudent extends Student {
  course: string;
}

const designer: WebDesignStudent = {
  roll: 2,
  course: 'Web Design'
};

console.log('Roll: ' + designer.roll);
console.log('Course: ' + designer.course);

Multiple Interface Inheritance

TypeScript does not support multiple class inheritance, but an interface can extend multiple interfaces.

interface IParent1 {
  v1: number;
}

interface IParent2 {
  v2: number;
}

interface Child extends IParent1, IParent2 {}

const obj: Child = {
  v1: 12,
  v2: 23
};

console.log('Value 1: ' + obj.v1 + ' Value 2: ' + obj.v2);

Conclusion

Interfaces are one of the most important features of TypeScript. They help define a clear structure for objects, classes, arrays, and inherited types. By using interfaces, your code becomes easier to understand, safer to maintain, and more useful in large applications such as Angular projects.