41

我有一个 TypeScript 类,带有一个我打算用作回调的函数:

removeRow(_this:MyClass): void {
    ...
    // 'this' is now the window object
    // I must use '_this' to get the class itself
    ...
}

我将它传递给另一个函数

this.deleteRow(this.removeRow);

依次调用 jQuery Ajax 方法,如果成功,调用回调,如下所示:

deleteItem(removeRowCallback: (_this:MyClass) => void ): void {
    $.ajax(action, {
        data: { "id": id },
        type: "POST"
    })
    .done(() => {
        removeRowCallback(this);
    })
    .fail(() => {
        alert("There was an error!");
    });
}

我可以保留对我的类的“this”引用的唯一方法是将它传递给回调,如上所示。它有效,但它是裤子代码。如果我没有像这样连接“this”(对不起),那么回调方法中对 this 的任何引用都已恢复到 Window 对象。因为我一直在使用箭头函数,所以我希望“this”是类本身,就像在我类的其他地方一样。

任何人都知道如何在 TypeScript 中传递回调,保留词法范围?

4

5 回答 5

60

编辑 2014-01-28:

新读者,请务必在下面查看Zac 的答案

他有一个更简洁的解决方案,可以让您使用胖箭头语法在类定义中定义和实例化一个作用域函数。

我唯一要补充的是,关于Zac 答案中的选项 5,可以使用以下语法指定方法签名和返回类型而无需任何重复:

public myMethod = (prop1: number): string => {
    return 'asdf';
}

编辑 2013-05-28:

定义函数属性类型的语法已更改(自 TypeScript 0.8 版以来)。

以前你会定义一个这样的函数类型:

class Test {
   removeRow: (): void;
}

现在已更改为:

class Test {
   removeRow: () => void;
}

我已在下面更新了我的答案以包含此新更改。

顺便说一句:如果您需要为同一个函数名称定义多个函数签名(例如运行时函数重载),那么您可以使用对象映射表示法(这在 jQuery 描述符文件中被广泛使用):

class Test {
    removeRow: {
        (): void;
        (param: string): string;
    };
}

您需要将签名定义为removeRow()类的属性,但在构造函数中分配实现。

有几种不同的方法可以做到这一点。

选项1

class Test {

    // Define the method signature here.
    removeRow: () => void;

    constructor (){
        // Implement the method using the fat arrow syntax.
        this.removeRow = () => {
            // Perform your logic to remove the row.
            // Reference `this` as needed.
        }
    }

}

如果你想保持你的构造函数最小,那么你可以将removeRow方法保留在类定义中,并在构造函数中分配一个代理函数:

选项 2

class Test {

    // Again, define the method signature here.
    removeRowProxy: () => void;

    constructor (){
        // Assign the method implementation here.
        this.removeRowProxy = () => {
            this.removeRow.apply(this, arguments);
        }
    }

    removeRow(): void {
        // ... removeRow logic here.
    }

}

选项 3

最后,如果您使用的是下划线或 jQuery 之类的库,那么您可以使用它们的实用方法来创建代理:

class Test {

    // Define the method signature here.
    removeRowProxy: () => void;

    constructor (){
        // Use jQuery to bind removeRow to this instance.
        this.removeRowProxy = $.proxy(this.removeRow, this);
    }

    removeRow(): void {
        // ... removeRow logic here.
    }

}

然后你可以稍微整理一下你的deleteItem方法:

// Specify `Function` as the callback type.
// NOTE: You can define a specific signature if needed.
deleteItem(removeRowCallback: Function ): void {
    $.ajax(action, {
        data: { "id": id },
        type: "POST"
    })

    // Pass the callback here.
    // 
    // You don't need the fat arrow syntax here
    // because the callback has already been bound
    // to the correct scope.
    .done(removeRowCallback)

    .fail(() => {
        alert("There was an error!");
    });
}
于 2013-01-23T04:18:56.400 回答
35

更新:请参阅 Sly 的更新答案。它包含以下选项的改进版本。

另一个更新:泛型

有时您想在函数签名中指定泛型类型,而不必在整个类中指定它。我花了几次尝试弄清楚语法,所以我认为它可能值得分享:

class MyClass {  //no type parameter necessary here

     public myGenericMethod = <T>(someArg:string): QPromise<T> => {

         //implementation here...

     }
}

选项 4

这里还有一些语法可以添加到 Sly_cardinal 的答案中。这些示例将函数声明和实现保留在同一位置:

class Test {

      // Define the method signature AND IMPLEMENTATION here.
      public removeRow: () => void = () => {

        // Perform your logic to remove the row.
        // Reference `this` as needed.

      }

      constructor (){

      }

}

或者

选项 5

更紧凑一点,但放弃了显式返回类型(如果不显式,编译器无论如何都应该推断返回类型):

class Test {

      // Define implementation with implicit signature and correct lexical scope.
      public removeRow = () => {

        // Perform your logic to remove the row.
        // Reference `this` as needed.

      }

      constructor (){

      }

}

于 2014-01-27T16:31:15.023 回答
5

使用 .bind() 在回调中保留上下文。

工作代码示例:

window.addEventListener(
  "resize",
  (()=>{this.retrieveDimensionsFromElement();}).bind(this)
)

原始问题中的代码将变成这样:

$.ajax(action, {
    data: { "id": id },
    type: "POST"
})
.done(
  (() => {
    removeRowCallback();
  }).bind(this)
)

它将回调函数内的上下文(this)设置为作为参数传递给绑定函数的任何内容,在本例中为原始 this 对象。

于 2017-05-19T20:52:38.627 回答
1

这是来自另一个答案的交叉帖子(TypeScript 中是否有 'this' 的别名?)。我使用上面的示例重新应用了这个概念。我比上面的选项更喜欢它,因为它明确支持类实例以及调用该方法的动态上下文实体的“this”范围。

下面有两个版本。我喜欢第一个,因为编译器有助于正确使用它(由于显式类型的参数,您不会轻易尝试滥用回调 lambda 本身作为回调)。

测试一下: http ://www.typescriptlang.org/Playground/

class Test {

    private testString: string = "Fancy this!";

    // Define the method signature here.
    removeRowLambdaCallback(outerThis: Test): {(): void} {
        alert("Defining callback for consumption");
        return function(){
            alert(outerThis.testString); // lexically scoped class instance
            alert(this); // dynamically scoped context caller
            // Put logic here for removing rows. Can refer to class
            // instance as well as "this" passed by a library such as JQuery or D3.
        }
    }
    // This approach looks nicer, but is more dangerous
    // because someone might use this method itself, rather
    // than the return value, as a callback.
     anotherRemoveRowLambdaCallback(): {(): void} {
        var outerThis = this;
        alert("Defining another callback for consumption");
        return function(){
            alert(outerThis.testString); // lexically scoped class instance
            alert(this); // dynamically scoped context caller
            // Put logic here for removing rows. Can refer to class
            // instance as well as "this" passed by a library such as JQuery or D3.
        }
    }
}

var t = new Test();
var callback1 = t.removeRowLambdaCallback(t);
var callback2 = t.anotherRemoveRowLambdaCallback();

callback1();
callback2();
于 2014-03-21T21:05:28.590 回答
0

基于 sly 和 Zac 对类型的回答:一个完整​​的 hello world 示例。我希望这是受欢迎的,因为这是在 Google 中搜索“typescript javascript callbacks”时的最高结果

type MyCallback = () => string;

class HelloWorld {

    // The callback
    public callback: MyCallback = () => {
        return 'world';
    }

    // The caller
    public caller(callback: MyCallback) {
        alert('Hello ' + callback());
    }
}

let hello = new HelloWorld();
hello.caller(hello.callback);

这被转换为:

var HelloWorld = (function () {
    function HelloWorld() {
        // The callback
        this.callback = function () {
            return 'world';
        };
    }
    // The caller
    HelloWorld.prototype.caller = function (callback) {
        alert('Hello ' + callback());
    };
    return HelloWorld;
}());
var hello = new HelloWorld();
hello.caller(hello.callback);

希望有人觉得它有点用处。:)

于 2016-10-26T16:41:52.233 回答