Embedding Interfaces within Interfaces

I am faced with a TypeScript interface challenge:

interface SupplierSettings {
    id_supplier_settings?: number;
    is_auto_order: boolean;
    order_cron: string;
    email: string;
    get_next_run_date?: string;
    dont_wait_for_mail_response: boolean;
}

In the second interface, I need to include fields from SupplierSettings, and it should appear as follows:

interface AssignManufacturerToSupplier {
    upsertSupplierSettings: {

        // fields from SupplierSettings 
        id_supplier_settings?: number;
        is_auto_order: boolean;
        order_cron: string;
        email: string;
        get_next_run_date?: string;
        dont_wait_for_mail_response: boolean;
        // end of fields from SupplierSettings 

        suppliers: {
            connect: number;
        }
    };
    assignManufacturerToSupplier: {
        id_product_supplier: string;
        manufacturers: {
            delete?: [number];
            connect?: [number];
        }
    };
}

How can I achieve this?

I attempted the following solution:

interface AssignManufacturerToSupplier {
    upsertSupplierSettings: {
        SupplierSettings;
        suppliers: {
            connect: number;
        }
    };
    assignManufacturerToSupplier: {
        id_product_supplier: string;
        manufacturers: {
            delete?: [number];
            connect?: [number];
        }
    };
}

Unfortunately, my attempted solution did not work as expected.

Answer №1

Here is the solution to your query

interface UpdateSupplierSettings extends SupplierSettings {
  suppliers: {
     link: string;
  }
 }


interface SupplierSettings {
  id_supplier_settings?: number;
  is_auto_order: boolean;
  order_cron: string;
  email: string;
  get_next_run_date?: string;
  dont_wait_for_mail_response: boolean;
}

interface LinkManufacturerToSupplier {
  updateSupplierSettings: UpdateSupplierSettings,
  assignManufacturerToSupplier: {
     id_product_supplier: string;
     manufacturers: {
       remove?: [number];
       add?: [number];
     }
   };
}

To achieve your goal, you need to enhance the interface for immediate application

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

Exploring Angular 8 HTTP Observables within the ngOnInit Lifecycle Hook

Currently, I am still a beginner in Angular and learning Angular 8. I am in the process of creating a simple API communication service to retrieve the necessary data for display. Within my main component, there is a sub-component that also needs to fetch ...

Typescript's Confusion with Array Types: Understanding Conditional Types

Here is the setup I have. The concept is to receive a generic and options shape, deduce the necessary options based on the generic and the type key of the options shape, and appropriately restrict the options. type OptionProp<T extends string | boolean& ...

Tidying up following the execution of an asynchronous function in useEffect

Recently, I've been facing a challenge while migrating a React project to TypeScript. Specifically, I'm having trouble with typing out a particular function and its corresponding useEffect. My understanding is that the registerListener function s ...

Error: Attempting to initiate a backward navigation action while already in the process. Utilizing Natiescript

I encountered an issue with the routing code in my Nativescript app. Here is the code snippet: const routes: Routes = [ { path: 'home', component: HomeComponent, canActivate: [AuthGuard], children: [ {path: 'fp&apos ...

Having trouble entering text into a React input field

Encountering a puzzling issue with a simple form featuring an input field that inexplicably won't respond to keyboard typing. Initially, suspicions pointed towards potential conflicts with the onChange or value props causing the input to be read-only. ...

Why do I keep encountering the error "global is not defined" when using Angular with amazon-cognito-identity-js?

To start, run these commands in the command line: ng new sandbox cd .\sandbox\ ng serve Now, navigate to http://localhost:4200/. The application should be up and running. npm install --save amazon-cognito-identity-js In the file \src&bso ...

Unable to access passed parameters from deep links in React Navigation V6

I'm currently working on setting up a simple linking logic to open an app via an invitation link. The link format would be something like this: [scheme]://auth/[invitaion-code] To achieve this, I have set up the following linking object to pass to th ...

Can child components forward specific events to their parent component?

I created a basic component that triggers events whenever a button is clicked. InnerComponent.vue <template> <v-btn @click="emit('something-happened')">Click me</v-btn> </template> <script setup lang=" ...

Utilize a service injected through dependency injection within a static constant defined within the component itself

Using Angular, I am trying to utilize a service that has been injected through dependency injection as a value for a static variable. Here is the scenario: Starting with the constructor where the Helper Service is injected: constructor(private _helper ...

What is the best way to dynamically adjust the width of multiple divisions in Angular?

I am currently working on an angular project to create a sorting visualizer. My goal is to generate a visual representation of an array consisting of random numbers displayed as bars using divisions. Each bar's width will correspond to the value of th ...

Issue: Module '@nrwl/workspace/src/utilities/perf-logging' not found

I attempted to run an Angular project using nxMonorepo and made sure to install all the necessary node modules. However, when I tried running the command "nx migrate --run-migrations" in my directory PS C:\Users\Dell\Desktop\MEANAPP&bso ...

Encountering a Typescript error while attempting to iterate through Enum keys for generating JSX components

I'm really struggling with this problem. Here's a simple enum I have: export enum depositTypes { ACH = 42, Wire = 36, Check = 3, Credit = 2, } I'm trying to create option tags for a select element, like so: Object.keys(depositTyp ...

Adjusting the audio length in React/Typescript: A simple guide

I'm currently developing a web app with React and TypeScript. One of the components I created is called SoundEffect, which plays an mp3 file based on the type of sound passed as a prop. interface ISoundEffectProps { soundType: string, // durat ...

Angular trailing zero problem

There is a function that returns a number. Within this function, a string '1.10' is present, which is then converted to a number using the Number method. The output obtained is 1.1, but the desired output is 1.10. I have tried using methods lik ...

Enhance React components in Deck.GL by including default properties for each child component

I am currently working on a customizable collection of map layers using Deck.GL & React. I have developed a BaseMap component through which I will be passing data layers as react children. This is the current implementation: BaseMap: export const BaseMap ...

TypeScript's type casting will fail if one mandatory interface property is missing while an additional property is present

While running tsc locally on an example file named example.ts, I encountered some unexpected behavior. In particular, when I created the object onePropMissing and omitted the property c which is not optional according to the interface definition, I did not ...

Angular 6: Exploring the Challenges of Extending Services Without Sacrificing the Functionality of ChildService

As I was developing multiple angular REST-services for my frontend, I came up with the idea of creating a base class BaseRestService to handle common functionalities like headers and helper functions. However, I encountered TypeErrors when trying to call ...

React: Resolving the issue of "children" property not found in type "IntrinsicAttributes & Props"

Currently, I am attempting to retrieve data from an API and showcase it in a list of cards using React with TypeScript. As I am relatively new to working with React in Typescript, I am uncertain about how to resolve this error or if I have overlooked somet ...

Determine the implicit type of the assigned function, while also constraining the return type to be a subtype of a predefined

When writing multiple functions for server requests, I have encountered a dilemma with TypeScript. Each function must return a type that extends a specific predefined known type, but I also want TypeScript to infer the most accurate return type possible. ...

Get rid of the strange border on the material dialog

I am struggling with the Angular material 6 dialog component as it is displaying a strange border. I have attempted to remove it using the code below, without success. Interestingly, when I apply the style inline in the browser, it works fine. Any suggesti ...