Implementing a custom overwrite function in TypeScript's inheritance

Below is a class that I have:

  export class RestService {

  private baseUrl: string;

  constructor(protected http: HttpClient) {
    this.baseUrl = environment.LOCAL_URL;
  }

  public get<T>(resource: string, params?: HttpParams): Observable<T> {
    const url = this.PrepareUrl(resource);
    return this.http.get<T>(url, { params }).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  public post<T>(resource: string, model: any): Observable<T> {
    const url = this.PrepareUrl(resource);
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post<T>(url, model, { headers }).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  public put<T>(resource: string, model: any): Observable<T> {
    const url = this.PrepareUrl(resource);
    return this.http.put<T>(url, model).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  public delete(resource: string, id: any): Observable<any> {
    const url = this.PrepareUrl(resource) + `\\${id}`;
    return this.http.delete(url).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  protected PrepareUrl(resource: string): string {
    return `${this.baseUrl}/${resource}`;
  }

  protected catchBadResponse(error: HttpErrorResponse) {
    console.log('error occured!');
    return throwError(error);
  }
}

In addition, there is another class that extends the RestService class:

export class PersonRestService extends RestService {

  constructor(protected http: HttpClient) {
    super(http);

  }
  public get<T>(params?: HttpParams): Observable<T> {
    return super.get<T>('person', params);
  }

  public post<T>(model: any): Observable<T> {
    return super.post('person', model);
  }
}

I am looking to override some functions in the child class, however, my IDE shows an error message:

Property 'get' in type 'PersonRestService' is not assignable to the same property in base type 'RestService'. Type '(params?: HttpParams) => Observable' is not assignable to type '(resource: string, params?: HttpParams) => Observable'. Types of parameters 'params' and 'resource' are incompatible. Type 'string' is not assignable to type 'HttpParams'.ts(2416)

What steps should I take to resolve this issue?

Answer №1

It appears that you've encountered the mentioned issue.

Here are two options to address it:

  1. Adjust your signature to match exactly:

    public get(resource: string, params?: HttpParams): Observable { return super.get('person', params); }

Alternatively, consider changing the order and making it optional:

public get<T>(params?: HttpParams, resource: string = ''): Observable<T> {
    return super.get<T>(params,'person');  
  }
  1. Eliminate the generic from the PersonRestService class.

The latter option seems more logical. Since you already know the resource is a Person, you can modify it like this:

  public getPerson(params?: HttpParams): Observable<object> {
    return super.get<object>(params,'person');  
  }

Answer №2

when working with TypeScript, it's important to note that methods cannot be overwritten completely; this can pose a challenge when dealing with legacy methods. As the saying goes, "Favor Composition Over Inheritance," I decided to modify the code snippets as follows:

1-Do not alter the RestService class:

export class RestService {

  private baseUrl: string;

  constructor(protected http: HttpClient) {
    this.baseUrl = environment.LOCAL_URL;
  }

  public get<T>(resource: string, params?: HttpParams): Observable<T> {
    const url = this.PrepareUrl(resource);
    return this.http.get<T>(url, { params }).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  public post<T>(resource: string, model: any): Observable<T> {
    const url = this.PrepareUrl(resource);
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post<T>(url, model, { headers }).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  public put<T>(resource: string, model: any): Observable<T> {
    const url = this.PrepareUrl(resource);
    return this.http.put<T>(url, model).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  public delete(resource: string, id: any): Observable<any> {
    const url = this.PrepareUrl(resource) + `\\${id}`;
    return this.http.delete(url).pipe(
      retry(2),
      catchError(this.catchBadResponse)
    );
  }

  protected PrepareUrl(resource: string): string {
    return `${this.baseUrl}/${resource}`;
  }

  protected catchBadResponse(error: HttpErrorResponse) {
    console.log('error occurred!');
    return throwError(error);
  }
}

2-Do not inherit from RestService in PersonRestService; instead, inject RestService into the constructor:

export class PersonRestService {

  constructor(private restService: RestService) {
  }
  public get<T>(params?: HttpParams): Observable<T> {
    return this.restService.get<T>('person', params);
  }
}

There you have it! With these modifications, I am ready to dive into the code.

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

ES5 enables the extension of classes in React

This ES6 syntax works fine for me: import {Component} from 'react'; class A extends Component {} class B extends A { // I can redeclare some methods here } But how would one implement this using ES5? Like so: var React = require('reac ...

Master the art of properly switching on reducer-style payloads in Typescript

Currently, I am dealing with two types of data: GenArtWorkerMsg and VehicleWorkerMsg. Despite having a unique type property on the payload, my Searcher is unable to differentiate between these data-sets when passed in. How can I make it understand and dis ...

The map component does not render when the agm-map is placed within the component

Objective I am attempting to encapsulate an <agm-map> within my custom <app-map> component, but it is not appearing in the HTML output. https://i.sstatic.net/7rXeE.png The agm (angular google maps) library is properly configured and the map ...

Mastering the art of Promises and handling errors

I've been tasked with developing a WebApp using Angular, but I'm facing a challenge as the project involves Typescript and asynchronous programming, which are new to me. The prototype already exists, and it includes a handshake process that consi ...

Retrieve the structure from a React application

When it comes to documenting architecture, the process can be incredibly beneficial but also quite time-consuming and prone to becoming outdated quickly. I have come across tools like Doxygen that are able to extract architectural details such as dependen ...

How can I retrieve the Azure subscription IDs of the currently logged in user using @azure/msal-angular?

I successfully authenticated a user using @azure/msal-angular and received the id_Token, access_Token and tenant Id. Now I am looking to retrieve the logged in user's azure subscriptions. Is there a way to achieve this through msal or are there any Ja ...

What is the best way to integrate Emotion styled components with TypeScript in a React project?

Currently, I am delving into TypeScript and attempting to convert a small project that utilizes Emotion to TypeScript. I have hit a roadblock at this juncture. The code snippet below export const Title = styled.div(props => ({ fontSize: "20px", ...

When using Vue.js, you may encounter an error message stating that the `document.title` type of 'undefined' cannot be assigned to type 'string' in Typescript

I'm trying to use beforeEnter with Vue Router, but I encountered an error: TS2322: Type 'string | symbol | null | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string&apo ...

The TypeScript compiler does not make assumptions about variable types within an if statement

I'm currently tackling the challenge named 'Merge Two Binary Tree' on leetcode with TypeScript. My solution is passing the tests successfully, but the compiler is throwing an error that says: What's puzzling me is that I believe I&apos ...

What is the method for retrieving the currently selected value in a MultiColumnComboBox within Kendo for Angular?

Check out this live example created by the official Telerik team: I need to extract the id (referenced in contacts.ts) of the currently selected employee when clicking on them. How can I access this information to use in another function? ...

Enumerated types in Typescript: access the values

Below is a flagged enum I have: enum PermissionEnum { SU = 1 << 0, // 1 Administrator = 1 << 1, // 2 User = 1 << 2 // 4 } If the value given is 6, how can I achieve: An array of strings -> ['Adm ...

What is the process for retrieving the serial number of a hardware device in Ionic 2?

I recently encountered an issue while trying to retrieve device details. I was able to fetch the UUID of the hardware device, but unfortunately, the serial number was inaccessible. Any suggestions or insights on how to obtain the serial number would be g ...

FilterService of PrimeNg

Looking for assistance with customizing a property of the p-columnFilter component. I have managed to modify the filter modes and customize the names, but I am having trouble with the no-filter option. Has anyone found a solution for this? this.matchMo ...

Dynamic Cell Class Assignment in Ag Grid

My Div's dimensions can change based on user interaction, with the div containing an ag-grid component. Initially, the div/grid loads in a compressed size, so I've applied specific classes (like small font-size, height, padding, etc.) to eliminat ...

Ways to turn off specific ngtsc warnings

Ever since updating my Angular app to version 15, I've been noticing some warnings popping up in both the terminal and Chrome DevTools. Is there a way to turn off or disable these warnings? I keep seeing this warning message about the optional chain o ...

Testing a React component that uses useParams: A step-by-step guide

I've been working on creating a BBS App using TypeScript, React, React Router, and React Testing Library. However, I've encountered an issue where a component utilizing useParams is not passing a test. Interestingly, it seems to be working correc ...

When utilizing TypeScript, is it possible to indicate a different type for a null argument when calling a function?

I was intrigued by the behavior in TypeScript where line A compiles successfully while line B does not. function someFunction<T>(arg: T): void { console.log(arg) } someFunction<string>('some string') // this works fine someFunction ...

An issue with TypeORM syntax causing errors within a NestJS migration file

I recently encountered an issue while setting up PostgreSQL with NestJS and TypeORM on Heroku. Despite successfully running a migration, my application kept crashing. I attempted various troubleshooting methods by scouring through blogs, GitHub issues, and ...

Sending data to a React component from regular HTML

I have a question about implementing a method to pass custom attributes from HTML elements as props to React components. Here's an example: function someFunction(props) { return <h1>props.something</h1> } HTML: <div id="someEl ...

Can an @Input value be transmitted to the app.component in Angular 2?

As I work on my Angular 2 app using ASP.Net for rendering, I find myself facing a challenge when trying to pass initialization data from RAZOR into my bootstrapped component. Despite setting up the _Layout.cshtml as the only RAZOR page, the data transfer d ...