Ways to retrieve unique attributes from a merged collection of two distinct object arrays?

Exploring object Arrays in TypeScript.

const objArr1: { commonProperty: string; ABC: string }[] = [
    {
        commonProperty: "I am common",
        ABC: "I am different in object 1",
    },
    {
        commonProperty: "I am common",
        ABC: "I am different in object 1",
    },
]

const objArr2: { commonProperty: string; XYZ: string }[] = [
    {
        commonProperty: "I am common",
        XYZ: "I am different in object 2",
    },
    {
        commonProperty: "I am common",
        XYZ: "I am different in object 2",
    },
]

Attempting to access unique properties in the combined array,

[...objArr1, ...objArr2].forEach(obj => {
    obj.commonProperty // No issue
    obj.ABC // TypeScript raises error
    obj.XYZ // Another TypeScript error
})

Encountering trouble as XYZ does not exist on elements of objArr1, and ABC on elements of objArr2. Seeking suggestions for a workaround without resorting to type assertions or using the any keyword.

typescript

Answer №1

If you're looking to achieve a similar result, consider using the following code snippet:

if ('ABC' in myObject) myObject.ABC
if ('XYZ' in myObject) myObject.XYZ

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enforcing foreign key constraints during the creation of a Prisma model

I've implemented a createUser function in my user.server.ts file: export async function createUser(username: User["username"], email: User["email"], password: string) { const hashedPassword = await bcrypt.hash(password, 10) const user = await pri ...

typescriptdatabaseormprisma

D3 version 4 with Typescript - How "this" is used in the context of d3.drag().on("end", this.dragended)

Currently, I am utilizing the D3 library for moving an element within a Venn diagram. Upon releasing the item after dragging, I aim to determine its position within the diagram. item.call(d3.drag() .on("start", this.dragstarted) .on("drag", this.d ...

typescriptd3.js

How to retrieve values from multiple mat-sliders that are dynamically generated using ngFor loop

Creating multiple mat-sliders dynamically in Angular looks like this: <ng-container *ngFor="let parameter of parameterValues; let i = index;"> <mat-slider (input)="onInputChange($event)" min="1" max="{{ parameter.length }}" step="1" value="1" i ...

angulartypescriptsliderngformat-slider

Encountering a Typescript error when trying to invoke a redux action

I have created a redux action to show an alert message export const showAlertConfirm = (msg) => (dispatch) => { dispatch({ type: SHOW_ALERT_CONFIRM, payload: { title: msg.title, body: msg.body, ...

javascriptreactjstypescript

When utilizing custom ngDoBootstrap and createCustomElement in Angular, the router fails to recognize the URL being used

WHEN I implement a custom ngDoBootstrap function instead of the default bootstrap: [AppComponent] like shown below: @NgModule({ imports: [ BrowserModule, FormsModule, AppRoutingModule ], declarations: [ AppComponent, HelloComponent ], exports: ...

angulartypescriptangular8angular-routercustom-element

Preserving type information while dynamically adding functions to an object

Within my functions.ts file, I have defined 2 functions. Each of these functions accepts an api object and returns a function with varying argument types, numbers, and return types. export function f1 (api: Api) { return function (a: number): number[] { ...

typescripttypes

Tips for efficiently calling a function without the need to check if it exists beforehand

I'm looking for a way to access the formik props outside of the form without constantly checking if a function exists before calling it when using refs. Any suggestions on how to achieve this? function BasicInfo({ event, initialValues, onSubmi ...

javascriptreactjstypescriptformikdestructuring

Dealing with a missing item in local storage in an Angular application

When working with local storage, I have a function that saves certain values and another method that reloads these values. However, what is the best approach to handle missing items in the local storage? This could happen if a user deletes an item or if it ...

angulartypescriptlocal-storagestoragelocal

Extracting data from a JSON object using Angular 2

I need advice on the most efficient way to handle JSON within my angular2 application. The JSON data I am working with includes: { "rightUpperLogoId": { "id": 100000, "value": "" }, "navbarBackgroundColorIdCss": { "id" ...

jsonserializationtypescriptangular

The mysterious appearance of the <v-*> custom element in Vuetify Jest

Currently, I am in the process of writing unit tests for my project using Jest. The project itself is built on Vue, Vuetify (1.5), TypeScript, and vue-property-decorator. One particular area of focus for me has been creating a basic wrapper for the <v- ...

typescriptvue.jsjestjsvuetify.jsts-jest

When it comes to Typescript interfaces, subsequent fields are not overloaded or merged

So I've been exploring interfaces in TypeScript and their ability to merge different types, but I ran into a hiccup while transpiling my script. Here's where things went wrong in my interface: export interface StoreConfig extends Document, TimeS ...

typescriptmongoosemongoose-models

challenges with template inheritance: when one template takes precedence over another

I have encountered an issue with my two HTML templates, login.html and signup.html. Both of these files inherit from the base.html file, but there seems to be a problem where one file is overriding the title and content of the other. So when I visit /login ...

javascripttypescripttemplatesgo-templates

Running pre-commit eslint autofix but encountering errors that do not exist

Encountering an issue with committing changes to a file due to a failed pre-commit eslint --fix task, displaying the following errors: × eslint --fix: C:\Users\user\source\repos\project\project-frontend\src\compone ...

reactjstypescriptgitwebpackeslint

Retrieving an Enum member based on its value in TypeScript

I am working with an enum called ABC: enum ABC { A = 'a', B = 'b', C = 'c', } In addition, I have a method named doSomething: doSomething(enum: ABC) { switch(enum) { case A : console.log(A); break; case ...

javascripttypescriptenums

Struggling to comprehend the intricacies of these generic declarations, particularly when it comes to Type Argument Lists

I'm currently reviewing the code snippet from the TypeScript definitions of fastify. I am struggling to understand these definitions. Although I am familiar with angle brackets used for generics, most TypeScript tutorials focus on simple types like Ar ...

typescript

Issue with interface result: does not match type

Hey there! I've been working on creating an interface in TypeScript to achieve the desired return as shown below: { "field": "departament_name", "errors": [ "constraint": "O nome do departam ...

typescript

Issue with Angular UI Bootstrap accordion heading behavior when used in conjunction with a checkbox is causing

I have implemented a checkbox in the header of an accordion control using Bootstrap. However, I am facing an issue where the model only updates the first time the checkbox is clicked. Below is the HTML code for the accordion: <accordion ng-repeat="tim ...

angularjscheckboxtypescriptaccordionangular-ui

Developing personalized middleware definition in TypeScript for Express

I have been struggling to define custom middleware for our application. I am using [email protected] and [email protected]. Most examples of typing middleware do not involve adding anything to the req or res arguments, but in our case, we need to modify ...

node.jstypescriptexpress

Switch the visibility of all local variables in *ngFor from an external loop

Imagine having an *ngFor loop where a local variable is defined like this: <div *ngFor="let item of items"> <p>{{item.name}}</p> <div *ngIf="item.colorVisible">{{item.color}}</div> <button (click)="item.colorVisible ...

arraysangulartypescriptngforangular-ng-if

Guide to Generating Toggle Buttons with For Loops in Angular 4/6

In my latest project, I have successfully implemented a demo with three buttons dynamically generated using a for loop on the backend response. Each button is clickable and toggles between active and inactive states upon click. However, I am seeking advic ...

angulartypescriptbutton