构成 Type Script 项目的多个文件答案

【问题标题】：Multiple files making up Type Script project构成 Type Script 项目的多个文件
【发布时间】：2013-03-11 09:50:08
【问题描述】：

最近我一直在使用 TypeScript，一切都很好，我真的非常喜欢它。让 JavaScript 再次可用！ :)

我们尝试遵循与任何 .net 项目相同的想法，例如每个类/接口单个文件

module Infrastructure {
    export interface IBaseViewModel {
        addOrRemoveClass(selector: string, className: string);
    }
}

我们遇到的问题是——所有的依赖文件都没有被包含进来？当涉及到运行时。

如果您查看此文件，它是我们应用程序的主要入口点，我会在创建新 ViewModelBuilder 时收到未定义错误

module Infrastructure {
    export class Fusion {
        constructor() {
            this.vmBuilder = new ViewModelBuilder();
            this.setApplicationDefaults();
            this.start();
        }

        private vmBuilder: IViewModelBuilder;

        private start() {
            this.vmBuilder.process();
        }

        private setApplicationDefaults() {
            $.pnotify.defaults.styling = "jqueryui";
            $.pnotify.defaults.history = false;
            $.pnotify.defaults.auto_display = false;
        }
    }
}

在我们的文件顶部

/// <reference path="../Typings/jquery.d.ts" />
/// <reference path="ViewModelBuilder/ViewModelBuilder.ts" />
/// <reference path="ViewModelBuilder/IViewModelBuilder.ts" />

还有 ViewModelBuilder

module Infrastructure {

    export class ViewModelBuilder { }
}

所以问题是 - 最好的方法是什么？我们如何才能让其他类声明起作用？我们的项目将大幅增长，我们可能有 100 个视图模型来代表每个视图（该项目是从 Windows 窗体到 Web 的转换）

任何帮助都会很棒，因为我们真的需要克服这一点并继续前进！ :)

【问题讨论】：

标签： javascript typescript

【解决方案1】：

我写了关于 getting the right set up for TypeScript 的文章，其中的一个想法会对你有所帮助 - 我最初是从 Mark Rendle 那里得到这个想法的。

这个想法是创建一个名为references.ts 的文件，并在其中列出所有依赖项。有点像这样：

/// <reference path="modulea.ts" />
/// <reference path="moduleb.ts" />
/// <reference path="modulec.ts" />
/// <reference path="moduled.ts" />
/// <reference path="modulee.ts" />

然后，您可以在所有 TypeScript 文件的顶部简单地引用此文件：

/// <reference path="references.ts" />
module ModuleA {
    export class MyClass {
        doSomething() {
            return 'Hello';
        }
        tester() {
            var x = new ModuleB.MyClass();
        }
    }
}

references.ts 文件的作用类似于 .NET 项目的 References 文件夹。

另一个非常适合此设置的建议是使用--out 标志编译单个JavaScript 文件，以app.ts 开头。 TypeScript 编译器会遍历所有依赖项并为所有生成的 JavaScript 计算出正确的顺序。

tsc --out final.js app.ts

与在任何地方手动引用特定文件相比，此策略将更好地适应您的程序。

【讨论】：

这似乎是个好主意，并且非常适合发布，这将如何用于调试和源映射？
我会举手说“我不使用源映射”——我对生成的 JavaScript 非常满意，所以我直接调试它。我相信源映射旨在处理单个文件而不是final.js
源地图应该使用--out-made 文件（我强调“应该”，因为这个功能还没有完全稳定）。
@RyanCavanaugh 你认为史蒂夫的这个解决方案可以接受吗？我们希望尽快完成这项工作。源映射对我们调试非常重要..
是的，Steve 的解决方案通常是我们尝试使用的。我认为这是正确的方法。

【解决方案2】：

如果您像我一样来自 C++/C 背景并且错过了 .h（或 .hpp）文件，我有办法。而且您不必更改编译器标志，或使用 /// 或任何东西。只是简单的 .ts 文件，导入、导出。

您创建一个文件夹，将其命名为“models”

在这个文件夹中，你可以创建你的模型，比如：

automobile.ts

export class Automobile {...}

汽车.ts

import { Automobile } from './automobile.ts';

export class Car extends Automobile {...}

法拉利.ts

import { Automobile } from './automobile.ts';
import { Car } from './car.ts';

export class Ferrari extends Car {...}

然后是魔术头文件！

你在同一个文件夹中创建一个名为 models.ts 的文件（可以是 header.ts，随便）

export { Automobile } from './automobile.ts';
export { Car } from './car.ts';    
export { Ferrari } from './ferrari.ts';

现在，在您的其他文件中，导入您的所有模型

import * as x from 'src/app/models/models';

并愉快地使用

let myCar: x.Car = new x.Car();
let myFerrari: x.Ferrari = new x.Ferrari();

【讨论】：

【解决方案3】：

这里有两个选项，commonjs 或 AMD（异步模块加载）。
使用 commonjs，您需要放置一个

<script type="text/javascript" src="lib/jquery-1.7.2.js"></script>

在您的 html 页面中为您的项目中的每个单独的 javascript 文件。
显然，这会变得非常乏味，尤其是当您的项目中有数百个文件时。
或者，正如 Steve Fenton 指出的那样，您可以使用 --out 参数将各种文件编译成一个文件，然后在您的 html 页面中仅引用这个文件。

使用 AMD 是第三种选择 - 您只需在 html 页面中包含一个脚本标签，AMD 会负责引用。
看看我的博客如何让它工作：http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/

【讨论】：