JSPM + TYPESCRIPT + REACTJS in ES2015 (ES6)

Preparations:

1) Install nodejs for your plattform, with it you get npm the node package manager.

2) >npm install typescript -g    (you may have to use sudo to install global packages)

3) >npm install tsd -g     (this is the typescript definition tool/manager)

4) >npm install serve -g (a simple fast http server to serve the page when done)

Create the app. The code is here or on github . 

Create a folder, change into it.

>npm init  (choose the defaults)

>npm install jspm --save-dev

Capture3

>jspm init

Capture2

Follow the prompts and choose the defaults, except when asked for which transpiler, choose typescript.

>jspm install react react-dom

... output looks something like this (much longer though):

Capture5

Now install typescript definition files for these react packages.

>tsd init

Capture6

>tsd install react react-dom --save

Capture7

Create an index.html file and add these lines, wordpress will not let me insert html as raw text here so you could copy it from the source files here .

Capture

save the file.

Create a folder called 'app' and change into it; create a file called main.tsx, this is the jsx typescript file type. Typescript can transpile jsx expressions and also statically type these. Wow!!! ...insert these lines, get them as text from here:

Capture2

Create a file called tsconfig.json, this is the file that configures the typescript compiler, enter this json:

{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"isolatedModules": false,
"jsx": "react",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": false,
"noImplicitAny": false,
"removeComments": true,
"noLib": false,
"preserveConstEnums": true,
"suppressImplicitAnyIndexErrors": true
},
"filesGlob": [
"**/*.ts",
"**/*.tsx",
"!node_modules/**"
],
"files": [
"main.tsx"
],
"exclude": []
}

Run the typescript compiler from the app folder,

>tsc --watch

Capture8

This compiles your tsx into javascript (js). You can open a second command shell into the root folder where the index.html is and serve your page by typing

>serve

Capture9

Open a web browser and go to localhost:3000

In the tsconfig.json you can change the

"target": "es5",

to "es6" and remove the "module": "system" altogether. When transpiled the output will be ES6/ES2015, which you can currently open with most modern browsers. Support for ES2015 syntax varies, not everything is so far supported. For details check this page.

If you find, you want to use another javascript library like, lets say lodash, just run these two commands

>jspm install lodash

>tsd install lodash --save

then in your code use

import * as _ from 'lodash';

As tooling I can suggest atom and the truly beautiful typescript plugin from Basarat Ali Syed. It will give you 'compile on save' and so many more great features. It will also create the tsconfig.json for you.

atomts