Performing in-browser transpilation with SystemJS

It can be often useful to be able to deliver TypeScript files directly to the browser and to defer the transpilation to JavaScript until then. While this method has performance drawbacks, it is extremely useful when prototyping and performing experimentations.

Note

The code, links, and a live example of this are available at http://ngcookbook.herokuapp.com/2283/.

Getting ready

Create an empty project directory and create the following package.json inside it:

[package.json] 
 
{ 
  "scripts": { 
    "lite-server": "lite-server" 
  }, 
  "devDependencies": { 
    "lite-server": "^2.2.2", 
    "systemjs": "^0.19.38", 
    "typescript": "^2.0.3" 
  } 
} 

Running npm install should get you ready to write code.

How to do it...

The TypeScript npm package comes bundled with a transpiler. When combined with SystemJS as the designated transpilation utility, this allows you to serve TypeScript files...