javascript - 使用不同参数的重写方法来扩展 Typescript 类不可能吗？

Question

我正在用 Typescript 编写一个小 MVC 应用程序，但我遇到了问题。如果我扩展 BaseController 并覆盖 ajaxMethod 需要不同的参数，我的转换器会出错。希望有人能帮助我。

这是我的代码:

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();
    }
}

目前我不知道我在延长类(class)方面错在哪里。构造函数和监听器都可以毫无问题地被覆盖。为什么不是 ajaxMethod？

Answer 1

正如错误消息所说，两个ajaxMethod()的签名不兼容。

当 Page_1_Controller 扩展 BaseController 时，它获取 ajaxMethod() 的类型为 () => void 。这意味着，如果您的 Page_1_Controller 实例向下转换为 BaseController，它应该可以使用该签名。

考虑一下:

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

您的代码将无法处理此问题。这就是编译器提示并帮助您在编译时捕获此错误的原因。

要解决此问题，您应该处理这种情况，例如:

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