What does, "supplied parameters do not match any signature of call target" mean?

Question

I'm working on an Angular (1.4.9) application with TypeScript. I'm doing an $http post and am using a method to trigger an alert for success or failure on a registration page. I realized that I would have to pass in the context of the method I'm using to trigger the alert and so, typically, I would do something like:

public showAlert(alertType: string, alertTitle: string, alertMessage: string, alertTimeout: number): void {
    this.alertShow = true;
    this.alertType = alertType;
    this.alertTitle = alertTitle;
    this.alertMessage = alertMessage;
    this.alertTimeout = alertTimeout;
}

public postIt(): void {
    that: any = this; // <-- See, I know what I'm doing.

    var url: string = "/";
    var user: any = {};

    this.$http.post(url, user)
        .then((data: any) => {
            that.showAlert("success", "Yes!", "You are registered.");
        })
        .catch((err: any) => {
            that.showAlert("warning", "Embarrassing...", "Problem on our end. Try again, later.");
        });
}

But, then I'm like, "Isn't TypeScript smart enough to know what I'm doing, here? Aren't the arrow functions taking care of this for me?" So, I switch it around:

public postIt(): void {
    // var that: any = this; <-- Boom! ...Commented out!

    var url: string = "/";
    var user: any = {};

    this.$http.post(url, user)
        .then((data: any) => {
            // it doesn't like the "this"
            this.showAlert("success", "Yes!", "You are registered.");
        })
        .catch((err: any) => {
            // it doesn't like the "this"
            this.showAlert("warning", "Embarrassing...", "Problem on our end. Try again, later.");
        });
}

I think I'm pretty smart. TypeScript cooperates. I checked the interpreted JavaScript and it's doing just what I thought it would:

myClass.prototype.postIt = function () {
    // var that: any = this;
    var _this = this;
    var url = "/";
    var user = {};
    this.$http.post(url, user)
        .then(function (data) {
        _this.showAlert("success", "Yes!", "You are registered.");
    })
        .catch(function (err) {
        _this.showAlert("warning", "Embarrassing...", "Problem on our end. Try again, later.");
    });

...And my application works just fine. But, the compiler throws me an error: "TS2346: Supplied parameters do not match any signature of call target." Considering the situation, I want to read that like it can't find the method. When I have it the original way it doesn't make this complaint. Could you explain what this error is about, exactly? Why isn't this error preventing compilation?

Answer 1

Error message actually explains very well what is wrong. Method showAlert expects 4 parameters and all of them are required, but inside postIt method showAlert is called without alertTimeout argument. To make this compiler error go away you should either pass alertTimeout value when calling showAlert or update method's signature and make last parameter optional:

public showAlert(alertType: string, alertTitle: string, 
    alertMessage: string, alertTimeout?: number): void {
    ...
}

Answer 2

If you have added a semi colon at the end of any sections, you will see the same error. I was facing the same issue as I added a semi colon at the end of one module in my imports section in app.module.ts.

Just removing a semi colon from RouterModule.forRoot(APP_ROUTES); fixed it for me.

Note: Though it is not related to OP's question, sharing for the other users who land in this page with the same error.