24

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

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

4

3 回答 3

30

我写过关于正确设置 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

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

于 2013-03-11T10:16:39.683 回答
3

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

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

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

汽车.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();
于 2019-01-01T00:52:41.467 回答
-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/

于 2013-03-11T14:21:04.813 回答