I was going through Angular2 quickstart tutorial with Javascript and Typescript as well, In javascript version I observed that ponents and modules are first assigned to a variable (window.app which I understood as some global variable that can be accessed across js files or script blocks) and that is fine. Coming to type script version just export and import were used, I tried to analyze the generated javascript code but understood nothing. Can some one explain me how this export and import works in Tyepescript.

I was going through Angular2 quickstart tutorial with Javascript and Typescript as well, In javascript version I observed that ponents and modules are first assigned to a variable (window.app which I understood as some global variable that can be accessed across js files or script blocks) and that is fine. Coming to type script version just export and import were used, I tried to analyze the generated javascript code but understood nothing. Can some one explain me how this export and import works in Tyepescript.

• javascript
• angular
• typescript

• it all depends on the module system you are using. I would suggest you read about javascript modules and the state of them in ES2015. :) – toskv Commented Jan 25, 2017 at 18:57

1 Answer 1

Import and export in typescript are explained well by the documentation here https://www.typescriptlang/docs/handbook/modules.html.

Like toskv said in his ment, how those statements in your TypeScript files get transpiled into statements in your JavaScript files depends largely on the module system you set up in your tsconfig.json file.

For example, setting "module": "monjs" will cause the TypeScript piler (tsc) to transform your import/export statements into essentially node.js-style require() statements. This documentation has a few simple, but helpful, examples of how node.js modules work: https://nodejs/api/modules.html.

Using a setting of "systemjs" instead of "monjs" will make TypeScript translate your import/export statements into a format that SystemJS understands, of which I am no expert.

This process is further plicated by the fact that Angular 2 projects also require build steps that take the transpiled JavaScript files and turn them into packaged "bundles." These bundled files are (depending on your configuration settings) concatenated, minified, and perhaps even uglified. So looking at the final javascript code that is run is really not helpful, as it was not written by humans.

For example, the Webpack build system (google webpack.js) takes require() statements it finds in JavaScript code and does some magic to wrap each module in its own __webpack_require__ function, which allows the build system to take your whole project file structure and bundle it in to one or several JavaScript files which still maintain their dependencies on each other.

In other words, by the time you look at the production JavaScript code, it's not meant to be intelligible by human readers. The flow can be simply represented by TS Source Code > TS Transpilation into JS Code > Module/Dependency Build Steps into Production JS Code.

TL;DR TypeScript doesn't actually handle the module importing/exporting. During transpilation, it converts those statements into statements other module systems (node.js or SystemJS) can understand, which are in turn converted into production code for serving an Angular 2 application.