typescript 组成 Type Script 项目的多个文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15335474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple files making up Type Script project
提问by Steoates
Recently I have been working with TypeScript and everything has been fine and I really, really like it.. Makes JavaScript workable again! :)
最近我一直在使用 TypeScript，一切都很好，我真的非常喜欢它......让 JavaScript 再次可用！:)
we have tried to follow the same idea as we would behind any .net project e.g single file per class/interface
我们试图遵循与我们在任何 .net 项目背后相同的想法，例如每个类/接口的单个文件
module Infrastructure {
export interface IBaseViewModel {
addOrRemoveClass(selector: string, className: string);
}
}
the problem we have come across is this - all the dependent files are not being included? when it comes to being run.
我们遇到的问题是 - 没有包含所有依赖文件？当谈到运行。
If you look at this file which is the main entry point to our application, I get an undefined error on creating a new ViewModelBuilder
如果您查看这个文件，它是我们应用程序的主要入口点，我会在创建新的 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;
}
}
}
and at the top of the file we have
在文件的顶部我们有
/// <reference path="../Typings/jquery.d.ts" />
/// <reference path="ViewModelBuilder/ViewModelBuilder.ts" />
/// <reference path="ViewModelBuilder/IViewModelBuilder.ts" />
also ViewModelBuilder
还有 ViewModelBuilder
module Infrastructure {
export class ViewModelBuilder { }
}
So the question is this - What is the best way to go on? how can we get other class declarations to work?our project is going to grow considerably we probably 100 view models which will represent each view (the project is a conversion from windows forms to web)
所以问题是 - 最好的方法是什么？我们如何才能使其他类声明起作用？我们的项目将大幅增长我们可能有 100 个视图模型来代表每个视图（该项目是从 windows 窗体到 web 的转换）
Any help would be fantastic as we really need to conquer this and move on! :)
任何帮助都会很棒，因为我们真的需要克服它并继续前进！:)
回答by Fenton
I wrote about getting the right set up for TypeScriptand one of the ideas in there will help you - I originally got the idea from Mark Rendle.
我写过关于为 TypeScript 进行正确设置的文章，其中的一个想法会对您有所帮助 - 我最初是从 Mark Rendle 那里得到这个想法的。
The idea is that create a file named references.tsand have all of your dependencies listed in there. A bit like this:
这个想法是创建一个命名的文件，references.ts并在其中列出所有依赖项。有点像这样：
/// <reference path="modulea.ts" />
/// <reference path="moduleb.ts" />
/// <reference path="modulec.ts" />
/// <reference path="moduled.ts" />
/// <reference path="modulee.ts" />
You can then simply reference this file at the top of all your TypeScript files:
然后，您可以在所有 TypeScript 文件的顶部简单地引用此文件：
/// <reference path="references.ts" />
module ModuleA {
export class MyClass {
doSomething() {
return 'Hello';
}
tester() {
var x = new ModuleB.MyClass();
}
}
}
The references.tsfile acts like the References folder you have for a .NET project.
该references.ts文件的作用类似于 .NET 项目的 References 文件夹。
The other recommendation, which works quite well with this set up, is to use the --outflag to compile a single JavaScript file, starting with app.ts. The TypeScript compiler walks all the dependencies and works out the correct order for all the generated JavaScript.
与此设置配合得很好的另一个建议是使用该--out标志来编译单个 JavaScript 文件，以 .js 开头app.ts。TypeScript 编译器遍历所有依赖项并为所有生成的 JavaScript 计算出正确的顺序。
tsc --out final.js app.ts
This strategy will scale with your program much better than manually referencing specific files everywhere.
与在任何地方手动引用特定文件相比，此策略将更适合您的程序。
回答by Emilio Maciel
If you come like me from a C++ / C background and miss the .h (or .hpp) files, I have a way. And you don't have to change compiler flags, or use ///, or anything. Just plain simple .ts files, import, export.
如果你像我一样来自 C++/C 背景并且错过了 .h（或 .hpp）文件，我有办法。而且您不必更改编译器标志，或使用 /// 或其他任何东西。只是简单的 .ts 文件，导入、导出。
You create a folder, name it "models"
您创建一个文件夹，将其命名为“models”
In this folder, you can create your models, say:
在此文件夹中，您可以创建模型，例如：
automobile.ts
汽车.ts
export class Automobile {...}
car.ts
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 {...}
and then the magic - header files!
然后是神奇的 - 头文件！
you create a file called models.ts (could be header.ts, whatever) in the same folder, where you just do
您在同一文件夹中创建了一个名为 models.ts（可以是 header.ts，随便什么）的文件，您只需在其中执行
export { Automobile } from './automobile.ts';
export { Car } from './car.ts';
export { Ferrari } from './ferrari.ts';
now, in your other files, to import all your models
现在，在您的其他文件中，导入您的所有模型
import * as x from 'src/app/models/models';
and be happy using
并乐于使用
let myCar: x.Car = new x.Car();
let myFerrari: x.Ferrari = new x.Ferrari();
回答by blorkfish
You have two options here, either commonjs, or AMD (asynchronous module loading).
Using commonjs, you will need to place a
您在这里有两个选择，commonjs 或 AMD（异步模块加载）。
使用 commonjs，你需要放置一个
<script type="text/javascript" src="lib/jquery-1.7.2.js"></script>
for each separate javascript file in your project in your html page.
Obviously this can become very tedious, especially if you have hundreds of files in your project.
Alternatively, as Steve Fenton pointed out, you can use the --out parameter to compile various files into a single file, and then reference just this single file in your html page.
对于 html 页面中项目中的每个单独的 javascript 文件。
显然，这会变得非常乏味，尤其是当您的项目中有数百个文件时。
或者，正如 Steve Fenton 指出的那样，您可以使用 --out 参数将各种文件编译成一个文件，然后在您的 html 页面中只引用这个文件。
Using AMD is the third option - where you only need to include one script tag in your html page, and AMD takes care of references.
Have a look at my blog on how to get this working : http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/
使用 AMD 是第三种选择——您只需要在 html 页面中包含一个脚本标签，AMD 负责处理引用。
看看我的博客如何让这个工作：http: //blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/
