Have you ever wanted to open a lightbox, do an animation with a div appearing after that animation loads, hit a restful API to return data, and then show the data inside the lightbox, and in that order? Well, with just vanilla JavaScript, you would find yourself writing a mess of deferred promises, functions with closures; and don’t forget how much code you would have to write just to transmit an XML HTTP request for the RESTful API, just to get data. Luckily, for the present day developer, doing this sort of thing could be done with a few functions, maybe 50 lines of code, and a fourth of a Monster/Red Bull. As front-end developers, we too often take for granted the tools available to us, such as jQuery, Underscore, Angular, and various other tool libraries and frameworks; or perhaps we just aren’t using them enough. It seems like the back-end developers have been utilizing frameworks for far longer than those on the front-end; perhaps the front-end developers need to start using back-end development patterns and practices. It is already super simple to write complex JavaScript that used to take weeks in less than a day. However, what we may be missing is organization and structure. I do recall a few famous people stating that in order to attack your limitations, you must turn to your weaknesses.
Enter TypeScript. Typescript allows the front-end developer to utilize many of the benefits of a back-end language such as C#. TypeScript introduces keywords that were passed down from the Java language, but never put in use. Keywords such as Module, and Class, are now able to be used in JavaScript, just like you would use them in more purely object-oriented languages. TypeScript not only utilizes some of the core Java keywords that were reserved in JavaScript, it also adds some of its own from languages like C#. In TypeScript you can also use Interfaces, Enumerations, Type Annotations, Type Interfaces and much more. None other than Anders Hejlsberg himself, the lead architect and designer/creator of Delphi and Turbo Pascal, has been one of the lead engineers and influences in the creation and ongoing updates to TypeScript. Add frameworks like AngularJS, BackBone.js or Ember.js, and JavaScript—the incomplete functional language—has now changed. The days of JavaScript as just a sparingly used browser helper used to perform on-screen tasks such as a countdown timer, guest book, font animator and image pre-loader are coming to an end. With recent developments, we are not only using it as a tool for widgets, but also as a complete website application language. With AngularJS and similar frameworks you can now load your entire web site into a one-page, response, robust application. Using JavaScript to develop an entire application calls for a move from being simply a functional language to a more truly object-oriented language, using things like modules, classes, and interfaces to stay organized.
Some developers might be thinking, wouldn’t an object-oriented language be a bit harder to debug than a functional language given the current browser-based debugging toolset? Yes, with development tools provided by the browser of your choice, you can do quite a bit. But with TypeScript, you can do even more. TypeScript is a superset of JavaScript that comes with a compiler that produces JavaScript suitable for any ECMAScript browser. You can use Microsoft Visual Studio or any number of other popular IDEs and editors. Whether or not your a fan, Microsoft is currently the only company attempting to improve upon the widely-used JavaScript. With Visual Studio and TypeScript you can step into each line of code execution, go to the definition of highlighted code elements, utilize code maps, source control including git, subversion, or team foundation server, and much more that Visual Studio has to offer for languages like C#. One additional thing that Microsoft has done specifically for TypeScript, is if you create a .map file, you can not only debug in VS, you can also debug the TypeScript (.TS) file directly in the development tools of the browser of your choice, allowing you to change code on the fly in the browser and watch it be updated for this debugging session.
Already using CoffeeScript or some other tool that compiles to JavaScript? You should be well on your way to understanding TypeScript. TypeScript is an optionally strictly typed language making it versatile for all coding types and standards. This combined with a powerful compiler, and an extremely helpful community, I would make TypeScript my top choice of JavaScript compilers.
