TypeScript类在内部合并

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

我使用这两个类的实例同样的观点。当在镀铬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 -callback我可以看看在下的_this -element在dev.tools中。

更新＃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

好像我找到了问题。

我 “初始化” 模块通过调用

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的编译器范围之外的地方引用它的。