Converting existing JavaScript code to TypeScript in Visual Studio

The best way to learn new technology is to start using it with real project. I have such - IZWebFileManager. It  was written when ASP.NET MVC wasn't event in mind and Web Forms was only framework for web application in .NET.  IZWebFileManager is an ASP.NET Server Control and has about 1300 lines of JavaScript code.

The challenge is to convert all existing JavaScript code in the project to TypeScript. The result of this effort you can find here: https://github.com/manishma/IZWebFileManager/tree/typescript

It this post I'll tell you about steps I went through.

1. Adding support of TypeScript to the project

I have installed TypeScript plugin for VisualStudo and customized the project file as I described in my previous post "Using TypeScript with an existing ASP.NET project"

2. Changing file extensions from *.js to *.ts

This step is a bit tricky. All JavaScript files in the project are build as embedded resource. From other side, TypeScript files have it's own build action "TypeScriptCompile". I have to maintain a configuration, which allows to keep proper build action for both files. It is much easy to do by editing *.proj file directly.

All java script files in project are listed in this way:

I changed it to

 

And then changed extension of *.js files to *.ts. 

NOTE:  Don't use Visual Studio for changing file extensions, cause it makes changes in project file. Do it directly in file manager.

After opening/reloading project in Visual Studio I got this:

FileManagerController.js is not found, cause it does not exit yet. I have to build the project to get all *.js files  be produced.  But building the project at this step results an error:

Don't get panic! It is normal situation. The converted JavaScript has a lot of errors and unrecognized references. You see it immediately when you open *.ts file:

3. Fixing errors

The one of benefits of TypeScript is error detection. It is not easy to make silly mistake with TypeScript.

One of most common errors in my code was not declaring loop counter variable in local scope:

It was easy to fix:

4. Reference to external JavaScript API

TypeScript compiler requires all functions and variables to be declared. If you use a function, which is defined somewhere out of current *.ts file, you have to declare it's signature (it is very similar to C programming)

For example, I use WebFileManager_DoCallback function, which is defined inline in HTML file TypeScript compiler gives me an error:

Following line in top of the file satisfies compiler:

If you want to reuse such declarations, then you may extract all definitions to the *.d.ts file and reference to it from *.ts file. I did it for ASP.NET WebForms client side API. 

Bellow is a content of WebForm.d.ts file:

And the reference to it:

5. Building the project

After solving all TypeScript compilation errors, I was able to build the project. As result, I got all *.js files be created.

Now I am ready to continue developing of IZWebFileManager with power of TypeScript.