As a devoted follower of Anders (Hallowed be His name) I have been waiting to try TypeScript for some time. Since we could not agree to use it as the frontend language for our current application I had to try it on my own. I decided to port a small project for drawing Bézier curves I had done in Silverlight a few years ago. It seemed a good candidate since it was short (several hours of work), was a real task (if drawing Bézier curves is a real task) and provided the opportunity to explore the Canvas API, something I had been intending to do for some time.
You can add a control point by double clicking, remove control point by right clicking and drag control points around.
You can read the article about the original project here. The TypeScript version is not a literal port. It contains changes to better fit development in TypeScript as opposed to C# and some changes which come from the way I write code now as opposed to the time when I was a junior developer.
I had a similar problem with the BezierCurve class. I wanted to encapsulate the control points array but I do not know a way to return the array in a form that prevents it from being modified. I ended up returning a copy to ensure the client code did not modify the internal state of the object. An IEnumerable interface would help here but I guess we will have to wait ten more years.
If I have to single out one place where the code became significantly worse it is definitely the function which generates the curve points. In the original version it uses C# iterators (yield) to generate the points on demand. It is beautiful, short and effective code. In TypeScript I had to generate all points at once and put them in an array. I should probably revisit this when ECMAScript 6 is finalized and supported in all browsers and try to rewrite it with generators.
The Canvas API
I ran into an issue with offsetX and offsetY properties of the mouse click event which seem to be implemented according to the spec only in IE and are completely missing from Firefox. I had to stick some polyfill to get the whole thing working in Firefox.
Of course the most stunning thing was that someone decided that the second mouse button is the middle one… go figure!
On a side note I have decided that one day I will develop my own drawing API where the function drawBezier will draw this: