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.



<h2>1. Adding support of TypeScript to the project</h2>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

<h2>2. Changing file extensions from *.js to *.ts</h2><div>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.</div><div>
</div><div>All java script files in project are listed in this way:</div><div>
</div><div class="separator" style="clear: both; text-align: center;"></div><div>
</div><div>I changed it to</div><div>
</div><div> </div><div>
</div><div>And then changed extension of *.js files to *.ts. </div><div>NOTE:  Don’t use Visual Studio for changing file extensions, cause it makes changes in project file. Do it directly in file manager.</div><div>
</div><div class="separator" style="clear: both; text-align: center;"></div><div>
</div><div>
</div><div>After opening/reloading project in Visual Studio I got this:</div><div>
</div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;">
</div><div>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:</div><div>
</div><div class="separator" style="clear: both; text-align: center;"></div><div>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:</div><div>
</div><div class="separator" style="clear: both; text-align: center;"></div><div>
</div><div>
</div><h2>3. Fixing errors</h2><div>The one of benefits of TypeScript is error detection. It is not easy to make silly mistake with TypeScript.</div><div>
</div><div>One of most common errors in my code was not declaring loop counter variable in local scope:</div><div>
</div><div class="separator" style="clear: both; text-align: center;"></div><div>
</div><div>It was easy to fix:</div><div>
</div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;">
</div><h2>4. Reference to external JavaScript API</h2><div>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)</div><div>
</div><div>For example, I use WebFileManager_DoCallback function, which is defined inline in HTML file TypeScript compiler gives me an error:</div><div>
</div><div class="separator" style="clear: both; text-align: center;"></div><div>
</div><div>Following line in top of the file satisfies compiler:</div><div>
</div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;">
</div><div>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. </div><div>
</div><div>Bellow is a content of WebForm.d.ts file:</div><div>
</div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;">
</div><div>And the reference to it:</div><div>
</div><div class="separator" style="clear: both; text-align: center;"></div><div>
</div><h2>5. Building the project</h2><div>After solving all TypeScript compilation errors, I was able to build the project. As result, I got all *.js files be created.</div><div>
</div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;">
</div><div class="separator" style="clear: both; text-align: center;">
</div><div>Now I am ready to continue developing of IZWebFileManager with power of TypeScript.</div>

Thank you for your interest!

We will contact you as soon as possible.

Send us a message

Oops, something went wrong
Please try again or contact us by email at info@tikalk.com