JavaScript's role in web development has gone from being considered a starter language for hobbyist programmers to being regarded as a serious tool for building modern web applications on both the client and the server. This change means that the size and scope of JavaScript applications has grown tremendously, and with that growth, the costs of managing the complexity have also increased. To address this, Microsoft has developed the open source project TypeScript, which is a superset of JavaScript that adds static type checking.
VS2015 includes integrated support for TypeScript projects, making it easy to get started with the language. Let's take a look at how TypeScript can benefit your web application.
Let's perform the following steps to see how TypeScript can fortify your JavaScript applications:
- Open VS2015, and create a new HTML Application with TypeScript project, as shown in the following screenshot:
- Accept the default project name, and create the project.
- The default project will open with a small sample that, when executed, will produce a web page that shows a simple clock. When you look at the source, it is pretty sparse, as shown in the following screenshot:
- As you can see, beyond some HTML, there is not much except for a reference to a file called
app.js. Returning to Visual Studio, the most closely related source file isapp.ts. So where did theapp.jsfile come from? - Going back to our original explanation of TypeScript, remember that it is a superset of the JavaScript language. This means that all valid JavaScript code is also valid TypeScript code. When TypeScript is compiled, JavaScript is generated. In this case, our file
app.tsis compiled by Visual Studio toapp.js. You can find theapp.jsfile if you look inside your project folder, as shown in the following screenshot:
- At this point, you are ready to start writing your application, and can use NuGet to add TypeScript aware packages such as jQuery.
Since TypeScript ultimately compiles down to JavaScript, you may be wondering about the advantages of using it. Firstly, using TypeScript allows meaningful IntelliSense support. For example, examine the app.ts file that is part of our project. The following screenshot shows one of the available IntelliSense menus that can appear while editing:
Secondly, TypeScript (as its name suggests) allows type checking. Consider the greeter class, and how Visual Studio is able to help by comparing the differences, as shown in the following screenshot:
Since TypeScript is being used, Visual Studio detects an error with the assignment, as shown in the preceding screenshot. Conversely, in the JavaScript code (shown in the following screenshot), Visual Studio did not detect the error:
This creates a bug that is easy to overlook. In smaller applications, the lack of type checking can usually be managed by the programmer. However, with larger applications or unfamiliar code bases, it becomes much more difficult. Catching the error immediately saves debugging time later.
The third and perhaps the best advantage of using TypeScript is that the TypeScript compiler (tsc.exe) produces valid JavaScript that works on any browser or platform that supports JavaScript. This compatibility means you can use TypeScript in your projects without requiring your users to install something new. Since the nature of the TypeScript language is more specific than JavaScript, you can catch errors sooner, and increase the power of IntelliSense. This allows you to keep the good parts of JavaScript (fast and powerful design capabilities) while increasing its safety and usability in large projects.
You don't have to create a brand new project just to take advantage of TypeScript; it can be easily added to your existing web projects. From within an existing web project, add a new item (Ctrl + Shift + A) or right-click on your project name or directory within the Solution Explorer window, and select TypeScript File. Similarly, you can use NuGet to add TypeScript aware packages to both new and existing projects, allowing you to phase in a manner that fits your development schedule.
If you would like to try TypeScript, but are wondering about all the existing JavaScript code that would have to be converted, don't worry. Library types for many popular JavaScript projects, including Backbone.js, Node.js, and jQuery, are available at DefinitelyTyped (https://github.com/DefinitelyTyped/DefinitelyTyped).