@title TypeScript to JavaScript @intro Convert Angular TypeScript examples into ES6 and ES5 JavaScript. @description 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. _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. {@a toc} ## Table of contents [_TypeScript_ to _ES6_ to _ES5_](guide/ts-to-js#from-ts)
[Modularity: imports and exports](guide/ts-to-js#modularity)
[Classes and Class Metadata](guide/ts-to-js#class-metadata)
[_ES5_ DSL](guide/ts-to-js#dsl)
[Interfaces](guide/ts-to-js#interfaces)
[Input and Output Metadata](guide/ts-to-js#io-decorators)
[Dependency Injection](guide/ts-to-js#dependency-injection)
[Host Binding](guide/ts-to-js#host-binding)
[View and Child Decorators](guide/ts-to-js#view-child-decorators)
[AOT compilation in _TypeScript_ Only](guide/ts-to-js#aot)
**Run and compare the live _TypeScript_ and JavaScript code shown in this cookbook.** {@a from-ts} ## _TypeScript_ to _ES6_ to _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. The downgrade progression is * _TypeScript_ to _ES6-with-decorators_ * _ES6-with-decorators_ to _ES6-without-decorators_ ("_plain ES6_") * _ES6-without-decorators_ to _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**. 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. Finally, from _plain ES6_ to _ES5_, the main missing features are `import` statements and `class` declarations. 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. {@a modularity} ## Importing and Exporting ### Importing Angular Code In both _TypeScript_ and _ES6_, you import Angular classes, functions, and other members with _ES6_ `import` statements. In _ES5_, you access the Angular entities of the [the Angular packages](glossary) through the global `ng` object. Anything you can import from `@angular` is a nested member of this `ng` object: {@example 'cb-ts-to-js/ts/src/app/app.module.ts' region='ng2import'} {@example 'cb-ts-to-js/js-es6-decorators/src/app/app.module.es6' region='ng2import'} {@example 'cb-ts-to-js/js-es6/src/app/app.module.es6' region='ng2import'} {@example 'cb-ts-to-js/js/src/app/app.module.js' region='ng2import'} ### 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. _ES5_ lacks native support for modules. In an Angular _ES5_ application, you load each file manually by adding a `