JSPM with SystemJS, ES6, AngularJS, TypeScript and ASP.NET Core – Part 2 [TypeScript]

Note: in these series I’m using some UNIX commands like touch and mkdir. If you’re using Windows, those commands can be ran if you’re using cmder, the appropriate related command for Windows or creating files and folders using the GUI.


Prerequisites

Part 1

In the first part of this series we learned how to setup the project. Now we’re going to adapt our project to work mainly with TypeScript. It’s just some minor configurations for organization purposes.


 

Part 2 – Using TypeScript as our main codebase

The first thing we do is add this bit of code to our jspm.config.js:

typescriptOptions: {
    target: 'es6',
    module: 'system',
    sourceMap: true,
    experimentalDecorators: true,
    emitDecoratorMetadata: true
  },

This is the result:

You can find information for each compiler flag here. Now, we’re going to change our lines from 11 to 18 to look like:

    "src/app": {
      "main": "index",
      "defaultExtension": "ts",
      "meta": {
        "*.ts": {
          "loader": "plugin-typescript",
          "format": "es6"
        }
      }
    }

As you can see, we changed the folder our module files reside and we also changed the extension of our files to .ts. After you’re done with this remove the app.js file and create a folder inside src named app (mkdir app) and then inside the folder app create a file named index.ts by running the command touch index.ts. This is what our new project structure looks like:

 

Now let’s add the following code to our index.ts file:

[code lang=”js”]

‘use strict’
import ‘angular’;

let container = document.getElementById(‘container’);
container.innerHTML = ‘Ahoy, TypeScript!’;

[/code]

On our index.html file we change the SystemJS.import('app.js'); to SystemJS.import('src/app');.

Then run http-server on your root folder and access http://localhost:8080. This should be the result:

 

Now we are running TypeScript and also importing AngularJS (as you can see on the network tab). Now let’s try to run an example from TypeScript’s website (we’re going to use the classic Hello World! example). Change your index.ts file to look like:

[code lang=”js”]
class Greeter {
constructor(public greeting: string) { }
greet() {
return "<h1>" + this.greeting + "</h1>";
}
};

var greeter = new Greeter("Hello, world!");

document.body.innerHTML = greeter.greet();[/code]

After running the site again, this should be the output:

 

And that’s it for part 2! Now we have a fully operational frontend project working with JSPM, SystemJS, AngularJS and TypeScript. For our next part we’re going to create an ASP.NET Core project that’ll be our backend.

RedBeard on GitHub

Stay tuned!

 




Leave a Reply

Your email address will not be published. Required fields are marked *