How can I Define an Array of Objects in TypeScript?
Last Updated :
20 May, 2024
In TypeScript, the way of defining the arrays of objects is different from JavaScript. Because we need to explicitly type the array at the time of declaration that it will be an Array of objects. In this article, we will discuss the different methods for declaring an array of objects in TypeScript.
There are many methods of declaring an array of objects in TypeScript as listed below:
Using the inline type declaration
In this method, we will use an object literal with some pre-defined keys and values to explicitly type the array as an array of objects and then assign the values to the properties of the object.
Syntax:
const array_name: {key1: type1, key2: type2, key3: type3}[] = [{}];
Example: The below example will explain how you can define an array of objects using inline typing.
JavaScript
let myArr: {
cktr_name: string, cktr_team: string,
cktr_runs: number
}[] = [
{
cktr_name: "Virat Kohli",
cktr_team: "India",
cktr_runs: 26000
},
{
cktr_name: "AB De Villiers",
cktr_team: "South Africa",
cktr_runs: 15000
},
{
cktr_name: "David Warner",
cktr_team: "Australia",
cktr_runs: 13000
}
];
myArr.forEach((cktr) => {
console.log(`Hi, My name is ${cktr.cktr_name},
I play for ${cktr.cktr_team} and
I've already made ${cktr.cktr_runs}
runs while representing my country.`)
})
Output:
Hi, My name is Virat Kohli, I play for India and I've already made 26000 runs while representing my country.
Hi, My name is AB De Villiers, I play for South Africa and I've already made 15000 runs while representing my country.
Hi, My name is David Warner, I play for Australia and I've already made 13000 runs while representing my country.
Using the in-built interfaces and type
In this approach, first we will define the format of the object inside a interface ot type defined using the respective kerwords. While defining interfaces or type, we will provide the property names and their types inside them and assign them as a explicit type the array.
Syntax:
interface/ type interface_name{
key1: type1,
key2: type2,
key3: type3
}
const array_name: interface_name = [];
Example: The below example will illustarte the use of the interfaces to define an array of objects, you can declare interface as type and can use type also for the same purpose.
JavaScript
interface Cricketer {
cktr_name: string,
cktr_team: string,
cktr_runs: number
}
const cktr1 = {
cktr_name: "Virat Kohli",
cktr_team: "India",
cktr_runs: 26000
}
const cktr2 = {
cktr_name: "AB De Villiers",
cktr_team: "South Africa",
cktr_runs: 15000
}
const cktr3 = {
cktr_name: "David Warner",
cktr_team: "Australia",
cktr_runs: 13000
}
const myArr: Cricketer[] = [cktr1, cktr2, cktr3];
myArr.forEach((cktr) => {
console.log(`Hi, My name is ${cktr.cktr_name},
I play for ${cktr.cktr_team} and
I've already made ${cktr.cktr_runs}
runs while representing my country.`)
})
Output:
Hi, My name is Virat Kohli, I play for India and I've already made 26000 runs while representing my country.
Hi, My name is AB De Villiers, I play for South Africa and I've already made 15000 runs while representing my country.
Hi, My name is David Warner, I play for Australia and I've already made 13000 runs while representing my country.
Using the built-in Array type
We can also use the built-in Array type to define an array of object in TypeScript.
Syntax:
const array_name: Array<{key1: type1, key2: type2, key3: type3}> = [{}];
Example: This example will show you the use of the Array type to create an array of object in TypeScript.
JavaScript
let myArr: Array<{
cktr_name: string,
cktr_team: string, cktr_runs: number
}> = [
{
cktr_name: "Virat Kohli",
cktr_team: "India",
cktr_runs: 26000
},
{
cktr_name: "AB De Villiers",
cktr_team: "South Africa",
cktr_runs: 15000
},
{
cktr_name: "David Warner",
cktr_team: "Australia",
cktr_runs: 13000
}
];
myArr.forEach((cktr) => {
console.log(`Hi, My name is ${cktr.cktr_name},
I play for ${cktr.cktr_team} and
I've already made ${cktr.cktr_runs}
runs while representing my country.`)
})
Output:
Hi, My name is Virat Kohli, I play for India and I've already made 26000 runs while representing my country.
Hi, My name is AB De Villiers, I play for South Africa and I've already made 15000 runs while representing my country.
Hi, My name is David Warner, I play for Australia and I've already made 13000 runs while representing my country.
Using the typeof operator
In this method, we will first create an JavaScript object with some key value pairs inside it and then explicitly assign the type of that object to the array using the typeof operator and built-in array type.
Syntax:
const obj_name = {
key1: val1,
key2: val2
}
const array_name: Array<typeof obj_name> = [{}]
Example: The below example will explain the above approach practically.
JavaScript
const cktr1 = {
cktr_name: "Virat Kohli",
cktr_team: "India",
cktr_runs: 26000
}
const cktr2 = {
cktr_name: "AB De Villiers",
cktr_team: "South Africa",
cktr_runs: 15000
}
const cktr3 = {
cktr_name: "David Warner",
cktr_team: "Australia",
cktr_runs: 13000
}
const myArr: Array<typeof cktr1> = [cktr1,
cktr2, cktr3];
myArr.forEach((cktr) => {
console.log(`Hi, My name is ${cktr.cktr_name},
I play for ${cktr.cktr_team} and
I've already made ${cktr.cktr_runs}
runs while representing my country.`)
})
Output:
Hi, My name is Virat Kohli, I play for India and I've already made 26000 runs while representing my country.
Hi, My name is AB De Villiers, I play for South Africa and I've already made 15000 runs while representing my country.
Hi, My name is David Warner, I play for Australia and I've already made 13000 runs while representing my country.
Using Mapped Types and Generics
Mapped types allow you to create new types by transforming properties of an existing type, and generics enable you to define types that can work with various types of data. By combining these two features, you can create a generic type for arrays of objects that can be reused with different object structures.
Syntax:
type ArrayOf<T> = {
[K in keyof T]: T[K];
}[];
const array_name: ArrayOf<{ key1: type1; key2: type2; key3: type3 }> = [];
Example:
JavaScript
type Cricketer = {
cktr_name: string;
cktr_team: string;
cktr_runs: number;
};
type ArrayOf<T> = T[];
const myArr: ArrayOf<Cricketer> = [
{
cktr_name: "Virat Kohli",
cktr_team: "India",
cktr_runs: 26000,
},
{
cktr_name: "AB De Villiers",
cktr_team: "South Africa",
cktr_runs: 15000,
},
{
cktr_name: "David Warner",
cktr_team: "Australia",
cktr_runs: 13000,
},
];
myArr.forEach(({ cktr_name, cktr_team, cktr_runs }) => {
console.log(`Hi, I'm ${cktr_name} from ${cktr_team}, with
${cktr_runs} runs for my country.`);
});
Output:
Hi, I'm Virat Kohli from India, with 26000 runs for my country.
Hi, I'm AB De Villiers from South Africa, with 15000 runs for my country.
Hi, I'm David Warner from Australia, with 13000 runs for my country.
Similar Reads
TypeScript Tutorial TypeScript is a superset of JavaScript that adds extra features like static typing, interfaces, enums, and more. Essentially, TypeScript is JavaScript with additional syntax for defining types, making it a powerful tool for building scalable and maintainable applications.Static typing allows you to
8 min read
TypeScript Basics
Introduction to TypeScriptTypeScript is a syntactic superset of JavaScript that adds optional static typing, making it easier to write and maintain large-scale applications.Allows developers to catch errors during development rather than at runtime, improving code reliability.Enhances code readability and maintainability wit
5 min read
Difference between TypeScript and JavaScriptEver wondered about the difference between JavaScript and TypeScript? If you're into web development, knowing these two languages is super important. They might seem alike, but they're actually pretty different and can affect how you code and build stuff online.In this article, we'll break down the
4 min read
How to install TypeScript ?TypeScript is a powerful language that enhances JavaScript by adding static type checking, enabling developers to catch errors during development rather than at runtime. As a strict superset of JavaScript, TypeScript allows you to write plain JavaScript with optional extra features. This guide will
3 min read
Hello World in TypeScriptTypeScript is an open-source programming language. It is developed and maintained by Microsoft. TypeScript follows javascript syntactically but adds more features to it. It is a superset of javascript. The diagram below depicts the relationship:Typescript is purely object-oriented with features like
3 min read
How to execute TypeScript file using command line?TypeScript is a statically-typed superset of JavaScript that adds optional type annotations and compiles to plain JavaScript. It helps catch errors during development. To execute a TypeScript file from the command line, compile it using tsc filename.ts, then run the output JavaScript file with node.
2 min read
Variables in TypeScriptIn TypeScript, variables are used to store values that can be referenced and manipulated throughout your code. TypeScript offers three main ways to declare variables: let, const, and var. Each has different behavior when it comes to reassigning values and scoping, allowing us to write more reliable
6 min read
What are the different keywords to declare variables in TypeScript ?Typescript variable declarations are similar to Javascript. Each keyword has a specific scope. Let's learn about variable declarations in this article. In Typescript variables can be declared by using the following keywords:varlet constVar keyword: Declaring a variable using the var keyword.var vari
4 min read
Identifiers and Keywords in TypeScriptIn TypeScript, identifiers are names used for variables, classes, or methods and must follow specific naming rules. Keywords are reserved words with predefined meanings and cannot be used as identifiers. Comments, both single-line and multi-line, enhance code readability and are ignored during code
2 min read
TypeScript primitive types
Data types in TypeScriptIn TypeScript, a data type defines the kind of values a variable can hold, ensuring type safety and enhancing code clarity.Primitive Types: Basic types like number, string, boolean, null, undefined, and symbol.Object Types: Complex structures including arrays, classes, interfaces, and functions.Prim
3 min read
TypeScript NumbersTypeScript Numbers refer to the numerical data type in TypeScript, encompassing integers and floating-point values. The Number class in TypeScript provides methods and properties for manipulating these values, allowing for precise arithmetic operations and formatting, enhancing JavaScript's native n
4 min read
TypeScript StringIn TypeScript, the string is sequence of char values and also considered as an object. It is a type of primitive data type that is used to store text data. The string values are used between single quotation marks or double quotation marks, and also array of characters works same as a string. TypeSc
4 min read
Explain the concept of null and its uses in TypeScriptNull refers to a value that is either empty or a value that doesn't exist. It's on purpose that there's no value here. TypeScript does not make a variable null by default. By default unassigned variables or variables which are declared without being initialized are 'undefined'. To make a variable nu
3 min read
TypeScript Object types
What are TypeScript Interfaces?TypeScript interfaces define the structure of objects by specifying property types and method signatures, ensuring consistent shapes and enhancing code clarity.Allow for optional and read-only properties for flexibility and immutability.Enable interface inheritance to create reusable and extendable
4 min read
TypeScript classA TypeScript class is a blueprint for creating objects, encapsulating properties (data) and methods (behavior) to promote organization, reusability, and readability.Supports inheritance, allowing one class to extend another and reuse functionality.Provides access modifiers (public, private, protecte
4 min read
How enums works in TypeScript ?In this article, we will try to understand all the facts which are associated with enums in TypeScript. TypeScript enum: TypeScript enums allow us to define or declare a set of named constants i.e. a collection of related values which could either be in the form of a string or number or any other da
4 min read
TypeScript TuplesIn JavaScript, arrays consist of values of the same type, but sometimes we need to store a collection of values of different types in a single variable. TypeScript offers tuples for this purpose. Tuples are similar to structures in C programming and can be passed as parameters in function calls.Tupl
3 min read
TypeScript other types
What is any type, and when to use it in TypeScript ?Any is a data type in TypeScript. Any type is used when we deal with third-party programs and expect any variable but we don't know the exact type of variable. Any data type is used because it helps in opt-in and opt-out of type checking during compilation. In this article, we will see what is any
3 min read
How to Create an Object in TypeScript?TypeScript object is a collection of key-value pairs, where keys are strings and values can be any data type. Objects in TypeScript can store various types, including primitives, arrays, and functions, providing a structured way to organize and manipulate data.Creating Objects in TypescriptNow, let
4 min read
What is an unknown type and when to use it in TypeScript ?In Typescript, any value can be assigned to unknown, but without a type assertion, unknown can't be assigned to anything but itself and any. Similarly, no operations on an unknown are allowed without first asserting or restricting it down to a more precise type. Â similar to any, we can assign any va
3 min read
Explain the purpose of never type in TypeScriptIn Typescript when we are certain that a particular situation will never happen, we use the never type. For example, suppose you construct a function that never returns or always throws an exception then we can use the never type on that function. Never is a new type in TypeScript that denotes value
3 min read
TypeScript combining types
TypeScript Assertions
TypeScript Functions
TypeScript interfaces and aliases
TypeScript classes
How to Extend an Interface from a class in TypeScript ?In this article, we will try to understand how we to extend an interface from a class in TypeScript with the help of certain coding examples. Let us first quickly understand how we can create a class as well as an interface in TypeScript using the following mentioned syntaxes: Syntax:Â This is the s
3 min read
How to Create an Object in TypeScript?TypeScript object is a collection of key-value pairs, where keys are strings and values can be any data type. Objects in TypeScript can store various types, including primitives, arrays, and functions, providing a structured way to organize and manipulate data.Creating Objects in TypescriptNow, let
4 min read
How to use getters/setters in TypeScript ?In TypeScript, getters and setters provide controlled access to class properties, enhancing encapsulation and flexibility.Getters allow you to retrieve the value of a property with controlled logic.Setters enable controlled assignment to properties, often including validation or transformations.Java
5 min read
TypeScript InheritanceInheritance is a fundamental concept in object-oriented programming (OOP). It allows one class to inherit properties and methods from another class. The class that inherits is called the child class, and the class whose properties and methods are inherited is called the parent class. Inheritance ena
3 min read
When to use interfaces and when to use classes in TypeScript ?TypeScript supports object-oriented programming features like classes and interfaces etc. classes are the skeletons for the object. it encapsulates the data which is used in objects. Interfaces are just like types for classes in TypeScript. It is used for type checking. It only contains the declarat
4 min read
Generics Interface in typescript"A major part of software engineering is building components that not only have well-defined and consistent APIs but are also reusable. " This sentence is in the official documentation we would start with. There are languages that are strong in static typing & others that are weak in dynamic typ
5 min read
How to use property decorators in TypeScript ?Decorators are a way of wrapping an existing piece of code with desired values and functionality to create a new modified version of it. Currently, it is supported only for a class and its components as mentioned below: Class itselfClass MethodClass PropertyObject Accessor ( Getter And Setter ) Of C
4 min read