@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_](#from-ts)
[Modularity: imports and exports](#modularity)
[Classes and Class Metadata](#class-metadata)
[_ES5_ DSL](#dsl)
[Interfaces](#interfaces)
[Input and Output Metadata](#io-decorators)
[Dependency Injection](#dependency-injection)
[Host Binding](#host-binding)
[View and Child Decorators](#view-child-decorators)
[AOT compilation in _TypeScript_ Only](#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.html#scoped-package) 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 `