从 JavaScript 访问 TypeScript 函数

Question

我想将 TypeScript 与 jsTree 一起使用。如何在绑定的jsTree函数中调用setCurrentNode函数？

class MyController {
    thescope: any;
    static $inject = ['$scope'];

    constructor($scope) {
        $scope.vm = this;
        this.thescope = $scope;

        (<any>$("#demo2")).jstree({
             .bind("select_node.jstree", function (e, data) {
              // how can I call setCurrentNode(data) here?
             }
        });

    }


    setCurrentNode(node: any): any {
        ... // do Stuff in this typescript function
    }
}

Answer 1

解决方案：

(<any>$("#demo2")).jstree({
         .bind("select_node.jstree", this.setCurrentNode.bind(this) )
         }

public setCurrentNode(e:any,data: any): any {
   ...
}

Answer 2

我不完全确定，如果我错了，请纠正我，但是使用lamba表达式不也能解决这个问题吗？

如下：

class MyController {
    thescope: any;
    static $inject = ['$scope'];

    constructor($scope) {
        $scope.vm = this;
        this.thescope = $scope;

        (<any>$("#demo2")).jstree({
             .bind("select_node.jstree", (e, data) => {
                 this.setCurrentNode(e, data);
             }
        });

    }

    setCurrentNode(e: any, node: any): any {
        ... // do Stuff in this typescript function
    }
}

lambda (=>) 表达式将确保函数在与您定义它的范围相同的范围内执行。如果您查看已编译的 JavaScript 代码，您会发现他将保留一个引用构造函数作用域并将在该作用域上调用setCurrentNode。简化示例：

var _this = this;
$("#demo2").jstree({
     .bind("select_node.jstree", (e, data) => {
         _this.setCurrentNode(e, data);
     });

我相信这会解决您的问题？

附带说明，您应该查找 jsTree 定义文件或至少自己添加一个存根声明，这样您就不需要将 JQuery 强制转换为任何文件。只是我的 2cts，我觉得很难看。

Answer 3

根据 Anzeo 的建议，为了避免将 $ 转换为以下任何内容，您只需开始：

interface JQuery{
        jstree:Function;
}

Answer 4

它发生的是内部 jsTree 回调正在覆盖对实例对象的 this 初始引用。

有两种安全的方法可以解决这个问题：

1- 通过使用@Anzeo 所指的箭头函数，我不推荐也从不使用它，因为如果您需要另一个嵌套回调，那么您可以使用 this引用最里面的事件对象。

2- 通过缓存 this 对实例对象的引用，例如：

class MyController {
    thescope: any;
    static $inject = ['$scope'];

    constructor($scope) {
        // Caching the reference for using it in the inner callbacks.
        var self = this;

        $scope.vm = this;
        this.thescope = $scope;

        (<any>$("#demo2")).jstree({
             .bind("select_node.jstree", function (e, data) {

              // Call to the instance method here!
              self.setCurrentNode(/*Node params here*/);
             }
        });

    }


    setCurrentNode(node: any): any {
        ... // do Stuff in this typescript function
    }
}

我建议您坚持使用 2，因为它适用于任何嵌套级别，并且您可以让每个嵌套回调中的 this 指向正确的事件对象。

更多参考请参见Javascript 'this' overwriting in Z combinator and every other recursive function，因为问题与此处相同。