Combining objects within a TypeScript interface

In my typing file, I currently have the following structure:

interface A {
    anObject: {
        data: string;
    };
    someOtherData: boolean;
}

My goal is to update the interface so that anObject now includes both data and data2. The desired final form should look like this:

interface A {
    anObject: {
        data: string;
        data2: string;
    };
    someOtherData: boolean;
}

I attempted to make this change by modifying the original interface as follows, but it did not produce the expected result:

interface A {
    anObject: {
        data2: string;
    }
}

Instead of having both data and data2 in the anObject, only data2 was present. Is there a way to retain the original keys while updating the interface?

Answer №1

How about considering something along these lines:

orig.ts

export interface A {
    anObject: {
        data: string;
    };
    someOtherData: boolean;
}

extend.ts

import {A as _A} from './orig'

interface A extends _A {
  anObject: _A['anObject'] & {
    data2: string;
  }
}

You can rename the original A to _A during importing, then proceed to extend it by adding the new data2 property through intersection with the existing looked-up anObject property.

If you are open to having A as a type alias rather than an interface, you could go for this simpler approach:

extend.ts

import {A as _A} from './playground'

type A = _A & {
  anObject: {
    data2: string;
  }
}

In this case, you still change the name of the original type, but then directly intersect it with the additional part. Both methods will give you the desired type structure:

declare const a: A;
a.anObject.data.charAt(0); // valid
a.anObject.data2.charAt(0); // acceptable

Is this explanation useful to you?

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

Saving data from rowclicked event in ag-grid with Angular

My goal is to save the event data from the onRowClicked event in a Component member. This way, when the user clicks a button, the data can be deleted. However, I am facing an issue where the member variable becomes undefined when trying to access it in t ...

Errors are not displayed or validated when a FormControl is disabled in Angular 4

My FormControl is connected to an input element. <input matInput [formControl]="nameControl"> This setup looks like the following during initialization: this.nameControl = new FormControl({value: initValue, disabled: true}, [Validators.required, U ...

The data type 'void | Observable<any>' cannot be assigned to the type 'ObservableInput<any>'. Specifically, the type 'void' cannot be assigned to 'ObservableInput<any>'

I encountered an error in my visual studio code: Argument of type '(query: string) => void | Observable' is not assignable to parameter of type '(value: string, index: number) => ObservableInput'. Type 'void | Observable& ...

Conceal specific elements across various paths in Angular 5

Attempting to hide a component based on matching routes, it is currently working with one route but not with multiple routes. import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component({ select ...

Is there a way to sort the output of an observable in various different methods?

One interesting feature I have implemented is a TableData type observable that provides me with a collection of table rows and columns. The user has the option to select a set of columns from a dropdown menu (which corresponds to the rows) to be sorted in ...

How to properly display an Angular Template expression in an Angular HTML Component Template without any issues?

When writing documentation within an Angular App, is there a way to prevent code from executing and instead display it as regular text? {{ date | date :'short'}} Many sources suggest using a span element to achieve this: <span class="pun"&g ...

associating an enum with a specific key value using generics

Imagine having a basic enum enum MyEnum { a, b, c } Converting the enum into key-value pairs is straightforward: type A<V> = { [k in MyEnum]: V }; const testA: A<string> = { [MyEnum.a]: '', [MyEnum.b]: '', [My ...

When trying to run ionic serve, I encountered the following error: "[ERROR] ng has unexpectedly closed with an exit code of 127."

My attempt to launch an ionic app on my Mac has hit a roadblock. While running npm install for the dependencies, everything goes smoothly without any issues. However, when I try to run 'ionic serve' or 'ionic s', an error crops up: [ng] ...

What is the process for implementing a new control value accessor?

I have a directive that already implements the ControlValueAccessor interface (directive's selector is input[type=date]) and now I need another directive that also implements ControlValueAccessor with the selector input[type=date][datepicker] - let&ap ...

Attention Needed - Certain vulnerabilities necessitate manual review for resolution

npm audit === Security Report from npm audit === # You have 1 vulnerability that can be resolved by running `npm update terser-webpack-plugin --depth 3` Severity Issue ...

With each click on "add to cart," a duplicate of the component will appear

Can you help me achieve a functionality where every time I click on "addCart", a new instance of the same component (another Bets>Example Number</Bets> const newBet: React.FC = () => { const [getAddCart, setGetAddCart] = useState([ <Be ...

Even when using module.exports, NodeJS and MongoDB are still experiencing issues with variable definitions slipping away

Hello there, I'm currently facing an issue where I am trying to retrieve partner names from my MongoDB database and assign them to variables within a list. However, when I attempt to export this information, it seems to lose its definition. Can anyone ...

Facing an issue with displaying a component error in a mat-form-field in Angular 9

I am looking to develop a shared component for displaying errors in Angular Material. Here is my shared component pfa-share-error: <mat-error *ngIf="fieldErrors(fieldName).required && fieldErrors(fieldName)"> Required </mat-err ...

Encountering the issue: "Unable to establish validator property on string 'control'"

Has anyone encountered this error message before? TypeError: Cannot create property 'validator' on string 'control'" import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core'; import { CommonModule } from &ap ...

Issue arose when attempting to remove an item from an array within React

I have a handleAd function that adds new components to an array, and I also have a handleDelete function that is supposed to remove the selected element from the array. I am generating unique keys for each element to prevent deletion issues. Initially, th ...

Stop allowing the transmission of unfamiliar string constants, but still permit the transmission of adaptable strings

Consider the TypeScript code snippet below: const namesList = { john: 25, emma: 30, jacob: 35, } type NameType = keyof typeof namesList function getPersonAge< Name extends string, Result = Name extends NameType ? number ...

What is the best method for exporting types from a Vue3 component to the global scope?

I have two globally registered components ParentComponent and ChildComponent. The benefit of global registration is that these components are accessible throughout the entire app without needing to be imported into other components. However, when it comes ...

Creating a JSON schema for MongoDB using a TypeScript interface: a step-by-step guide

In order to enhance the quality of our data stored in MongoDB database, we have decided to implement JSON Schema validation. Since we are using typescript in our project and have interfaces for all our collections, I am seeking an efficient method to achie ...

What is the syntax for passing a generic type to an anonymous function in a TypeScript TSX file?

The issue lies with the function below, which is causing a failure within a .tsx file: export const enhanceComponent = <T>(Component: React.ComponentType<T>) => (props: any) => ( <customContext.Consumer> {addCustomData => ...

How should one handle the potential risks presented by literal types?

As I was translating a large JavaScript project into TypeScript, something caught my attention. Consider a module that looks like this: WinConstants.ts export = { "no_win":0, "win":1, "big_win":2, "mega_win":3 } I wanted to make it truly constan ...