Arrays of Objects in TypeScript: A Complete Guide with Examples

Arrays of Objects in TypeScript: A Step-by-Step Tutorial for Those Tired of Errors

Have you ever written TypeScript and suddenly gotten a red underline from your IDE when trying to add an object to an array? Sounds familiar, right? The question "How can I define an array of objects?" is one of the most popular on Stack Overflow. And for good reason: without proper typing of object arrays, your code turns into a source of bugs and headaches.

In this tutorial, we'll cover all the ways to define an array of objects in TypeScript — from simple to advanced. You'll learn how to avoid common mistakes, how to use interfaces, and how to make your code not only functional but also elegant. Let's go!

Why doesn't just [] work?

Let's say you write:

let users = [];

TypeScript sees this as never[] — an array that should never contain any elements. Try adding an object to it:

users.push({ name: 'Anna', age: 25 }); // Error!

The IDE will scream: "Argument of type '{ name: string; age: number; }' is not assignable to parameter of type 'never'." TypeScript doesn't know what you intend to store in the array, so it blocks any additions.

The solution is to explicitly specify the array type. Let's go through all the options.

Method 1: Basic Type Annotation — Square Brackets

The simplest and most intuitive way is to use the Type[] syntax:

let users: { name: string; age: number }[] = [];\n\nusers.push({ name: 'Anna', age: 25 }); // ✅ Works\nusers.push({ name: 'Ivan', age: 30 }); // ✅ Works\n

Here we tell TypeScript: "Hey, this is an array of objects, each of which has properties name (string) and age (number)". The IDE is now happy, autocomplete works, and type errors are caught at compile time.

Downside: if the object structure is complex, describing it directly in the annotation becomes cumbersome. For such cases, interfaces were invented.

Method 2: Interfaces — Your Best Friend

Interfaces allow you to extract the object description into a separate entity and reuse it. This makes the code cleaner and more understandable:

interface User {\n  id: number;\n  name: string;\n  age: number;\n  email?: string; // optional property\n}\n\nlet users: User[] = [];\n\nusers.push({ id: 1, name: 'Anna', age: 25 });\nusers.push({ id: 2, name: 'Ivan', age: 30, email: 'ivan@example.com' }); // ✅\n

Now if you try to add an object without the id field or with the wrong type, TypeScript will throw an error. Interfaces are especially useful when the same object type is used in multiple places.

What about type?

Instead of interface, you can use type:

type User = {\n  id: number;\n  name: string;\n  age: number;\n};\n\nlet users: User[] = [];

The difference between interface and type is a topic for another article. For arrays of objects, you can use both options, but interface is more commonly used for describing object shapes.

Method 3: Generic Syntax Array<Type>

An alternative way is to use generics:

let users: Array<{ name: string; age: number }> = [];\n\n// Or with an interface:\nlet users: Array<User> = [];\n

Both syntaxes (Type[] and Array<Type>) work the same way. The choice is a matter of taste and context. Personally, I prefer Type[] for simple types and Array<Type> for complex generic constructs. But the main thing is to be consistent within the project.

Method 4: Creating an Array with Initial Objects

Often you need not just to declare an array but also to immediately populate it with data. TypeScr