TypeScript Interfaces Explained with Simple Examples

Learn TypeScript interfaces with simple examples. Understand their use for type safety, flexibility, and maintainability in your code.

TypeScript is a powerful superset of JavaScript that introduces static typing to enhance code quality and development productivity. One of the most useful features of TypeScript is interfaces. Interfaces allow developers to define the shape of objects, ensuring that the objects conform to a specific structure.

1. What is a TypeScript Interface?

In TypeScript, an interface is a way to define the structure of an object. It specifies the properties and methods that an object must implement. Interfaces allow you to define contracts in your code, ensuring that objects follow a certain structure.

For example, an interface can define an object with a particular set of properties like name and age, or it can describe a function signature, a class, or even a method. TypeScript checks that any object or function implementing the interface adheres to the structure defined by the interface.

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

const person: Person = {
  name: "John Doe",
  age: 30
};

In this example, the Person interface defines an object with name (a string) and age (a number). The person object must match this structure, or TypeScript will throw an error.

2. Why Use Interfaces in TypeScript?

2.1. Code Readability and Maintainability

Interfaces help keep your code clean, modular, and easy to understand. By using interfaces, you can declare the structure of objects and ensure consistency across your codebase. This is especially beneficial in large projects with multiple developers working on the same code.

2.2. Type Safety

One of the key benefits of TypeScript is its ability to enforce type safety. By using interfaces, TypeScript will catch errors during development when you try to assign incorrect data types to the properties of objects. For instance, if the name property is supposed to be a string but you accidentally assign it a number, TypeScript will flag an error.

2.3. Flexible and Reusable Code

Interfaces make your code more flexible and reusable. Once you define an interface, you can use it across multiple objects, ensuring that each object follows the same structure without needing to duplicate code.

3. How to Define an Interface in TypeScript

To define an interface in TypeScript, you use the interface keyword. The general syntax looks like this:

interface InterfaceName {
  propertyName: type;
}

3.1. Example of Defining an Interface

Let’s define an interface called Car that describes an object with properties such as make, model, and year.

interface Car {
  make: string;
  model: string;
  year: number;
}

const car1: Car = {
  make: "Toyota",
  model: "Corolla",
  year: 2021
};

In this example:

• The Car interface ensures that any object assigned to car1 must have the properties make, model, and year, each of the appropriate type (string, string, number).

4. Optional Properties in Interfaces

In TypeScript, you can make some properties optional by using the ? symbol. This is useful when defining objects where some properties are not always required.

4.1. Example of Optional Properties

Let’s modify the Car interface to make the year property optional:

interface Car {
  make: string;
  model: string;
  year?: number; // Optional property
}

const car1: Car = {
  make: "Honda",
  model: "Civic"
};

In this example, car1 is still valid even though it does not have the year property. The year property is now optional because of the ? symbol.

5. Readonly Properties in Interfaces

In TypeScript, you can make properties readonly using the readonly modifier. This ensures that the property cannot be modified after it’s initialized.

5.1. Example of Readonly Properties

Let’s modify the Car interface to make the make property readonly:

interface Car {
  readonly make: string;
  model: string;
  year?: number;
}

const car1: Car = {
  make: "Ford",
  model: "Focus"
};

// Trying to modify the 'make' property will cause an error:
car1.make = "Chevrolet"; // Error: Cannot assign to 'make' because it is a read-only property.

In this example, the make property is marked as readonly, and TypeScript will not allow you to modify it after the object is created.

6. Interfaces and Functions

Interfaces can also be used to define function signatures. This is particularly useful when you want to ensure that a function follows a specific signature with regard to its parameters and return type.

6.1. Defining a Function Type Interface

Here’s an example where we define an interface for a function that takes two numbers and returns a number.

interface MathOperation {
  (x: number, y: number): number;
}

const add: MathOperation = (x, y) => x + y;
const multiply: MathOperation = (x, y) => x * y;

In this example, the MathOperation interface defines a function that accepts two number parameters and returns a number. Both the add and multiply functions must match this signature.

7. Extending Interfaces

Interfaces in TypeScript can extend other interfaces. This allows you to build more complex structures by combining multiple interfaces into one.

7.1. Example of Extending an Interface

Let’s define two interfaces: Person and Employee. We will extend the Person interface to create the Employee interface.

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

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

const employee1: Employee = {
  name: "Jane Doe",
  age: 28,
  employeeId: 12345,
  department: "Engineering"
};

In this example, the Employee interface extends the Person interface, meaning it inherits the name and age properties and adds additional properties (employeeId and department). The employee1 object must have all the properties of both interfaces.

8. Interface vs Type Alias in TypeScript

Both interfaces and type aliases in TypeScript can define the shape of objects, but they are used in slightly different ways. While interfaces are generally used to define the structure of objects, classes, and functions, type aliases can define types that include primitive types, unions, intersections, and more.

8.1. Example of Type Alias

Here’s how you would define the same Person structure using a type alias:

type Person = {
  name: string;
  age: number;
};

const person: Person = {
  name: "Alice",
  age: 25
};

While interfaces are generally more suited to object-like structures and class declarations, type aliases offer more flexibility. However, interfaces are often preferred when working with object structures because they provide more useful error messages and support extending and merging.

9. Conclusion

We explored TypeScript interfaces and how they help define the structure of objects, enforce type safety, and improve the readability and maintainability of your code. Interfaces are an essential tool for creating clean, well-structured applications and ensuring that objects and functions follow the intended design.

To summarize:

• Interfaces are used to define the structure of objects, functions, and classes.
• You can make properties optional or readonly to create more flexible interfaces.
• Interfaces can be extended to build upon existing structures.
• Interfaces improve type safety, code readability, and maintainability.

By leveraging TypeScript interfaces, you can write more predictable and error-free code, enhancing the development process and ensuring a smoother collaboration between team members.