Typescript、Browserify 和 angularjs 超越两个文件示例

Question

我正在尝试将一个用 typescript 编写的非常大的 angularjs 项目从 AMD 转移到 CommonJS。 我在网上找到了几个示例，但找不到一个可以涵盖结合这三个的实际项目的示例。

短版： 如果我删除了 TS 模块，那么我找不到在其他文件中使用接口的方法，除非每个文件声明一个。 如果我保留 TS 模块，那么使用导出的项目会变得很麻烦，因为我需要声明 require，然后在模块本身内访问整个 TS 模块命名空间。

加长版： 到目前为止，我一直在使用 typescript 模块系统，我很高兴它的工作方式。据我了解，在使用 browserify 时没有必要使用 ts 模块系统，因为您在使用它们之前需要应用程序的特定部分，并且使用污染全局范围的东西不会那么透明（我得到这个正确吗？）。如果我从打字稿模块中删除所有内容并在蛇页控制器.ts中有代码，例如：

'use strict';

interface ISnakePageController {
    isLoggedInUser: boolean;
}

class SnakePageController implements ISnakePageController {
    public isLoggedInUser:boolean = false;

    static className:string = 'SnakePageController';
    static $inject:string[] = [];

    constructor() {
        console.log('snake controller created.');
    }
}

export = SnakePageController;

然后我可以从 index.ts 文件中使用这个控制器，例如：

/// <reference path="../../typings/angularjs/angular.d.ts" />
'use strict';

import angular = require('angular');
import directives = require('./directives');
import snakeController = require('./snake-page-controller');

var snakeModule:ng.IModule = angular.module('mike.snake', [
    directives.name
])
.controller(snakeController.className, snakeController);

export = snakeModule;

然后一切正常，但是，

1. 我不能再将 export 关键字放在接口前面，因为编译器抱怨每个文件有多个导出。那么如何在声明它的文件之外使用这个接口呢？我是否必须为每个接口创建单独的文件并要求这样做（这看起来很尴尬）？

2. 如果 index.ts 是用 JS 写的，我可以写：

   angular.module('mike.snake', [ 要求（'./directives'）.name ]

内联。但是，如果我在 TS 中编写此代码，编译器会向 TS2304 抱怨：找不到名称“require”。这可能看起来很烦人，但我希望能够内联键入所需的模块，而不必导入它们并在两个不同的地方使用它们。

遇到上述困难并且不必为必须从 10 多个文件中删除 TS 模块代码而疯狂，我尝试坚持使用 typescript 模块系统并使其与 browserify 模块系统配合得很好，但是...

将蛇页面控制器写成这样：

'use strict';
export module Mike.Snake {
    export interface ISnakePageController {
        isLoggedInUser: boolean;
    }

    export class SnakePageController implements ISnakePageController {
        public isLoggedInUser:boolean = false;

        static className:string = 'SnakePageController';
        static $inject:string[] = [];

        constructor() {
            console.log('snake controller created.');
        }
    }
}

我可以访问文件外部的类和接口，但即使在同一个模块内，我也必须深入了解整个模块命名空间：即。

//part of index.ts which is in the same TS module with SnakePageController
.controller(snakeController.Mike.Snake.SnakePageController.className, snakeController.Mike.Snake.SnakePageController);

那里有完整的 typescript、angularjs 和 browserify 示例，我错过了吗？

Answer 1

我不能再把 export 关键字放在接口前面，因为编译器抱怨每个文件有多个导出

提示：不要使用export =。仅使用命名导出，然后您可以导出多个内容

那么我怎样才能在声明它的文件之外使用这个接口呢？

建议您将接口放在globals.d.ts 文件中。更多：http://basarat.gitbooks.io/typescript/content/docs/project/modules.html