javascript - Typescript、Browserify 和 angularjs 超出两个文件示例

Question

我正在尝试将一个用 Typescript 编写的非常大的 AngularJS 项目从 AMD 迁移到 CommonJS。我在网上找到了几个示例，但找不到一个可以涵盖将这三者结合起来的真实项目的示例。

简短版本:如果我删除 TS 模块，那么除非为每个文件声明一个接口(interface)，否则我无法找到在其他文件中使用接口(interface)的方法。如果我保留 TS 模块，那么使用导出的项目就会变得很麻烦，因为我需要声明 require，然后甚至在模块本身内遍历整个 TS 模块命名空间。

长版:到目前为止，我一直在使用 typescript 模块系统，我很高兴它的工作方式。据我了解，在使用 browserify 时没有必要使用 ts 模块系统，因为在使用它们之前您需要应用程序的特定部分，并且使用污染全局范围的东西不会那么透明(我得到的正确吗？ ？)。如果我从 typescript 模块内部删除所有内容并在snake-page-controller.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文件中使用这个 Controller ，例如:

/// <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. 我不能再将导出关键字放在界面前面，因为编译器会提示每个文件有多个导出。那么如何在声明该接口(interface)的文件之外使用该接口(interface)呢？我是否必须为每个接口(interface)创建单独的文件并要求这样做(这看起来很尴尬)？

2. 如果index.ts是用JS编写的，我可以这样写:

   angular.module('mike.snake', [ require('./directives').name]

内联。但是如果我在 TS 中写这个，编译器会提示 TS2304: Cannot find name 'require'。这可能看起来只是一个烦恼，但我希望能够内联键入所需的模块，而不必导入它们并在两个不同的地方使用它们。

遇到上述困难，并且不想从 10 个文件中删除 TS 模块代码，我尝试坚持使用 typescript 模块系统并使其与 browserify 模块系统配合良好，但是......

蛇页面 Controller 的写法如下:

'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.');
        }
    }
}

我可以访问文件外部的类和接口(interface)，但即使在同一个模块内，我也必须深入整个模块 namespace :即。

//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

I can no longer put the export keyword in front of the interface since then the compiler complains about multiple exports per file

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

So how can I use this interface outside the file it was declared in?

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