How to Define and Use TypeScript Interface Array of Objects?

In this tutorial, I will explain how to define and use an array of objects in TypeScript using interfaces.

What is an Interface in TypeScript?

An interface in TypeScript is used to define the structure of an object. It serves as a contract within your code, ensuring that objects adhere to a specific shape. This is particularly useful when dealing with arrays of objects, as it allows you to enforce a consistent structure across all elements in the array.

Define an Interface for an Array of Objects in TypeScript

To define an array of objects using an interface in TypeScript, you first need to create the interface that describes the shape of the objects. Let’s consider an example where we manage a list of employees in a company. Each employee object will have id, name, and position properties.

interface Employee {
  id: number;
  name: string;
  position: string;
}

const employees: Employee[] = [
  { id: 1, name: 'John Doe', position: 'Software Engineer' },
  { id: 2, name: 'Jane Smith', position: 'Project Manager' },
  { id: 3, name: 'Michael Johnson', position: 'Product Owner' }
];

In this example, the Employee interface ensures that each object in the employees array has the required properties with the correct types.

Read Create an Object from an Interface in TypeScript

Add and Manipulate Objects in the TypeScript Array

You can easily add new objects to the array or manipulate existing ones while maintaining type safety. Here’s how you can add a new employee to the array:

const newEmployee: Employee = { id: 4, name: 'Emily Davis', position: 'UX Designer' };
employees.push(newEmployee);

To update an existing employee’s position, you can do the following:

employees[0].position = 'Senior Software Engineer';

Iterate Over the Array

TypeScript’s type safety also extends to array methods, ensuring that you can iterate over the array without worrying about runtime errors due to incorrect object structures.

employees.forEach(employee => {
  console.log(`${employee.name} - ${employee.position}`);
});

Read Set Default Values for TypeScript Types

Nested Objects Examples

Sometimes, you may need to define more complex structures, such as an array of objects that contain nested objects. For instance, consider a scenario where each employee has a list of skills.

interface Skill {
  name: string;
  proficiency: number; // 1 to 10 scale
}

interface Employee {
  id: number;
  name: string;
  position: string;
  skills: Skill[];
}

const employees: Employee[] = [
  {
    id: 1,
    name: 'John Doe',
    position: 'Software Engineer',
    skills: [
      { name: 'JavaScript', proficiency: 9 },
      { name: 'TypeScript', proficiency: 8 }
    ]
  },
  {
    id: 2,
    name: 'Jane Smith',
    position: 'Project Manager',
    skills: [
      { name: 'Agile Methodologies', proficiency: 10 },
      { name: 'Communication', proficiency: 9 }
    ]
  }
];

In this example, the Employee interface includes a skills property, which is an array of Skill objects. This nested structure allows for more detailed and structured data representation.

Conclusion

Using interfaces to define arrays of objects in TypeScript enhances the readability, maintainability, and type safety of your code. In this tutorial, I explained how to define and use TypeScript Interface array of objects.

You may also like: