首页 文章

定义TypeScript回调类型

提问于
浏览
119

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

代码有效,因此它会按预期显示消息框 .

我的问题是:我可以为我的 class 领域提供任何类型 myCallback 吗?现在,公共字段 myCallback 的类型为 any ,如上所示 . 如何定义回调的方法签名?或者我可以将类型设置为某种回调类型?或者我可以做些什么吗?我必须使用 any (隐式/显式)吗?

我试过这样的东西,但它不起作用(编译时错误):

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

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

6 回答

  • 1

    我刚刚在TypeScript语言规范中找到了一些东西,它相当容易 . 我非常接近 .

    语法如下:

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

    在我的例子中,它将是

    class CallbackTest
    {
        public myCallback: () => void;
    
        public doWork(): void
        {
            //doing some work...
            this.myCallback(); //calling callback
        }
    }
    
  • 45

    为了更进一步,您可以声明一个指向函数签名的类型指针,如:

    interface myCallbackType { (myArgument: string): void }
    

    并像这样使用它:

    public myCallback : myCallbackType;
    
  • 121

    您可以声明一个新类型:

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

    更新 .

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

  • 26

    这是一个例子 - 不接受任何参数并且不返回任何参数 .

    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;};
    
  • 162

    如果您想要通用功能,可以使用以下功能 . 虽然它似乎没有在任何地方记录 .

    class CallbackTest {
      myCallback: Function;
    }
    
  • 6

    尝试将回调添加到事件侦听器时,我遇到了同样的错误 . 奇怪的是,将回调类型设置为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);
        }
    }
    

相关问题