Continuing with WebRx

In part 1 of this series I showed how to set up a project structure that allows you to start using WebRx from within Visual Studio. While fairly simple, the example provides a great illustration of you how WebRx allows you to separate your view and view model.

In this article I further develop the structure to allow you to develop your application using Typescript.

From 'app.js' to 'app.ts'

Previously we copied a chunk of JavaScript from the WebRx getting started guide into an app.js script that was directly used from within the index.html file. We now want to transpile the app.js script from a Typescript file so that we can further develop the application in a structured and type-safe manner.

To do this simply follow the following steps:

Delete the existing app.js file leaving the js folder empty.
Add and configure a TypeScript JSON Configuration File.

Add a TypeScript JSON Configuration File to the solution as shown below
Replace the node_modules exclusion with Scripts
By default Visual Studio (or, more acurately, the TypeScript transpiler) with pick up all ts files in the solution. As we don't want to attempt to re-transpile all the referenced typescript files we add Scripts to the exclusion list. Further, as we added a reference to WebRx via Nuget, our references are in the Scripts folder, not node_modules, so this exclusion can be removed.
Add an outDir setting to transpile to the js folder
This setting will force the TypeScript transpiler to output the transpiled JavaScript files to the js folder where they can be used by the client browser.

You should now have a tsconfig.json file that looks like this:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "js"
  },
  "exclude": [
    "Scripts",
    "wwwroot"
  ]
}

Add a ts folder to the solution.
Add an app.ts typescript file to the ts folder.

Add references to Rx and WebRx to the app.ts file.
WebRx requires that you add an explicit reference to rx.all.d.ts prior to the reference to web.rx.d.ts in order for the Rx module to be brought into scope. The references should therefore be added like this:
```
/// <reference path="../Scripts/rx.all.d.ts"/>
/// <reference path="../Scripts/typings/web.rx.d.ts" />
```
Implement view / view model code
You can now re-implement the code from app.js as TypeScript virtually verbatim but do note how you get Intellisense for all the methods and properties of wx module.
Fix compilation error with call to wx.applyBindings
The wx.applyBindings method requires a model parameter which, in JavaScript, is defaulted but in TypeScript causes a compilation error. To resolve this, simply pass an empty object to the method.

Your app.ts file should now look like this:

/// <reference path="../Scripts/rx.all.d.ts"/>
/// <reference path="../Scripts/typings/web.rx.d.ts" />

wx.app.component('hello', {
    viewModel: function () {
        this.firstName = 'Bart';
        this.lastName = 'Simpson';
    },
    template: 'The name is <span data-bind="text: firstName + \' \' + lastName"></span>'
});

wx.router.state({
    name: "$",
    views: { 'main': "hello" }
});

wx.router.reload();

wx.applyBindings({});

Compile the project and include the generated js/app.js and js/app.js.map files into the project.
Hit F5 and you should again see the message 'The name is Bart Simpson' displayed in your default browser.

Congratulations, you're now ready to develop your application using full Intellisense and in the comfort of the knowledge that the compiler (well, transpiler) will pick up any syntactic bugs you may inadvertently create.

As always, the completed source code for this post can be found in the BlogProjects repository on Github

WebRx and Typescript

Part 2 in the WebRx series

Continuing with WebRx

From 'app.js' to 'app.ts'