In this tutorial, you will be introduced to how to define an interface for array of objects in TypeScript. Along with a few examples to make it easier for you to understand.
Define an interface for array of objects in TypeScript
To define an interface for an array of objects, we do the following things:
- First, we define the interface Type[]
- Then we create an array to store elements with the data type of Type[]. All elements added to the array must conform to the type.
Syntax:
const arr: Type[] =[];
First Approach
Take a look at this example:
Example 1:
interface Student {
sid: string;
sname: string;
}
const student_arr: Student[] = [
{ sid: '20187221', sname: 'Duong' },
];
student_arr.push({ sid: '20187229', sname: 'Long' });
console.log(student_arr)Output:
[
{ sid: '20187221', sname: 'Duong' },
{ sid: '20187229', sname: 'Long' }
]In this example, we create an interface named Student with two properties, ‘sname‘ and ‘sid‘ of the same type as string. Along with that, array student_arr is created with the type Student[]. As you can see, the two objects in the array share the same format. Each object has properties ‘sname‘ and ‘sid‘ of ‘string’ type.
In case you add a new element to the array, but it does not have the same format as in the interface, the type checker will detect the error and notify you.
student_arr.push({ sid: '20187222', sname: 'Phong', gender: 'Male' });Output:
Argument of type '{ sid: string; sname: string; gender: string; }' is not assignable to parameter of type 'Student'.
Object literal may only specify known properties, and 'gender' does not exist in type 'Student'.Second Approach
A more flexible approach for you is to use the index signature. When you are not sure about the name and data type of a particular property, index signature will be helpful to you in this case.
Example 2:
interface Lecturer {
lid: string;
lname: string;
[key: string]: any;
}
const lecturers_arr: Lecturer[] = [
{ lid: '100', lname: 'Mr.Uy' },
];
lecturers_arr.push({ lid: '101', lname: 'Mrs.Kim Anh', age: 38 });
lecturers_arr.push({ lid: '102', lname: 'Mr.Dung', email: '[email protected]' });
console.log(lecturers_arr)Output:
[
{ lid: '100', lname: 'Mr.Uy' },
{ lid: '101', lname: 'Mrs.Kim Anh', age: 38 },
{ lid: '102', lname: 'Mr.Dung', email: '[email protected]' }
]As you can see, now all the objects in the array have properties ‘lid’ and ‘lname’ of string type and property with the key of string type and value of any type.
The element with ‘lid‘ = 101 has an age attribute with a value of number type, while the element with ‘lid‘ = 102 has an email attribute of string type. The first element even has only two properties, ‘lname‘ and ‘lid‘.
The last property is optional. You can omit it or use it with any key-value pair as long as the expression you define is met.
The use of ‘any’ is discouraged. If the program does not give the desired results, it will take a long time to determine where the error is. In this case, the type checker can’t help you.
Summary
That’s all we want to mention. We hope you understand how we can define an interface for array of objects in TypeScript through these above examples. Thank you for being so interested in this article.
Maybe you are interested:
- Declare a function with an Object return type in TypeScript
- Check If An Object Is Empty In TypeScript
- Get the Class Name of an Object in TypeScript
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js