An object resulting from the combination of two separate objects

Question

An object resulting from the combination of two separate objects

After reading a helpful solution on StackOverflow about merging properties of JavaScript objects dynamically, I learned how to utilize the spread operator in Typescript. However, one question still remains unanswered - what will be the type of the object created when two objects are concatenated? I attempted:

let merged: {o1: obj1, o2: obj2}

But unfortunately, I encountered an error stating

Property 'x' does not exist on type {o1: obj1, o2: obj2}

. Is there a method to specify the type of the resulting object after concatenation?

javascript typescript javascript-objects

Answer 1

Answer №1

To combine two different types and use it as the type of a merged object, you can create a union type.

type Employee = {
    name: string;
    id: number;
};

const employee: Employee = {
    name: 'Shivam',
    id: 1
};

type Address = {
    street: string;
    zip: number;
};

const address: Address = {
    street: 'Aundh, Pune',
    zip: 411007
}

type IUnionEmployee = Employee | Address;

const mergeDetails: IUnionEmployee = {
    ...employee,
    ...address
};

Check out the Playground Link for interactive testing: Click here

Answer 2

To combine two different types and use it as the type of a merged object, you can create a union type.

type Employee = {
    name: string;
    id: number;
};

const employee: Employee = {
    name: 'Shivam',
    id: 1
};

type Address = {
    street: string;
    zip: number;
};

const address: Address = {
    street: 'Aundh, Pune',
    zip: 411007
}

type IUnionEmployee = Employee | Address;

const mergeDetails: IUnionEmployee = {
    ...employee,
    ...address
};

Check out the Playground Link for interactive testing: Click here

An object resulting from the combination of two separate objects

Answer №1

Similar questions

remove a section from the main body

Is there a way to retrieve the Marker that is being dragged when the event handler has already been bound?

Determine the presence of an element using its selector and retrieve a true or false value using jQuery or JavaScript

There seems to be an issue with AppModule in your code. The error message states that it is not recognized as an NgModule and the problem

The issue of Angular 6 view failing to display accurate data upon page load

What is the best way to pass a variable between clusters in a Node.js application?

Troubleshooting a problem with dynamic options in Materialize select set

Show the advancement of a process as it runs in a pop-up window

Ways to track all requests completed in Nuxt 3

Create a small circle in the bottom left corner with a constrained size

Optimizing React components by efficiently updating props without triggering unnecessary renders

Navigating to a different directory using Node.js and ExpressJS route mapping

Showing a div element with the power of JavaScript

Parsley JS failing to validate

What is the best way to upload my React project to GitHub without adding the node modules directory?

How can a nullable variable be converted into an interface in TypeScript?

Test your word skills with the Jumbled Words Game. Receive an alert when

Use the asset module instead of the file-loader when adding additional loaders in the chain

There is an error appearing in my .ts code: [ts] The property 'name' is not found in type 'any[]'

What could be causing express to have trouble finding the ejs file in the views directory?