How to make it possible to use Typescript with Sys

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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