Definiowanie typu wywołania zwrotnego TypeScript

Mam następującą klasę w TypeScript:

class CallbackTest
{
    public myCallback;

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

Używam klasy w ten sposób:

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

Kod działa, więc wyświetla okno komunikatu zgodnie z oczekiwaniami.

Moje pytanie brzmi: Czy jest jakiś typ, który mogę podać w polu mojej klasy myCallback? Obecnie pole publiczne myCallbackjest typu anypokazanego powyżej. Jak mogę zdefiniować sygnaturę metody wywołania zwrotnego? Czy mogę po prostu ustawić typ na rodzaj oddzwaniania? Czy mogę nic z tego zrobić? Czy muszę używać any(niejawne / jawne)?

Próbowałem czegoś takiego, ale nie zadziałało (błąd kompilacji):

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

Nie mogłem znaleźć żadnego wyjaśnienia tego w Internecie, więc mam nadzieję, że możesz mi pomóc.

Właśnie znalazłem coś w specyfikacji języka TypeScript, jest to dość łatwe. Byłem całkiem blisko.

składnia jest następująca:

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

W moim przykładzie byłoby to

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

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

Aby pójść o krok dalej, możesz zadeklarować wskaźnik typu do sygnatury funkcji, na przykład:

interface myCallbackType { (myArgument: string): void }

i użyj go w ten sposób:

public myCallback : myCallbackType;

Możesz zadeklarować nowy typ:

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

var handler: MyHandler;

Aktualizacja.

Słowo declarekluczowe nie jest konieczne. Powinien być używany w plikach .d.ts lub w podobnych przypadkach.

Oto przykład - nie przyjmowanie żadnych parametrów i nic nie zwraca.

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

Jeśli chcesz zaakceptować parametr, możesz go również dodać:

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

A jeśli chcesz zwrócić wartość, możesz to również dodać:

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

Jeśli chcesz mieć funkcję ogólną, możesz użyć następujących. Chociaż wydaje się, że nie jest to nigdzie udokumentowane.

class CallbackTest {
  myCallback: Function;
}   

Możesz użyć następujących:

1. Wpisz Alias ​​(używając typesłowa kluczowego, aliasując literał funkcji)
2. Berło
3. Literał funkcji

Oto przykład, jak z nich korzystać:

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;

    // ...

}

Napotkałem ten sam błąd podczas próby dodania wywołania zwrotnego do detektora zdarzeń. O dziwo, ustawienie typu wywołania zwrotnego na EventListener rozwiązało problem. Wygląda to bardziej elegancko niż definiowanie całego podpisu funkcji jako typu, ale nie jestem pewien, czy jest to właściwy sposób.

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

Trochę się spóźniłem, ale od jakiegoś czasu w TypeScript można zdefiniować typ wywołania zwrotnego za pomocą

type MyCallback = (KeyboardEvent) => void;

Przykład użycia:

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

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