Xác định kiểu gọi lại TypeScript

Tôi đã có lớp sau trong TypeScript:

class CallbackTest
{
    public myCallback;

    public doWork(): void
    {
        //doing some work...
        this.myCallback(); //calling callback
    }
}

Tôi đang sử dụng lớp học như thế này:

var test = new CallbackTest();
test.myCallback = () => alert("done");
test.doWork();

Mã này hoạt động, vì vậy nó sẽ hiển thị một hộp thông báo như mong đợi.

Câu hỏi của tôi là: Có loại nào tôi có thể cung cấp cho trường lớp của mình myCallbackkhông? Ngay bây giờ, lĩnh vực công cộng myCallbacklà loại anynhư hiển thị ở trên. Làm cách nào để xác định chữ ký phương thức của cuộc gọi lại? Hoặc tôi chỉ có thể đặt loại thành một số loại gọi lại? Hoặc tôi có thể làm liên kết những điều này? Tôi có phải sử dụng khôngany (ẩn / tường minh) không?

Tôi đã thử một cái gì đó như thế này, nhưng nó không hoạt động (lỗi thời gian biên dịch):

public myCallback: ();
// or:
public myCallback: function;

Tôi không thể tìm thấy bất kỳ lời giải thích nào cho việc này trực tuyến, vì vậy tôi hy vọng bạn có thể giúp tôi.

Tôi vừa tìm thấy thứ gì đó trong đặc tả ngôn ngữ TypeScript, nó khá dễ. Tôi đã khá thân thiết.

cú pháp như sau:

public myCallback: (name: type) => returntype;

Trong ví dụ của tôi, nó sẽ là

class CallbackTest
{
    public myCallback: () => void;

    public doWork(): void
    {
        //doing some work...
        this.myCallback(); //calling callback
    }
}

Để tiến thêm một bước, bạn có thể khai báo một con trỏ kiểu tới chữ ký hàm như:

interface myCallbackType { (myArgument: string): void }

và sử dụng nó như thế này:

public myCallback : myCallbackType;

Bạn có thể khai báo một loại mới:

declare type MyHandler = (myArgument: string) => void;

var handler: MyHandler;

Cập nhật.

Các declaretừ khóa là không cần thiết. Nó nên được sử dụng trong các tệp .d.ts hoặc trong các trường hợp tương tự.

Dưới đây là một ví dụ - chấp nhận không có tham số và không trả lại gì.

class CallbackTest
{
    public myCallback: {(): void;};

    public doWork(): void
    {
        //doing some work...
        this.myCallback(); //calling callback
    }
}

var test = new CallbackTest();
test.myCallback = () => alert("done");
test.doWork();

Nếu bạn muốn chấp nhận một tham số, bạn cũng có thể thêm tham số đó:

public myCallback: {(msg: string): void;};

Và nếu bạn muốn trả về một giá trị, bạn cũng có thể thêm vào đó:

public myCallback: {(msg: string): number;};

Nếu bạn muốn một chức năng chung, bạn có thể sử dụng như sau. Mặc dù nó dường như không được ghi nhận ở bất cứ đâu.

class CallbackTest {
  myCallback: Function;
}   

Bạn có thể sử dụng như sau:

1. Nhập bí danh (sử dụng type từ khóa, đặt bí danh một hàm theo nghĩa đen)
2. Giao diện
3. Chức năng

Dưới đây là một ví dụ về cách sử dụng chúng:

type myCallbackType = (arg1: string, arg2: boolean) => number;

interface myCallbackInterface { (arg1: string, arg2: boolean): number };

class CallbackTest
{
    // ...

    public myCallback2: myCallbackType;
    public myCallback3: myCallbackInterface;
    public myCallback1: (arg1: string, arg2: boolean) => number;

    // ...

}

Tôi đã gặp lỗi tương tự khi cố gắng thêm cuộc gọi lại vào một người nghe sự kiện. Thật kỳ lạ, việc đặt loại gọi lại thành EventListener đã giải quyết nó. Nó trông thanh lịch hơn so với việc xác định toàn bộ chữ ký hàm là một loại, nhưng tôi không chắc liệu đây có phải là cách chính xác để làm điều này không.

class driving {
    // the answer from this post - this works
    // private callback: () => void; 

    // this also works!
    private callback:EventListener;

    constructor(){
        this.callback = () => this.startJump();
        window.addEventListener("keydown", this.callback);
    }

    startJump():void {
        console.log("jump!");
        window.removeEventListener("keydown", this.callback);
    }
}

Tôi hơi muộn, nhưng, từ trước đây trong TypeScript, bạn có thể xác định loại gọi lại bằng

type MyCallback = (KeyboardEvent) => void;

Ví dụ sử dụng:

this.addEvent(document, "keydown", (e) => {
    if (e.keyCode === 1) {
      e.preventDefault();
    }
});

addEvent(element, eventName, callback: MyCallback) {
    element.addEventListener(eventName, callback, false);
}