Navigate back to the homepage

How to add new property to object in typescript?

Infinitbility
TypeScript
February 28th, 2022 · 1 min read
keep affilitate

Hello Friends 👋,

Welcome To Infinitbility! ❤️

To transfer data from one file to another, or project to another we used JSON i.e we need many times to add data in JSON objects statically, and dynamically.

Today, we will see how to add elements to an object and also how many ways to do that in typescript with example.

let’s start with when we create a new object.

Create an object with key-value pair

When we create a new object we mainly use {} curly brace to create and when we want to create an object with value. we follow the below code.

1interface User {
2 id: number;
3 name: string;
4 domain?: string;
5 age?: number;
6 isActive?: boolean;
7}
8
9let user: User = {
10 id: 1,
11 name: "infinitbility",
12};

Add element in already created object statically

let’s assume we already created the object now we want to add more elements to it then we will follow the below code.

1interface User {
2 id: number;
3 name: string;
4 domain?: string;
5 age?: number;
6 isActive?: boolean;
7}
8
9let user: User = {
10 id: 1,
11 name: "infinitbility",
12};
13
14
15// Add element using key
16user.domain = "infinitbility.com";
17console.log("user", user);

Add element in already created object dynamically

Now, many times we have to add elements in already create objects dynamically, for dynamic we have the option below code example.

1interface User {
2 id: number;
3 name: string;
4 domain?: string;
5 age?: number;
6 isActive?: boolean;
7}
8
9let user: User = {
10 id: 1,
11 name: "infinitbility",
12};
13
14// Add element for dynamic key
15user["isActive"] = true;
16console.log("user", user);

Output

TypeScript, add, element, object, example
TypeScript, add key-value pair in json object example.

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

melio affilitate

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

how to find the index of an object in an array in typescript?

TypeScript, find index of object in array example.

February 27th, 2022 · 1 min read

How to get current date in react native?

React Native, get current date example.

February 14th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]