CODEWITHSUNDEEP
angularjstypescriptcommonjssystemjs
pocesar
pocesar

Reputation: 7050

How to make it possible to use Typescript with SystemJS and Angular?

I'm trying to make SystemJS work with Typescript, but they seem to conflict with each other.

How can I take advantage of the autoloading from System.js without it conflicting with keywords on Typescript? using import / require makes Typescript using it's own way for loading and referencing files, although it translates export as module.exports = ..., it doesn't do the same for import

Is it possible at all to achieve this or I'll have to wait for Typescript to support ES6 keywords?

Upvotes: 9

Views: 6669

Answers (3)

Micah Zoltu
Micah Zoltu

Reputation: 7432

TypeScript 1.5 adds support for compiling to ES5 SystemJS module syntax.

Author a class like:

export class Foo {}

Then compile with

tsc --module system foo.ts

The result will be an ES5 module using the SystemJS format.

Upvotes: 6

Dan
Dan

Reputation: 2858

you can see here the way I did it with traceur instead of Typescript, but it should work pretty much the same with Typescript, I'll add ts as soon as I can play again with it.

NOTE:Is more of self-reminder or a playground than a proper seed

As Steve mentioned the strongest point of SystemJs is that you can use almost any module definition , the loader should detect the module format, I personally prefer to declare the modules as in 

define([deps...],(deps..){
    // ...
})

I find it to be like constructor injection pattern from other languages and frameworks and it always translates to the same Javascript, beacuse it is Javascript , beautified with class and arrow functions (+anotated with types the case Typescript).

Also choosing amd shown clearly asynchronous intentions, that would be honor anyway if you choose lets say ES6 module syntax, beacuse the code after the import sentence will only executed when the dependencies have finished loading. pretty much like the async keyword it feels a little too cryptic for the non initiated

BTW: and OutOFcontext: Cheers from SA / JHB to the amazing work of SystemJS dev Mr. Bedford

Upvotes: 0

Fenton
Fenton

Reputation: 250932

In TypeScript, you would write the following import statement...

import dep = require('dep');

console.log(dep);

When you compile, you pass the module flag:

tsc --module commonjs app.ts

This tells TypeScript to target CommonJS style modules (it can also target AMD if needed - SystemJS supports both styles of syntax).

The output looks like this:

var dep = require('dep');

console.log(dep);

This output is analogous to the following example from the SystemJS documentation.

// library resource
var $ = require('jquery'); // -> /lib/jquery.js

// format detected automatically
console.log('loaded CommonJS');

If you need more help, you can ask a question and include specific examples that demonstrate the issue and we will be able to give more specific advice.

Upvotes: 2

Related Questions