Using jspm with TypeScript

Question

Is it possible to combine jspm with TypeScript and the TypeScript module system?

I couldn't find documentation or samples of this.

Answer 1

Update - v1.5

SystemJS has been added as a module kind for TypeScript, so you should be able to use SystemJS out of the box and compile with the module flag:

tsc --module system app.ts

This was added alongside the ES6 module importing syntax, so you should be able to use that style and have it compiled to what you need.

import * as $ from "jquery";

Original Answer

If you are using the SystemJS syntax, you can declare the parts you need like this:

systemjs.d.ts

interface System {
    then: (cb: Function) => void;
}

interface SystemStatic {
    import: (name: string) => System;
}

declare var System: SystemStatic;

export = System;

You should then be able to use it like this:

/// <reference path="jquery.d.ts" />

import System = require('systemjs');

System.import('jquery').then(($: JQueryStatic) => {
    $('#id').html('Hello world');
});

Answer 2

Update Feb. 2016: As requested by Abhishek Prakash, I've setup an example repository on GitHub. Feel free to play with the sources and see how the typescript and jspm workflow works.

---

As I wanted to try out TypeScript (referencing version 1.5 here) to work together with AngularJS and jspm, I couldn't find any solution, but stumbled over this question and Steve's answer, but I still couldn't make it working with that information. So I tried a lot of things on my own and finally made it working. So here is some example on how to use TypeScript with jspm in an AngularJS environment:

At first, install AngularJS with jspm with

jspm install angular

Then install the DefinitelyTyped definition files with tsd or by hand. Now you can import AngularJS with the ES6 syntax:

/// <reference path="typings/angularjs/angular.d.ts" />

import * as angular from 'angular';

A quick note, as this got me crazy at the first tries: You will need both, a correct path to angular and the type definitions! If one of both is missing (for me, I didn't include the reference line), the tsc will throw

error TS2307: Cannot find module 'angular'.

That is hard to debug, as I always thought, it couldn't find the module, but I just missed the definition reference. So just make sure you always have the correct definitions present for everything you're trying to import!

Then compile your TypeScript using tsc --module system app.ts, whereas the value for module may be commonjs, amd, system or umd. Please choose the module system you want to use in your environment! There is no need to use system for SystemJS. The TypeScript compiler will only wrap the specific selected module "template" around your code (or better said create a module of the specified module type), so it can be loaded with SystemJS later (when using --module system).

In my case, for a browser AngularJS environment I selected amd (using system did not work, as the es6-module-loader from SystemJS couldn't load the files that way... I don't know why yet!).

Using the --module amd switch, I could easily import the compiled file with SystemJS inside my page's HTML code using:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
    System.import('src/app');
</script>

Hope this will help someone that is left alone in the documentation, like I was.