I’d like to report that the port of my project to TypeScript has been a success, so far the issues encountered have been minimal.  One issue I did bump into recently was due to a typo on my part.  I had used a variable in a small method as both a string and number at different points, like so

var x = parseInt(somestring);

...

x = x.toString();

During the conversion to TypeScript, I resolved the type errors caused by this by creating a string and a numeric variable like so

var xn : number = parseInt(somestring);

...

var xs:string = xs.toString();

but notice the typo, I did xs.toString() and assigned it to xs itself, not xn.toString().  This does not cause any compilation errors in TypeScript, but the code is essentially a guaranteed null reference error at run-time.  In my case it was a month before the little used method was executed.

The conversion of the 20,000 lines of legacy Javascript in the Windows Control Library was a success.  I touched on the major issues in my previous posts.   The issues encountered themselves weren’t any kind of flaw in TypeScript,  it just demonstrated the need to keep in mind the style of Javascript code that is being generated.  After going through the experience, the following steps are what I would recommend for TypeScript conversion:

1) Rename your .js (Javascript) files to .ts (TypeScript) files and compile.  Fix all errors that arise and test your fixes.

2) Add type annotations to all variable and parameter declarations.  Minimize the use of the ‘any’ type.  Add interfaces to define function signatures.  Use interfaces to describe existing data structures.  Don’t refactor any of your code yet, wait until conversion is complete.

3) Restructure your JavaScript code into modules and classes.  I myself did Step 3 before Step 2, but if I did it again I would do Step 2 first.

One problem I encountered was when I made a typo while converting a prototypical class and I was chopping the  “class.prototype’ out of the function declarations and replacing it with the private or public keyword.  For example a class like so

var MyNamespace = MyNamespace || {};

MyNamespace.Widget2 = function(inp,a,b)
{
	this._a = a;
	this._b = b;
	this._inp = inp;
}

MyNamespace.Widget2.prototype.create = function()
{
	this.click();
}

MyNamespace.Widget2.prototype.method1 = function(x)
{
	alert('hello');
}

MyNamespace.Widget2.prototype.click = function(e)
{
	this.method1();
}

Was converted to

module MyNamespace
{
	export class Widget2
	{
		private _a : number;
		private _b : number;
		private _inp : number;

		constructor (inp,a,b)
		{
			this._a = a;
			this._b = b;
			this._inp = inp;
		}

		public create()
		{
			this.click();
		}


		public method1(x)
		{
			alert("hello");
		}

		public click = function()
		{
			this.method1();
		}

	}
}

Note what I consider the typo – the click function was not completely converted, I forgot to strip the ‘= function’  and now it is an assignment to a variable, but it is perfectly valid TypeScript.  and it will run correctly. The problem is ‘this’ in the function is not typed as Widget2 but as ‘any’. Now the code will run fine BUT if you make any modifications to the use of ‘this’ in the function you will not get the protections afforded by TypeScript – for example the following class will compile perfectly fine due to ‘this’ being typed as ‘any’, and fail at runtime.

module MyNamespace
{
	export class Widget2
	{
		private _a : number;
		private _b : number;
		private _inp : number;

		constructor (inp,a,b)
		{
			this._a = a;
			this._b = b;
			this._inp = inp;
		}

		public create()
		{
			this.click();
		}


		public method1(x)
		{
			alert("hello");
		}

		public click = function()
		{
                        // method name incorrect 
			this.mthod1();			
		}

	}
}

The recommendation I have for this situation if you are converting a large codebase is to do a regex search in Visual Studio on

(public|private)?s+($|w|_)+s+=s+function

And see if you have made the mistake yourself. If you use unicode characters in your identifiers you will have to update the regex