Error message: "The overload signature does not match the function implementation in Typescript class"

Question

Error message: "The overload signature does not match the function implementation in Typescript class"

Below is the class that I have created:


export class MyItem {
  public name: string;
  public surname: string;
  public category: string;
  public address: string;

  constructor();
  constructor(name:string, surname: string, category: string, address?: string);
  constructor(name:string, surname: string, category: string, address?: string) {
    this.name = name;
    this.surname = surname;
    this.category = category;
    this.address = address;
  }

The error message I am receiving is as follows:

Overload signature is not compatible with function implementation

I have attempted various ways to overload the constructor method, including the most recent attempt shown above (found from a source on here).

Despite all my efforts, I continue to encounter the same error. Can you spot what is incorrect in my code?

class angular typescript constructor constructor-overloading

Answer 1

Answer №1

An error occurs in the compilation because the implementation function signature does not match the empty constructor that was declared.
To have a default constructor, it should be defined as follows:

class MyItem {
    public name: string;
    public surname: string;
    public category: string;
    public address: string;

    constructor();
    constructor(name:string, surname: string, category: string, address?: string);
    constructor(name?: string, surname?: string, category?: string, address?: string) {
        this.name = name;
        this.surname = surname;
        this.category = category;
        this.address = address;
    }
}

(code in playground)

It is essential to note that all arguments in the actual implementation are optional because the default constructor has no arguments.
This ensures that the implementing function satisfies both signatures.

You can simplify by having just one signature without declaring the other two:

class MyItem {
    public name: string;
    public surname: string;
    public category: string;
    public address: string;

    constructor(name?: string, surname?: string, category?: string, address?: string) {
        this.name = name;
        this.surname = surname;
        this.category = category;
        this.address = address;
    }
}

(code in playground)

Both approaches are equivalent.

Answer 2

An error occurs in the compilation because the implementation function signature does not match the empty constructor that was declared.
To have a default constructor, it should be defined as follows:

class MyItem {
    public name: string;
    public surname: string;
    public category: string;
    public address: string;

    constructor();
    constructor(name:string, surname: string, category: string, address?: string);
    constructor(name?: string, surname?: string, category?: string, address?: string) {
        this.name = name;
        this.surname = surname;
        this.category = category;
        this.address = address;
    }
}

(code in playground)

It is essential to note that all arguments in the actual implementation are optional because the default constructor has no arguments.
This ensures that the implementing function satisfies both signatures.

You can simplify by having just one signature without declaring the other two:

class MyItem {
    public name: string;
    public surname: string;
    public category: string;
    public address: string;

    constructor(name?: string, surname?: string, category?: string, address?: string) {
        this.name = name;
        this.surname = surname;
        this.category = category;
        this.address = address;
    }
}

(code in playground)

Both approaches are equivalent.

Answer 3

Answer №2

Issue:

The overload signature does not match its implementation signature.ts(2394)

Check out this example:

interface ICoordinate {
    x: number;
    y: number;
}

INCORRECT:

function parseCoord(obj: ICoordinate): ICoordinate;  <-- error here
function parseCoord(x: number, y: number): ICoordinate {
 ....

CORRECT:

function parseCoord(obj: ICoordinate): ICoordinate;
function parseCoord(x: number, y: number): ICoordinate;
function parseCoord(arg1: unknown, arg2?: unknown): ICoordinate {
 ....

This error occurs because function overloads (including Ctors) require at least one overload to have nullable? &/or unknown parameter types, as demonstrated above.

Answer 4

Issue:

The overload signature does not match its implementation signature.ts(2394)

Check out this example:

interface ICoordinate {
    x: number;
    y: number;
}

INCORRECT:

function parseCoord(obj: ICoordinate): ICoordinate;  <-- error here
function parseCoord(x: number, y: number): ICoordinate {
 ....

CORRECT:

function parseCoord(obj: ICoordinate): ICoordinate;
function parseCoord(x: number, y: number): ICoordinate;
function parseCoord(arg1: unknown, arg2?: unknown): ICoordinate {
 ....

This error occurs because function overloads (including Ctors) require at least one overload to have nullable? &/or unknown parameter types, as demonstrated above.

Error message: "The overload signature does not match the function implementation in Typescript class"

Answer №1

Answer №2

Similar questions

Revamp the button's visual presentation when it is in an active state

What is the best way to retrieve the most recent entry in a Firebase real-time database?

Is the communication between Angular service and component failing when using ngFor?

Using TypeScript to extract types from properties with specific types

Displaying a component upon clicking a button in Angular 9

Showing user input in an Angular 2 component based on their selection in a dropdown menu

Tips for establishing optimal parameters for an object's dynamic property

Encountering errors with abstract keyword in TypeORM while implementing concrete table inheritance is a common issue

Enhance the background property in createMuiTheme of Material-UI by incorporating additional properties using Typescript

Guide on navigating to a different page using a function with router link in Angular using TypeScript

The identifier "id" is not a valid index for this type

How can I access the .ts variable value within an *ngIf statement in HTML?

Delivering a static Angular app through an Express Server

Experiencing a problem in React JS when trying to render a component?

Using Jest and Typescript to mock a constant within a function

Inform the component of an error detected in the Angular service

The error "modules[moduleId] is undefined" occurs when running `ng build --watch

What is the correct way to declare the mongoose _id in a TypeScript interface?

What is the method for storing a JSON object path in a variable for use in a template?

How do I define two mutations in a single component using TypeScript and react-apollo?