Expanding interfaces in TypeScript

Within an interface, I have a list of props that I would like to modify by extending the interface type in the following manner:

  1. Modification of Prop types

  2. Addition of new fields

     interface Request {
       Id: NullProp<number>,
       Name: NullProp<string>,
       Code: NullProp<string>,
       Type: NullProp<string>,
       ValueType: NullProp<string>
     .....
     ...
     }
    

    /* aiming for below structure */

         interface DataRequest extends Request {
           Id: number,
           Name: string,
           Code: string,
           Type: string,
           ValueType: string,
         .....
         ...,
           DataRequestId: number,
           DataRequestType: string
           DataValueType: NullProp<string>
         }
    

I have noticed that I can use 'Omit' on a derived interface, but this becomes cumbersome with a long list of props as I have many interfaces similar to this one that require extension. I am seeking advice on whether to create a separate new interface and duplicate the props, or if there is a way to extend the same interface in a simpler manner?


NullProp is a type for Q | null | undefined

Answer №1

If you want to remove the NullProp occurrences and place them in a separate type, you can do so by defining a new type:

type RemoveNullProp<T> = T extends NullProp<infer V> ? V : T;

type RequestWithoutNullProp = {
  [k in keyof Request]: RemoveNullProp<Request[k]>
}

Afterwards, you can add your additional properties by extending that type:

interface DataRequest extends RequestWithoutNullProp {
  DataRequestId: number;
  DataRequestType: string;
  DataValueType: NullProp<string>;
}

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

Error: The payload in action is not able to be iterated over

Currently, I am delving into the world of ngrx, but I seem to have hit a roadblock. I'm encountering an issue that I can't seem to fix on my own. If anyone out there has some insight and expertise to offer, please help me out. I keep running into ...

The function is not operational while executing addEventListener

I'm encountering some bugs in my Angular 1.5 project with TypeScript. I'm trying to retrieve the scrollTop value from the .uc-card element. public container = document.querySelector(".uc-card"); In my $onInit, I have: public $onInit() { this ...

Unable to connect information to list item

I'm struggling to figure out why I am unable to bind this data into the li element. When I check the console, I can see the data under calendar.Days and within that are the individual day values. Any assistance would be highly appreciated. Code @Comp ...

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually ...

Exploring the power of utilizing multiple classes with conditions in Angular 2+

Can you help me figure out how to use a condition for selecting multiple classes with [ngClass] in Angular? <td> <span [ngClass]="{ 'badge badge-success': server.type === 'PRODUCTION', 'ba ...

IntelliJ does not provide alerts for return type inconsistencies in TypeScript

During the development of our web application using react+typescript+spring boot with IntelliJ, everything seemed to be going smoothly until I came across an unexpected issue. Take a look at this code snippet example: export class TreeRefreshOutcome { } e ...

Retrieve unique elements from an array obtained from a web API using angular brackets

I've developed a web application using .NET Core 3.1 that interacts with a JSON API, returning data in the format shown below: [ { "partner": "Santander", "tradeDate": "2020-05-23T10:03:12", "isin": "DOL110", "type ...

Using Typescript and Azure Functions to send FormData containing a file using Axios

I'm currently facing an issue with my Azure Function that handles file uploads to the endpoint. I am attempting to repost the files to another endpoint microservice using Axios, but I keep getting an error stating "source.on is not a function" when tr ...

Cypress automation script fails to trigger Knockout computed subscription

Within my setup, I have implemented two textboxes and a span to display the result. Date: <input data-bind="value: dateValue"/> Number: <input data-bind="value: dateValue"/> Result : <span data-bind="text: calculatedValue">Result Should ...

Nest may struggle with resolving dependencies at times, but rest assured they are indeed present

I've encountered a strange issue. Nest is flagging a missing dependency in a service, but only when that service is Injected by multiple other services. cleaning.module.ts @Module({ imports: [ //Just a few repos ], providers: [ ServicesService, ...

Is there a way to end my session in nextAuth on NextJS 14?

Recently, I've started using Typscript with a NextJS14 project that utilizes NextAuth for authentication. While there weren't any errors in the JavaScript version of my code, I encountered an error when working with TypeScript. This is a snippet ...

Variations in key options based on specific situations

Is it possible to make certain keys required in Typescript depending on the circumstances? For instance interface IDog { name: string; weight: number; } class Retriever implements IDog { name = "Dug"; weight = 70; public updateAttribute(props ...

Can property overloading be achieved?

Can functions be overloaded in the same way properties can? I'm interested in overloading properties to have separate documentation for different types passed to them. Currently, both values are set to the same value but I need distinct JSDoc for dif ...

Error in TypeScript: Module 'stytch' and its corresponding type declarations could not be located. (Error code: ts(2307))

I'm currently developing a Next.js application and encountering an issue while attempting to import the 'stytch' module in TypeScript. The problem arises when TypeScript is unable to locate the module or its type declarations, resulting in t ...

Tips for implementing a reusable instance of a class in (SSR) React (comparable to a @Bean in Spring)

I am currently developing a new application using Next.js and React (Server Components) in TypeScript. In order to showcase and evaluate the app, I need to support two different data sources that provide identical data through separate APIs. My goal is to ...

Working with JSON data in AngularJS2's templates

Is there a way for me to process JSON from the template in a manner similar to the second code I provided? First code. This method works well when using .json and .map () @Component({ ..// template: `..// <li *ngFor="#user of users"> ...

Guide to correcting the file path of an external css within the public directory on Express framework

I am facing an issue with loading external CSS files and need some help to fix the path. Despite multiple attempts, I have been unsuccessful so far. Below is my category structure: https://i.stack.imgur.com/sLTcN.png Within the header.ejs file, this is h ...

VS Code is flagging TypeScript errors following the recent software update

After updating my VS Code, I started seeing TypeScript error messages like the following: ButtonUnstyled.types.d.ts: Module '"/components/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop&a ...

Getting exported members through Typescript Compiler API can be achieved by following these steps:

I am currently working on a project hosted at https://github.com/GooGee/Code-Builder This particular file is being loaded by the Typescript Compiler API: import * as fs from 'fs' Below is a snippet of my code: function getExportList(node: t ...

Steps for transitioning from a mapped type to a discriminated union

Forgive me if this question has already been posed. I made an effort to search for a solution, but it seems I may not be using the correct terms. The issue arises with this particular structure. It involves a simple mapped type: type Mapped = { squ ...