多个文件组成类型脚本项目

Multiple files making up Type Script project

本文关键字：类型 脚本 项目 文件      更新时间：2023-09-26

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

任何帮助都会很棒，因为我们真的需要克服这个问题并继续前进!:)

我写了一篇关于如何正确设置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
这个策略比手动在任何地方引用特定的文件更适合你的程序。

如果你像我一样来自c++/C背景，并且错过了。h(或。hpp)文件，我有一个方法。你不需要改变编译器标志，或者使用///，或者任何东西。只是简单的。ts文件，导入，导出。

创建一个文件夹，命名为models

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

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的文件。可以是header。t之类的)放在同一个文件夹里，你只要输入

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

这里有两个选项，要么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/

相关文章：