Function overriding in typescript

Question

I am trying to create a method in typescript

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})

export class HttpService {
    private options = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json'
        })
    };

    constructor(private httpClient: HttpClient) {
    }

    public post(url: string, body?: any): Observable<any> {
        let data = (body == null || body == undefined) ? null : JSON.stringify(body);
        return this.httpClient.post(url, data, this.options);
   }

    public post<T>(url: string, body?: any): Observable<T> {
        let data = (body == null || body == undefined) ? null : JSON.stringify(body);
        return this.httpClient.post<T>(url, data, this.options);
   }
}

I am getting a compiler error "Duplicate function implementation" . Is there any way we can create one post method that can accept T or any ?

That's not how [overloads work in Typescript](https://www.typescriptlang.org/docs/handbook/2/functions.html#function-overloads). Remember, it has to compile to JS, and you can't have duplicate function definitions in JS. — Jared Smith, Dec 01 '22 at 22:57
Does this answer your question? [TypeScript function overloading](https://stackoverflow.com/questions/13212625/typescript-function-overloading) — Jared Smith, Dec 01 '22 at 22:58

score 2 · Accepted Answer · answered Dec 01 '22 at 23:00

Function overriding in TypeScript doesn't mean you can have two implementation but that you can have two declarations. So proper would be:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})

export class HttpService {
    private options = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json'
        })
    };

    constructor(private httpClient: HttpClient) {
    }

    public post(url: string, body?: any): Observable<any>
    public post<T>(url: string, body?: any): Observable<T> {
        let data = (body == null || body == undefined) ? null : JSON.stringify(body);
        return this.httpClient.post<T>(url, data, this.options);
   }
}

But in your case there is other solution:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})    
export class HttpService {
    private options = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json'
        })
    };

    constructor(private httpClient: HttpClient) {
    }

    public post<T = any>(url: string, body?: any): Observable<T> {
        let data = (body == null || body == undefined) ? null : JSON.stringify(body);
        return this.httpClient.post<T>(url, data, this.options);
   }
}

When using generics you always add "default type" for them. So you can do post<T = any>

Great I could help. From my experience I would suggest you not to use function overriding in TypeScript - this is very magical mechanism and can allow you introducing errors which are hard to investigate. — Łukasz Piotr Łuczak, Dec 01 '22 at 23:18

Function overriding in typescript

1 Answers1