Knowing how to push an object to an array in Typescript will be very useful for you when you are working with an object array, like working with data from another web. So how to do it? – Let’s go into detail
Push an object to an array in Typescript
Use push method
The push method will help you add a new element to the end of your array. The push method will return the new length of your array after pushing new elements.
Syntax:
array.push(element1, element2, …, elementN)
Parameters:
- element1, element2, …, elementN: All elements you want to add to your array. At least one element is required.
Example:
const animalList: string[] = [
"African Elephant",
"African Lions",
"American Oystercatcher Bird",
"Axolotl",
];
console.log(animalList.length);
// Push element to object array
const newLength: number = animalList.push("Australian Dingo", "Bengal Tigers");
console.log(animalList);
console.log(newLength);Output
[LOG]: 4
[LOG]: ["African Elephant", "African Lions", "American Oystercatcher Bird", "Axolotl", "Australian Dingo", "Bengal Tigers"]
[LOG]: 6As you see, my origin array has four elements, and after pushing two string elements, the array will be changed, and the array length will become 6.
Some example with push method
You can also apply this way to push an object to an array, but remember to specify the correct type for your array element.
Example:
// Create an object array
const objArray: object[] = [
{ name: "Tommy", age: 20, country: "Australia" },
{ name: "Exo", age: 18, country: "Belgium" },
{
country1: "Vietnam",
country2: "United Kingdom",
country3: "United States",
},
];
console.log(objArray.length);
// Push element to object array
const arrayNewLength = objArray.push({
country4: "Turkey",
country5: "Romania",
country6: "Mexico",
});
console.log(objArray);
console.log(arrayNewLength);Output:
[LOG]: 3
[LOG]: [{ "name": "Tommy", "age": 20, "country": "Australia" }, { "name": "Exo", "age": 18, "country": "Belgium" }, { "country1": "Vietnam", "country2": "United Kingdom", "country3": "United States" }, { "country4": "Turkey", "country5": "Romania", "country6": "Mexico" }]
[LOG]: 4If you want to specify clearly what type of object can push into the object array, you can create a new object type and then set that type to your array.
Example:
type infor = {
name: string;
age: number;
};
const inforArray: infor[] = [{ name: "Mona", age: 29 }];
inforArray.push({ name: "Oma", age: 37 });
console.log(inforArray);Output:
[LOG]: [{ "name": "Mona", "age": 29 }, { "name": "Oma", "age": 37}]Here I create a new infor type and then set it to inforArray. It means from now inforArray can only contain the infor object type. If I try to pass in not the correct infor object but some other object.
Example:
type infor = {
name: string;
age: number;
};
const inforArray: infor[] = [{ name: "Mona", age: 29 }];
inforArray.push({ greeting: "Hello From Learn Share IT" });I will get the error:
Argument of type' { greeting: string; }' is not assignable to parameter of type 'infor'. Object literal may only specify known properties, and 'greeting' does not exist in type 'infor'.Summary
In this article, I showed you how to push an object to an array in Typescript. You can use the push method to do it. I also showed you some ways to work with; the common situation will get your code to error. Hope it is useful to you.
Maybe you are interested:
- Sort an Array of Strings in Descending order in TypeScript
- Declare a Two-dimensional Array in TypeScript
- Remove Null values from an Array in TypeScript
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm