# TypeScript to JavaScript
# 从 TypeScript 到 JavaScript
## Introduction
## 简介
Anything you can do with Angular in _TypeScript_, you can also do
in JavaScript. Translating from one language to the other is mostly a
matter of changing the way you organize your code and access Angular APIs.
在 Angular 中，_TypeScript_ 可以做的任何事，也可以用 JavaScript 实现。
将一种语言翻译成另一种语言，主要是改变了组织代码和访问 Angular API 的方式。
_TypeScript_ is a popular language option for Angular development.
Most code examples on the Internet as well as on this site are written in _TypeScript_.
This cookbook contains recipes for translating _TypeScript_
code examples to _ES6_ and to _ES5_ so that JavaScript developers
can read and write Angular apps in their preferred dialect.
`TypeScript` 在 Angular 开发中比较流行。
互联网上和本网站中的大多数范例都是用 `TypeScript` 写的。
这本烹饪宝典会教你如何把 `TypeScript` 代码的例子翻译成 `ES6` 和 `ES5` 以便 JavaScript 的开发者可以用自己喜欢的语言来写 Angular 应用。
Run and compare the live TypeScript and JavaScript
code shown in this cookbook.
运行并比较本章显示的在线例子的 TypeScript 版和 JavaScript 版。
## _TypeScript_ to _ES6_ to _ES5_
## 从_TypeScript_ 到 _ES6_ 到 _ES5_
_TypeScript_
is a typed superset of _ES6 JavaScript_.
_ES6 JavaScript_ is a superset of _ES5 JavaScript_. _ES5_ is the kind of JavaScript that runs natively in all modern browsers.
The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features.
_TypeScript_ 是 _ES6 JavaScript_ 类型化的超集。_ES6 JavaScript_ 是 _ES5 JavaScript_ 的超集。_ES5_ 是可以在所有现代浏览器中运行的 JavaScript。
The downgrade progression is as follows:
降级的过程是
* _TypeScript_ to _ES6-with-decorators_.
_TypeScript_ 降级到 _带装饰器的 ES6_。
* _ES6-with-decorators_ to _ES6-without-decorators_ ("_plain ES6_").
_带装饰器的 ES6_ 降级到 _没有装饰器的 ES6_ (“_普通 ES6_”)。
* _ES6-without-decorators_ to _ES5_.
_没有装饰器的 ES6_ 降级到 _ES5_。
When translating from _TypeScript_ to _ES6-with-decorators_, remove
[class property access modifiers](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)
such as `public` and `private`.
Remove most of the
[type declarations](https://www.typescriptlang.org/docs/handbook/basic-types.html),
such as `:string` and `:boolean`
but **keep the constructor parameter types, which are used for dependency injection**.
_TypeScript_ 翻译到 _带装饰器的 ES6_ 时，移除了[类属性访问修饰符](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)，如`public`和`private`。
移除了大部分的[类型声明](https://www.typescriptlang.org/docs/handbook/basic-types.html)，如`:string`和`:boolean`。
但**保留了用于依赖注入的构造函数参数类型**。
From _ES6-with-decorators_ to _plain ES6_, remove all
[decorators](https://www.typescriptlang.org/docs/handbook/decorators.html)
and the remaining types.
You must declare properties in the class constructor (`this.title = '...'`) rather than in the body of the class.
_带装饰器的 ES6_ 翻译到_普通 ES6_ 时，移除了所有的[装饰器](https://www.typescriptlang.org/docs/handbook/decorators.html)和剩下的类型。
必须在构造函数中声明属性（`this.title = '...'`），而不是在类的代码体中。
Finally, from _plain ES6_ to _ES5_, the main missing features are `import`
statements and `class` declarations.
最后，_普通 ES6_ 翻译成 _ES5_，缺少的主要特性是`import`和`class`声明。
For _plain ES6_ transpilation you can _start_ with a setup similar to the
[_TypeScript_ quickstart](https://github.com/angular/quickstart) and adjust the application code accordingly.
Transpile with [Babel](https://babeljs.io/) using the `es2015` preset.
To use decorators and annotations with Babel, install the
[`angular2`](https://github.com/shuhei/babel-plugin-angular2-annotations) preset as well.
对_普通 ES6_ 的翻译，可以从类似 [_TypeScript_ 快速开始](https://github.com/angular/quickstart)的设置开始，
调整相应代码。然后用 [Babel](https://babeljs.io/) 进行转译，使用`es2015`预设值。
要在 Babel 中使用装饰器和注释，还需安装[`angular2`](https://github.com/shuhei/babel-plugin-angular2-annotations)预设值。
{@a modularity}
## Importing and Exporting
## 导入和导出
### Importing Angular Code
### 导入 Angular 代码
In both _TypeScript_ and _ES6_, you import Angular classes, functions, and other members with _ES6_ `import` statements.
在 _TypeScript_ 和 _ES6_ 中，可以使用 _ES6_ `import`语句导入 Angular 类、函数和其它成员。
In _ES5_, you access the Angular entities of the [the Angular packages](guide/glossary#scoped-package)
through the global `ng` object.
Anything you can import from `@angular` is a nested member of this `ng` object:
在 _ES5_ 中，通过全局`ng`对象访问 [Angular 包](guide/glossary#scoped-package)中的 Angular 实体。
凡是可以从`@angular`导入的，都是该`ng`对象的嵌套成员。
### Exporting application code
### 导出应用代码
Each file in a _TypeScript_ or _ES6_ Angular application constitutes an _ES6_ module.
When you want to make something available to other modules, you `export` it.
_TypeScript_ 或 _ES6_ Angular 应用中每个文件都构成一个 _ES6_ 模块。
当想要让某个东西对其它模块可用时，就`export`它。
_ES5_ lacks native support for modules.
In an Angular _ES5_ application, you load each file manually by adding a `