Typescript - Update the TodoMVC sample to use with the backbone and the jquery DefinitelyTypes

Typescript 0.9.1.1 - Update the TodoMVC sample to use the backbone and the jquery DefinitelyTypes 

This blog I will explain how to update the TodoMVC to use with the backbone 0.2.6 and the jquery 0.3.6 DefinitelyTypes.
Since you've come this blog. I very sure that are new to typescript therefore I will go through step by step from the download to the modification of the  typescript and run it.

1. Install TypeScript for the Visual Studio 2012.

You can download the TypeScript for the VS Studio 2012 and 2013 here. It's about 11.9 M and it's a self setup file.  Once it downloaded, double click on the TypeScriptSetup0.9.1.1.exe to install it.

2. Create the TodoMVC TypeScript Project 

Open the the VS 2012 and select from the main menu File -> New-> Project ... The popup below appears and the project Name TSTodoMVC.  Then click the OK button.

By default, it creates a simple runnable sample project. you can run the sample by clicking on the

 play button to run it in the IExplorer browser. You could run it in a different browser by right click on the default.htm file then select the Browse With ... on the context menu.

3. Update the solution with original TodoMVC source code that you can find it here 

• Delete App.ts, the App.css and default.htm
• Create the css and  the js folfers.
• Copy the destroy.png and todos.css to the css folder.
• Copy the todos.ts to the js folder
• Copy the index.html

At this point you may have 2 CSS 3.0 errors

To fix the 1st error, change the cursor:normal to cursor:default. To fix the 2nd error, comment out 

 /* -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222); */

You can download the entire solution 

 Here 

4. Install the Backbone and the JQuery DefinitelyTypes

In the steps in the following links :

• Install the Backbone.DefinitelyTypes 
• Run the following command in the Package Manager Console
• PM> Install-Package backbone.TypeScript.DefinitelyTyped
• Install the JQuery.DefinitelyTypes
• Run the following command in the Package Manager Console
• PM> Install-Package jquery.TypeScript.DefinitelyTyped

5. Modify the Todos.ts to use the Backbone and the JQuery DefinitelyTypes

Add the Backbone and the JQuery references at the beginning at the file.

/// <reference path="Scripts\typings\backbone\backbone.d.ts"/>
/// <reference path="Scripts\typings\jquery\jquery.d.ts"/>

Since we refer the above DefinitelyTypes, we shall remove the Backbone and the JQuery in the Todos.ts code.

There are few more modifications, however you can download the entire solution here.

Note: Type cast in the TypeScript is < casting type >

Example:
 this.allCheckbox = <HTMLInputElement> this.$(".mark-all-done")[0]; //casting