You may be asking yourself – why do we need another language/technology in the saturated realm of web development? The simple answer is that because of the very open nature of the Internet and the World Wide Web, it makes it very slow for the core technologies to release new features, although the specifications have been already out there. Moreover, it takes time for all of the major browsers to integrate the new features into their engine.
Figure 1- ES5 vs. ES6 vs. TypeScript (photo courtesy of ng-book.com)
With so many good features missing from official ES6, many modern web frameworks, such as Google’s Angular are using TypeScript for their scripting purposes.
How TypeScript Works?
You may be curious and wonder what does transpile mean and what is the different between compilation and transpilation? Well, basically when a tool converts some programming code to an executable machine code that a human cannot read, developers say it has “compiled the code.” On the other hand, when a tool converts some programming code into some other human-readable programming code, since it is an action somewhere between “translation” and “compilation”, we say it has “transpiled the code.”
A Quick TypeScript Sample
This article is not intended to provide an in-depth tutorial, but I think it is fun to show a quick demo on using TypeScript with the good old JQuery library!
After having the tooling installed, you need to install its type definitions in order to be able to use JQuery types in TypeScript. If you use Visual Studio, you can install it with a NuGet Package Manager like this:
PM > Install-Package jquery.TypeScript.DefinitelyTyped
Now, you are ready to create a TypeScript file named typescriptDemo.ts and write something like this:
This ts code assumes you have an HTML file in your project like this:
Please note that in the head of the HTML file, we have added the script file as typescriptDemo.js – not typescriptDemo.ts, because as I said, as soon as you save the .ts file in Visual Studio, it automatically generates typescriptDemo.js, which is a regular js file that can be referenced in any HTML page and can be run in any browser.
By taking a brief look at the content of typescriptDemo.ts, you can see a lot of good Object Oriented features that make our script way cleaner than if we had not used it. For example, we have a class called Movie that has a field called _name. It also has a method called Play(), which we have called from the button click handler to manipulate the DOM, by changing the content of the “container ”<div> element.
The example above is only scratching the surface. Frameworks like Angular include more complicated TypeScript code to implement their business logic.
As you can see, there are a lot of benefits to using TypeScript – you can take advantage of the latest ES6 feature sets, feel confident that your code will work across all browsers and you will have clean, organized syntax – just to name a few.
Next week, we will continue our review on this topic by analyzing the pros and cons of using TypeScript.