Question

最近我一直在使用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）

任何帮助都会很棒，因为我们真的需要征服它并继续前进！：）

Answer 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

与在任何地方手动引用特定文件相比，此策略可以更好地扩展您的程序。

Answer 2

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

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

在此文件夹中，您可以创建模型，例如：

automobile.ts

export class Automobile {...}

car.ts

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

export class Car extends Automobile {...}

ferrari.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();

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

构成Type Script项目的多个文件

3 个答案: