定义TypeScript回调类型

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

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

300080 次浏览
小开

下面是一个示例—不接受参数，不返回任何值。

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;};
小开
最佳答案

我刚刚在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;
小开

更进一步，你可以像这样声明一个指向函数签名的类型指针:

interface myCallbackType { (myArgument: string): void }

像这样使用它:

public myCallback : myCallbackType;
小开

你可以声明一个新类型:

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


var handler: MyHandler;

更新。

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

小开

如果你想要一个通用函数，你可以使用下面的方法。尽管似乎没有任何文献记载。

class CallbackTest {
myCallback: Function;
}
小开

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

你可以使用以下方法:

  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;


// ...


}
小开

我有点晚了，但是，在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);
}
小开

下面是一个简单的例子，说明如何定义包含回调的接口。

// 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);
小开

这是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);
}
}
小开

这个问题的答案是每个人都定义了类型或接口。我用typescript定义了函数，但没有定义类型。

您可以像下面这样定义带有回调类型参数的函数。您可以在类型本身中定义多个返回值，并返回多个数据，以逗号分隔，并从调用函数的位置使用相同的数据。

functionWithCallback = (completion: (returnData: any, someMoreData: any) => void) => {
completion(["A", "B"], 5);
}

你可以这样称呼它。

functionWithCallback((returnData: any, someMoreData: any) => {
//you can use all the data returned from the function here
}

希望这能帮助到一些人。


提交答案