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

Debugging task runner tasks (like Gulp) with Visual Studio Code editor/debugger

You are writing JavaScript or any other compile to JavaScript language (TypeScript, CoffeeScript,…)

You are using gulp to automate your build process

If your build process doesn’t do what you want, it’s some times tedious to find out where the problem is. Mostly you can use console.log to see why things are not as you expect.

With Visual Studio Code you can use the build-in debugger to step into your gulp plugins to find out what’s wrong. Visual Studio Code is cross platform and runs on Linux, Mac OS and Windows.

Create a debug configuration (launch.json) that starts the gulp.js file from the node_modules folder.Untitled

Because the node_modules folder is inside your project you can open any js file from any plugin and set break points. Let’s say inside the gulp.js file, then click the run icon…Untitled

Above a break point at the start of the gulp.js file …

untitled2

… above a break point inside the gulpfile.js with variable inspection open…

Untitled

…and a break point inside a gulp plugin, in this case gulp-lintspaces/index.js. Variable inspection, call stack and other debugging features work as expected.

Untitled

Pretty sweet I would say.

Node.js debugger node-inspector used in windows

Debugging node.js code is easy using https://github.com/node-inspector/node-inspector.

For windows users the read me lists some fairly complex steps. I have been able to debug my nodejs code using node-inspector by just running a batch that contains these three start commands:

start "" /D"." node --debug-brk app.js
start "" /D"." node-inspector &
start chrome http://127.0.0.1:8080/debug?port=5858

You start this in the folder that contains the js file you are debugging (app.js in this case) and you have to install the node-inspector before you can start debugging by calling the npm command below.

npm install node-inspector

You also need chrome for this to work 🙂

screenshot

Here is a screen shot of the four involved windows:
the command prompt that starts the three processes,
the iojs or node window running the app,
the node-inspector process 
and the chrome dev tools sitting on a break point and showing some info in the watch window