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:
I’m Bijay Kumar Sahoo, and I am honored to be awarded the Microsoft MVP. With over 18 years of experience in the IT industry, I got a chance to work on SharePoint Framework (SPFx) development, TypeScript, React, JavaScript, etc. My journey has taken me through esteemed organizations such as TCS, HP, and KPIT, where I have honed my skills and expanded my expertise. Check out more about me here.