What strategies can I utilize to recycle the properties of my model type?

My API call returns a response in the following format:

export interface UserResponse {
    id: string;
    is_admin: boolean;
    last_name: string;
    phone: string;
    ...

    salary: number;
}

After that, I use the datePipe transform method to convert my date into a different format, which results in a string.

For example:

 this.users[0].salary = this.currencyPipe.transform(this.users[i].salary, 'USD', 'symbol', '1.0-0');

Now, my salary is no longer a number but a string.

So, I created another model for users with salaries as strings instead of numbers -

with salary string but not number.

export interface User {
    id: string;
    is_admin: boolean;
    last_name: string;
    phone: string;
    ...

    salary: string;
}

However, there are many repeated properties such as id, is_admin, etc.

How can I reuse them?

For instance, I'll create a third interface:

export interface UserBase {
    id: string;
    is_admin: boolean;
    last_name: string;
    phone: string;
}

Now, how can I insert all properties from UserBase into User and UserResponse?

export interface User {
}

Answer №1

One way to accomplish this is through the use of inheritance

export interface Employee extends UserBase {
    salary: 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

Navigating to the next page on a dynamic component in Angular 5 by

I'm uncertain if this scenario is feasible, but I have a page that fetches a list of items from an external API. There are currently 5 elements on the page, each acting as a link to its individual dynamically generated page through query strings. For ...

When utilizing DomSanitizer, Angular2 suddenly ceases to function properly

I've been working with Angular 2 and TypeScript. Everything was going well until I encountered an issue with my pipe, which is causing the DomSanitizer to interfere with the (click) event functionality. Even though the (click) code appears intact in ...

Mismatched non-intersecting categories with TypeScript

I have an object that I need to conditionally render some JSX based on certain properties. I want to restrict access to specific parts of the object until certain conditions are met. Here is my scenario: const { alpha, bravo } = myObject; if (alpha.loadin ...

Sorting the table in Angular Material is proving to be a challenge

I'm attempting to organize data within an Angular table by utilizing the MatSortModule. Unfortunately, the sorted table is not functioning correctly. Below is the provided code: main.module.ts import { MatTableModule, MatSortModule } from '@ang ...

Creating a TypeScript function that utilizes generics to automatically infer the return type

How can I create a function with a generic argument that can return any type, and have the return type inferred from its usage? I attempted the following code: type Thing<T> = <U>(value: T) => U const shouldMakeStrings: Thing<string> ...

Is there a way to toggle or collapse a table row with a unique identifier using Angular and Bootstrap?

Currently handling Angular and Bootstrap in my work, but facing challenges with table manipulation and collapsing rows. I fetch data from a database and showcase it in a dynamically generated table using *ngFor and two rows within an ng-container. My goal ...

What is the best way to utilize TypeScript module augmentation with material-ui components?

I have gone through the answers provided in this source and also here in this link, but it appears that they are outdated. I attempted to enhance the type definition for the button component in various ways, including a separate typings file (.d.ts) as we ...

Having trouble with the interaction between Angular v16 Standalone component and Interceptor?

MoneyComponent from Angular version 16 functions as a standalone component. The application's structure can be found in src\app\pages\money. Only the page moneyForms requires an interceptor to add extra information when making an API H ...

Angular successfully compiled without any issues despite the explicit cast of a number into a string variable

As I delve into the initial concepts of Angular, I have come across a puzzling situation. Here is the code snippet: import { Component } from '@angular/core'; @Component({ selector: 'sandbox', template: ` <h1>Hello {{ nam ...

The process of transitioning to a different view through a button press

How can I switch to another view by clicking a button in Aurelia? Here is my code: <button class="btn btn-success " click.delegate="save()">New item</button> Typescript configureRouter(config: RouterConfiguration, router: ...

The custom class-validator decorator in NestJS fails to retrieve the value from the parameter

In my Nestjs project, I have created a Custom ValidatorConstraint using class-validator. The purpose is to create my own decorator and apply it later on DTO classes for validations. Let's consider this route: foo/:client After a request is made, I w ...

Getting a JSON value and saving it to a variable in Angular 4

Here is the JSON structure: { "Semester": [ { "queueName": "Science", "totalCount": 300, "unassignedCount": 10, "subjectDetails": [ { "subjectName": "Chemistry", "sectionOne": 100, "secti ...

Struggling to pass a method header to event handling in React markup

Within my render() method, I have a component with event handling capabilities. render() { ... <input type="text" onChange={(_) => { this.renew("email", _.target.value); }} /> } private renew(type: string, input: any) { ... if (typ ...

What is the most effective way to transmit a conditional operator via a TypeScript boolean field?

Currently, as part of my transition to typescript, I am working on incorporating a conditional operator into the table component provided by Ant Design. const paginationLogic = props.data.length <= 10 ? false : true return ( <> ...

Efficiently transforming a nested object array into a single dynamic array

// I have a collection of various objects _id: "5e5d00337c5e6a0444d00304" orderID: 10355 orderDate: "2020-03-02" user: _id: "5e2e9699a648c53154f41025" name: "xyz1" email: "<a href="/cdn-cgi/l/email-protection" class="_ ...

Angular routing does not properly update to the child's path

I've organized my project's file structure as follows: app/ (contains all automatically built files) app-routing.module.ts components/ layout/ top/ side/ banner/ pages/ ...

Discovering the type in Typescript by specifying a function parameter to an Interface

Consider this sample interface: interface MyInterface { x: AnotherThing; y: AnotherThingElse; } Suppose we make the following call: const obj: MyInterface = { x: {...}, y: {...}, } const fetchValue = (property: keyof MyInterface) => { ...

Ways to retrieve a value from a span using the Document Object Model

sample.html <span id='char'>{{value}}</span> sample.ts console.log((<HTMLInputElement>document.getElementById('char'))) This code snippet will display <span id='char'>ThisIsTheValueupdated</sp ...

Angular2 - Utilizing Library components with individual template and style files

Working on a third-party module with a single Component, I am currently struggling with managing the inline template and style rules within the @Component annotation. Separating the code into separate files (.component.html) causes the template to 404 when ...

The component 'ProtectRoute' cannot be utilized within JSX

While using typescript with nextjs, I encountered an issue as illustrated in the image. When I try to use a component as a JSX element, typescript displays the message: ProtectRoute' cannot be used as a JSX component. import { PropsWithChildren } from ...