定義 TypeScript 回調類型

Question

我在 TypeScript 中有以下 class：

class CallbackTest
{
    public myCallback;

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

我正在使用這樣的 class：

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

該代碼有效，因此它按預期顯示一個消息框。

我的問題是：我可以為我的 class 字段myCallback提供任何類型嗎？ 現在，公共字段myCallback any類型如上所示。 如何定義回調的方法簽名？ 或者我可以將類型設置為某種回調類型嗎？ 或者我可以做這些嗎？ 我必須使用any （隱式/顯式）嗎？

我嘗試過這樣的事情，但它不起作用（編譯時錯誤）：

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

我在網上找不到任何解釋，所以我希望你能幫助我。

Answer 1

我剛剛在 TypeScript 語言規范中找到了一些東西，這很容易。 我非常接近。

語法如下：

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

在我的例子中，它將是

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

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

Answer 2

更進一步，您可以聲明一個指向函數簽名的類型指針，例如：

interface myCallbackType { (myArgument: string): void }

並像這樣使用它：

public myCallback : myCallbackType;

Answer 3

您可以聲明一個新類型：

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

var handler: MyHandler;

更新。

declare關鍵字不是必需的。 它應該用於 .d.ts 文件或類似情況。

Answer 4

這是一個示例 - 不接受任何參數並且不返回任何內容。

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

如果你想接受一個參數，你也可以添加它：

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

如果你想返回一個值，你也可以添加：

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

Answer 5

如果你想要一個通用函數，你可以使用以下內容。 雖然它似乎沒有記錄在任何地方。

class CallbackTest {
  myCallback: Function;
}   

Answer 6

您可以使用以下內容：

1. 類型別名（使用type關鍵字，為函數字面量取別名）
2. 界面
3. 函數字面量

---

以下是如何使用它們的示例：

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;

    // ...

}

Answer 7

我有點晚了，但是，因為前段時間在 TypeScript 中，您可以使用以下命令定義回調類型

type MyCallback = (KeyboardEvent) => void;

使用示例：

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

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

Answer 8

嘗試將回調添加到事件偵聽器時遇到了同樣的錯誤。 奇怪的是，將回調類型設置為 EventListener 就解決了。 它看起來比將整個函數簽名定義為類型更優雅，但我不確定這是否是正確的方法。

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

Answer 9

這是我如何定義包含回調的接口的簡單示例。

// interface containing the callback

interface AmazingInput {
    name: string
    callback: (string) => void  //defining the callback
}

// method being called

public saySomethingAmazing(data:AmazingInput) {
   setTimeout (() => {
     data.callback(data.name + ' this is Amazing!');
   }, 1000)

}

// create a parameter, based on the interface

let input:AmazingInput = {
    name: 'Joe Soap'
    callback: (message) => {
        console.log ('amazing message is:' + message);
    }
}

// call the method, pass in the parameter

saySomethingAmazing(input);

Answer 10

這是角度組件和服務的可選回調函數的示例

    maincomponent(){
        const param = "xyz";
       this.service.mainServie(param, (response)=>{
        if(response){console.log("true");}
        else{console.log("false");}
      })
    }

//Service Component
    mainService(param: string, callback?){
      if(string === "xyz"){
        //call restApi 
        callback(true);
      }
    else{
        callback(false);
      }
    }