无法使用使用不同参数的覆盖方法扩展Typescript类？

Question

I'm writing a little MVC app in Typescript but i have prolem. If i extend my BaseController and override the ajaxMethod what needs diferent parameters my transpiler makes an error. hope someone can help me.

here's my code:

interface i_Controller {
    ajaxMethod;
    ajaxSuccessListener;
    ajaxErrorListener;
}

class BaseController implements i_Controller {
    protected baseProperty: boolean;

    constructor() {
        this.baseProperty = true;
    }

    public ajaxMethod() {
        $.when(
            $.ajax({})
        ).then(
            this.ajaxSuccessListener,
            this.ajaxErrorListener
        )
    }

    public ajaxSuccessListener(data, status, jqXHR) {
        console.log('ajax success');
        console.log(data);
    };

    public ajaxErrorListener(jqXHR, status, error) {
        console.error('ajax error');
        console.error(status);
    };
}


class Page_1_Controller extends BaseController {
    private localProperty: number;

    constructor(input) {
        super();
        this.localProperty = input;
    }

    public ajaxMethod(someProperty) {
        /*
        /* Error:(39, 7) TS2415:Class 'Page_1_Controller' incorrectly
        /* extends base class 'BaseController'.
        /* Types of property 'ajaxMethod' are incompatible.
        /* Type '(someProperty: any) => void' is not assignable to 
        /* type '() => void'.
        */
        $.when(
            $.ajax({
                data: {properties: someProperty}
            }),
            $.ajax({})
        ).then(
            this.ajaxSuccessListener,
            this.ajaxErrorListener
        )
    }

    public ajaxSuccessListener(responseAjaxRequest_1, responseAjaxRequest_2) {
        console.log('ajax success');
        let data_1 = responseAjaxRequest_1[0];
        let data_2 = responseAjaxRequest_2[0];
        console.log(data_1);
        console.log(data_2);
    }
}

class MyApp {
    private controller: i_Controller;

    constructor() {
        this.controller = new Page_1_Controller();
        /*
        /* Error:(72, 27) TS2346:Supplied parameters do not match any
        /* signature of call target.
        */
        this.controller.ajaxMethod();
    }
}

at the moment i don't know where i am false on extending my classes. constructor can be overwritten without any problems, and the listeners too. why not the ajaxMethod?

Answer 1

Just as the error message said, the signature of the two ajaxMethod() are incompatible.

When Page_1_Controller extends BaseController , it gets the type of ajaxMethod() as () => void . This means that if your instance of Page_1_Controller is down-casted to BaseController , it should work with that signature.

Consider this:

function foo(c: BaseController) {
  c.ajaxMethod()
}
const page1 = new Page_1_Controller()
foo(page1)

Your code won't be able to handle this. That's why the compiler complains and helps you catching this error during compile time.

To fix this, you should handle this case, such as:

class Page_1_Controller extends BaseController {
  ajaxMethod(someProperty?) {
    if (someProperty) {
      ...
    }
    else {
      super.ajaxMethod()
    }
  }
}