# TypeScript to 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. _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. Run and compare the live TypeScript and JavaScript code shown in this cookbook. ## _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 as follows: * _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](guide/glossary#scoped-package) through the global `ng` object. Anything you can import from `@angular` is a nested member of this `ng` object: ### 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 `