CODEWITHSUNDEEP
javascriptangulartypescript
user2802557
user2802557

Reputation: 805

Angular2 with TypeScript: how does exporting work?

I have been going through the Angular2 tutorial https://angular.io/docs/ts/latest/tutorial/ . I have cloned the code to it from https://github.com/johnpapa/angular2-tour-of-heroes

I am trying to understand how the TypeScript is working. When you export a function in TypeScript, say called 'fnc', I see in the js file that gets generated this is the equivalent to doing exports.fnc = fnc.

This is a Node thing to export JavaScript in this way so how does this code then work on the frontend when running in a browser and not Node? Is there another package that has to be installed therefore to use TypeScript on the frontend that are then also changing these js files that generated again.

When I look at the code in the Developer Tools I see it has now been wrapped in a

    (function(System, SystemJS) {(function(require, exports, module, __filename, __dirname, global, GLOBAL) {"use strict"
    ...
    }).apply(__cjsWrapper.exports, __cjsWrapper.args);
    })(System, System);

What has changed the code to look like this. Is this a TypeScript specific thing that has been done here or something specific in just the Angular application I have used?

Lastly, to incorporate JavaScript modules into my application that is not TypeScript, is the right thing to do just put export.something = something for everything I want to export?

Upvotes: 1

Views: 200

Answers (2)

Lindsey
Lindsey

Reputation: 451

The wrapping you are seeing is not related to Typescript. Your script was loaded by SystemJS, and was wrapped before presenting it to the browser. You can see this in the SystemJS function for getSource:

  return (wrap ? '(function(System, SystemJS) {' : '') + source + (wrap ? '\n})(System, System);' : '')
  // adds the sourceURL comment if not already present
  + (source.substr(lastLineIndex, 15) != '\n//# sourceURL='
    ? '\n//# sourceURL=' + address + (sourceMap ? '!transpiled' : '') : '')
  // add sourceMappingURL if load.metadata.sourceMap is set
  + (sourceMap && inlineSourceMap(sourceMap) || '');

To your question about how CommonJS modules can be loaded by the browser, that's a feature of SystemJS. The call to apply at the end is specific to CommonJS module handling:

case 'cjs':
...
   source = cjsWrapper + ") {" + source.replace(hashBangRegEx, '') + "\n}).apply(__cjsWrapper.exports, __cjsWrapper.args);";

Upvotes: 0

Baruch
Baruch

Reputation: 2428

You might want to read TypeScript's docs. Here's a link to their modules page : https://www.typescriptlang.org/docs/handbook/modules.html.

TypeScript isn't readable by some browsers, so Angular 2's code needs to be compiled into browser readable code ( usually ES5 ). This is done through webpack, gulp, browserify, etc.. There are many different tools that allow for this transpiling.

I suggest that if you're working on a TypeScript application, don't try to use vanilla JavaScript along side TypeScript, compilers don't usually like this. But, to answer your question, in node you export using modules.exports https://nodejs.org/api/modules.html#modules_module_exports

Upvotes: 1

Related Questions