Question

不确定这是纯粹的TypeScript问题还是依赖于它如何编译成javascript。

我在同一个模块中定义了两个分类（不同的文件）

module Modules.Home.Overview {

    export class Tours {
        private localStorageKey : string = "Home.Tours";

        private $tourBootgrid: JQuery;
    }
}

和

module Modules.Home.Overview {

    export class Events {
        private localStorageKey : string = "Home.Events";

        private $eventBootgrid: JQuery;
    }
}

我在同一个View中使用这两个类的实例。在查看chrome中的dev.tools时，它会显示_this

_this.localStorageKey = "Home.Tours" or "Home.Events"
_this.$tourBootgrid = Object
_this.$eventBootgrid = Object

在我看来，classes已合并为一个。

我在这里做错了什么？我认为这两个instances是独立的。

更新＃1

在这两个类中，我绑定到bootstrap下拉列表的点击事件，例如

bindTourTypeChange = (): void => {
    this.$tourTypeDropDown.find("li a").on(Events.click, (evt:Event) => {
        this.setTourType($(evt.target).data("tourtype"));
        this.$tourBootgrid.bootgrid("reload");
    });
};

和

bindEventTypeChange = (): void => {
    this.$eventTypeDropDown.find("li a").on(Events.click, (evt:Event) => {
        this.setEventType($(evt.target).data("eventtype"));
        this.$eventBootgrid.bootgrid("reload");
    });
};

在click - 回调中设置断点时，我可以查看dev.tools中_this下的Scope -> Closure - 元素。

更新＃2

TypeScript汇编为Tours.js

var Modules;
(function (Modules) {
    (function (Home) {
        (function (Overview) {
            var Tours = (function () {
                function Tours(setup) {
                    var _this = this;

                    this.localStorageKey = "Home.Tours";
                }

                return Tours;
            })();
            Overview.Tours = Tours;
        })(Home.Overview || (Home.Overview = {}));
        var Overview = Home.Overview;
    })(Modules.Home || (Modules.Home = {}));
    var Home = Modules.Home;
})(Modules || (Modules = {}));

和Events.js

var Modules;
(function (Modules) {
    (function (Home) {
        (function (Overview) {
            var Events = (function () {
                function Events(setup) {
                    var _this = this;

                    this.localStorageKey = "Home.Events";
                }

                return Events;
            })();
            Overview.Events = Events;
        })(Home.Overview || (Home.Overview = {}));
        var Overview = Home.Overview;
    })(Modules.Home || (Modules.Home = {}));
    var Home = Modules.Home;
})(Modules || (Modules = {}));

更新＃3

好像我发现了这个问题。

我＆＃34;初始化＆＃34;该模块通过调用

Modules.Home.Overview.Tours(tourSetup)

和

Modules.Home.Overview.Events(eventSetup)

将此更改为

new Modules.Home.Overview.Tours(tourSetup)

和

new Modules.Home.Overview.Events(eventSetup)

似乎有效。它现在告诉我

未使用或可能将构造函数调用用于副作用。

也不需要将它传递给变量，因为我不需要变量。

有人可以向我解释一下这种行为吗？

Answer 1

如果您使用类似这样的类，请解释您在解决之前的行为......

Modules.Home.Overview.Tours(tourSetup)

...为类创建的函数中this的值将引用全局对象 - window - 并且所有属性都将分配给它。

您可以在JavaScript中执行此测试以查看：

function MyClass() {
    this.test = "my string";
}

var myInstance;
myInstance = new MyClass(); // window.test == undefined, myInstance.test == "my string"
myInstance = MyClass();     // window.test == "my string", myInstance == undefined

在旁注中，以Modules.Home.Overview.Tours(tourSetup)的方式使用类应该是TypeScript中的编译错误。我猜你在TypeScript编译器无法触及的地方引用它。

TypeScript类在内部合并

1 个答案: