创建typescript类以使用现有的Javascript和Backbone对象

Question

我开始在一个使用Backbone和Javascript的项目中工作。我不确定如何开始集成Typescript。例如，我们公司的名称空间位于视图、模型、对象等之前。因此，如果没有typescript，创建backbone对象将如下所示：

Company.Views.MyNewView = (function () { return Backbone.View.extend({ } })();

所以现在，使用Typescript，我想我可以这样做

class Company.Views.MyNewView {

}

但是，Typescript不喜欢名称中的句点。因此，我的第一个问题是如何在项目中将Typescript与现有的命名空间一起使用？这些命名空间被简单地定义为

var Company = Company || {};
Company.Views = Company.Views || {};

我的第二个问题更一般。展望未来，Typescript可以轻松地与现有的项目集成，其中一切都是用标准javascript定义的吗？我真的不确定如何访问我的任何非Typescript类对象。提前谢谢。

编辑:尝试与现有Javascript对象集成

declare module Company.Views {
    export class MyNewRouter extends Company.BaseRouter {
      // It does not recognize Company.BaseRouter
    }
}

Answer 1

Typescript有模块的概念。模块实际上等同于Company || {}。

因此，您可以执行以下操作：

module Company{
    export module Views{
        export function MyNewView(){
            return <any>Backbone.View.extend({ });
        }
    }
}

它编译成：

var Company;
(function (Company) {
    (function (Views) {
        function MyNewView() {
            return Backbone.View.extend({
            });
        }
        Views.MyNewView = MyNewView;
    })(Company.Views || (Company.Views = {}));
    var Views = Company.Views;
})(Company || (Company = {}));

更简单的示例

下面是打字稿：

module Company{
    // You need to do at least one export 
    // for compiler to generate any code
    export var foo = 123;
}

生成：

var Company;
(function (Company) {
    Company.foo = 123;
})(Company || (Company = {}));

用于集成现有JS的

您需要为typescript创建声明以了解您的Js。Js并不关心您是否在一个文件中声明变量，然后在另一个文件中使用它。TypeScript需要这样做，因为它需要进行编译时检查。

最简单的声明是：

declare var SomeJSStuff:any; 

你可以使用build up from there。

Answer 2

对于第二部分，下面是你应该如何做的：

// Declare your JS stuff
declare module Company {
    export class BaseRouter {
        // Additionally declare any memebers of BaseRouter
        // e.g:
        someProp:number; 
    }
}

// Now use your JS Stuff in typescript 
module Company.Views {
    export class MyNewRouter extends Company.BaseRouter {
      // It recognizes Company.BaseRouter
    }
}