218

我在 TypeScript 中有以下类：

class CallbackTest
{
    public myCallback;

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

我正在使用这样的类：

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

该代码有效，因此它按预期显示一个消息框。

我的问题是：我可以为我的类字段提供任何类型myCallback吗？现在，公共字段myCallback的类型any如上所示。如何定义回调的方法签名？或者我可以将类型设置为某种回调类型吗？或者我可以做这些吗？我必须使用any（隐式/显式）吗？

我尝试过这样的事情，但它不起作用（编译时错误）：

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

我在网上找不到任何解释，所以我希望你能帮助我。

4

10 回答 10

264

我刚刚在 TypeScript 语言规范中找到了一些东西，它相当简单。我非常接近。

语法如下：

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

在我的示例中，它将是

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

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

作为类型别名：

type MyCallback = (name: type) => returntype;
于 2012-10-30T10:51:45.260 回答
176

更进一步，您可以声明一个指向函数签名的类型指针，例如：

interface myCallbackType { (myArgument: string): void }

并像这样使用它：

public myCallback : myCallbackType;
于 2013-01-10T01:39:07.477 回答
68

您可以声明一个新类型：

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

var handler: MyHandler;

更新。

declare关键字不是必需的。它应该在 .d.ts 文件或类似情况下使用。

于 2015-10-16T14:52:45.357 回答
42

这是一个示例 - 不接受任何参数并且不返回任何内容。

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;};
于 2012-10-30T10:49:08.073 回答
23

如果你想要一个通用函数，你可以使用以下。尽管它似乎没有在任何地方记录。

class CallbackTest {
  myCallback: Function;
}
于 2016-07-15T17:40:43.967 回答
7

您可以使用以下内容：

  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;

    // ...

}
于 2019-08-07T13:50:58.380 回答
6

我有点晚了，但是，因为前段时间在 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);
}
于 2020-01-29T15:59:36.817 回答
3

这是我如何定义包含回调的接口的简单示例。

// 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);
于 2021-03-26T11:48:27.447 回答
2

尝试将回调添加到事件侦听器时，我遇到了同样的错误。奇怪的是，将回调类型设置为 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);
    }
}
于 2017-04-24T09:12:55.223 回答
-1

这是 Angular 组件和服务的可选回调函数示例

    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);
      }
    }
于 2021-05-13T17:10:26.280 回答