There was an issue encountered when creating the class: The parameters provided do not correspond to any valid call target signature

Question

There was an issue encountered when creating the class: The parameters provided do not correspond to any valid call target signature

I am facing an issue with my code. Here is the scenario:

export class MyClass {
    public name:string;
    public addr:string;

    constructor() {}
}

I have imported MyClass and trying to use it like this:

import { MyClass } from './MyClass';

// and use it here:

class MyUser {
    private _prop : MyClass[];

    constructor() {
        this._prop = [
            new MyClass({name: 'Hello', addr: 'World'}) //<--- this is where the error appears
        ]
    }
}

However, I am encountering a linting error that says:

Supplied parameters do not match any signature of call target

Why am I unable to instantiate my class correctly?

angular typescript

Answer 1

Answer №1

It appears that you have forgotten to include parameters in the constructor of your MyClass. To set values when instantiating this class, parameters need to be added to the constructor. You can simplify the syntax by moving MyClass properties to the constructor parameters as shown below.

export class MyClass {
    //Adding `public` to the constructor shortens the syntax.
    constructor(public name: string, public addr:string) {

    }
}   

constructor() {
    this._prop = [
        new MyClass('Hello', 'World')
    ]
}

Playground Demo

Answer 2

It appears that you have forgotten to include parameters in the constructor of your MyClass. To set values when instantiating this class, parameters need to be added to the constructor. You can simplify the syntax by moving MyClass properties to the constructor parameters as shown below.

export class MyClass {
    //Adding `public` to the constructor shortens the syntax.
    constructor(public name: string, public addr:string) {

    }
}   

constructor() {
    this._prop = [
        new MyClass('Hello', 'World')
    ]
}

Playground Demo

Answer 3

Answer №2

To set up your constructor correctly, make sure you have the necessary parameters. If no parameters are specified in your case:

constructor(param:{name:string, addr:string}) {
  this.name = param.name;
  this.addr = param.addr;
}

An alternative approach is to directly declare your class properties within the constructor itself:

constructor(public name:string, public addr:string) {
  // Instead of using this:
  // this.name = name;
  // this.addr = addr;
}

By doing this, you can pass parameters to your constructor and they will be used to initialize your instance properties:

constructor() {
  this._prop = [
    new MyClass('Hello', 'World'})
  ];
}

Answer 4

To set up your constructor correctly, make sure you have the necessary parameters. If no parameters are specified in your case:

constructor(param:{name:string, addr:string}) {
  this.name = param.name;
  this.addr = param.addr;
}

An alternative approach is to directly declare your class properties within the constructor itself:

constructor(public name:string, public addr:string) {
  // Instead of using this:
  // this.name = name;
  // this.addr = addr;
}

By doing this, you can pass parameters to your constructor and they will be used to initialize your instance properties:

constructor() {
  this._prop = [
    new MyClass('Hello', 'World'})
  ];
}

There was an issue encountered when creating the class: The parameters provided do not correspond to any valid call target signature

Answer №1

Answer №2

Similar questions

Angular - Replicated Side Navigation

Error in Angular: Unable to Access Property '..' of null

The React component was not able to receive any children as input

Error: The layout was unable to display the template body

Unable to trigger an event from an asynchronous method in TypeScript

Develop a customized interface for exporting styled components

Troubleshooting issues with importing modules in TypeScript when implementing Redux reducers

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

Solving the issue of "Property does not exist on type 'never'" in a program involves identifying the root cause of

Obtain pictures from MongoDB for a website using Angular6

Issue with Angular: Child component not receiving data after successful parent component call

Creating a feature that automatically determines the data type of a value using the provided key

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

Value attribute property binding

ngx-graphs -> ngx-graphs-bar-vertical x-axis labels with multiple lines

Communication between components through a shared service

The element is implicitly imparted with an 'any' type due to the incapability of utilizing an expression of type 'number' to index the type '{}'. This error occurs in the context of VUEJS

Enable users to designate custom methods as either asynchronous or synchronous

An issue arises in Typescript when attempting to pass an extra prop through the server action function in the useForm

Convert all key types into arrays of that key type using a TypeScript utility type