TypeScript Essentials

As hardware technology has advanced, so too has the need for more advanced software applications to run not just on one device but on an array of devices. JavaScript is the natural solution to this cross-platform model since almost all modern browsers are capable of running it. Unfortunately, the development paradigm of JavaScript is still dependent upon complex pattern knowledge, and debugging must be done at runtime. Creating large applications in JavaScript can be difficult and structuring the code in a maintainable form is just as difficult. TypeScript, an open source language project started by Microsoft, aims to take JavaScript development to the next level.

JavaScript originally ran as an interpreted language and still does in some places, while modern browsers convert it to machine code during execution. What this means is that the code you write is the code being used at runtime. The advantage of using interpreted languages is that they provide a rapid development model with very little overhead for the developer. They work in cross-platform environments because the code does not need to be compiled for each new device it is deployed to. Interpreted languages aren't without their share of disadvantages either though. In most modern implementations, JavaScript code must be run through a just-in-time compiler first, but even with the help of this compilation, the dynamic typing of the language makes this a difficult task and performance can suffer. On top of the performance hit, JavaScript code must still be deployed before testing can be done. A single syntax error will force you to run the application, track down the source of the problem, fix it, and then run the application again, which wastes a lot of time and can be quite frustrating. Developers like to refactor code as better ways to solve problems arise or new functionality is needed. This refactoring could cause other parts of the application to fail and without performing complete regression testing the problem could be overlooked. To interact with an object you must have intimate knowledge of the type that the object represents. TypeScript aims to solve these problems through a variety of additions to the JavaScript language including a compilation step with a detailed list of errors.

TypeScript is a statically typed compiled language that generates JavaScript code that can be used in cross-platform scenarios. You may be thinking to yourself at this point: why would I want to rewrite all of the applications I already have in this new language? The simple answer is you don't have to. TypeScript is just a superset of JavaScript that gets compiled into plain JavaScript. Although almost all of your existing JavaScript code is valid TypeScript code, certain pieces will need to be adapted to ensure safe compilation; however, they will generally improve the quality of your code. You are free to type your code as strong or as weak as you wish but I highly recommend embracing the typing system completely.

JavaScript was originally created as a scripting language, but as the need for larger applications has grown so has the need for those applications to contain more reusable components and libraries. JavaScript is dynamic enough to act as both a functional language and an object-oriented one through certain design patterns. Object-oriented code is focused on the concept of code reuse and we will be investigating it during our journey into TypeScript. TypeScript provides a rich set of object types and accessibility levels that will seem very familiar to object-oriented developers. Inheritance, encapsulation, and abstraction are all made easier in TypeScript. JavaScript is focused on the value of functions and prototype-based inheritance, which means TypeScript is as well. This can seem strange to anyone used to the idea of class-based inheritance. So through the use of its compiler, TypeScript introduces a number of important concepts from a few different object-oriented languages. These are as follows:

TypeScript adds a static typing layer on top of JavaScript that is then run through a compiler. The compiler parses the TypeScript code and converts it into plain JavaScript. The addition of type safety and code compilation allows errors to be caught sooner and bugs to be eliminated without ever having to deploy a line of code. The introduction of classes and modules makes the development of large scale applications much easier. Including generics and interfaces in the type system allows us to easily create components and libraries that can be used with a variety of objects.

On top of this, TypeScript introduces the idea of public and private members. If an object or function attempts to access a private member of another object the compiler will recognize that the code is invalid and a build error will be generated. This helps implement encapsulation, which is meant to prevent consumers of your TypeScript objects from accessing methods and properties that could be potentially harmful when manipulated outside of the scope of the object itself. Providing accessibility levels helps us limit the scope of possible interactions with an object or even hide it completely from access by other components or libraries.

Writing unit tests has become common practice in software development. Unit tests allow us as developers to refactor and clean code with the safety of knowing that we are not breaking existing functionality. The design decision to include interfaces in the language specification for TypeScript has helped to improve the testability of our code. Writing unit tests help us to verify that small segmented blocks of code always operate as expected. However, as our applications grow we must pass around more complex objects and create more complex functions. This makes testing small segments of code individually more difficult. With the addition of interfaces, it is now easier to mock up objects to be passed around and more tightly control the scope of the tests.

Another key component of JavaScript development is the ability to integrate third-party libraries. It is difficult to find rich web applications these days that don't integrate with jQuery, which has advantages and disadvantages. Due to the open nature of JavaScript development, libraries exist to do almost anything and a lot of them are free to use. Later on we will discuss how TypeScript is already equipped to integrate with these libraries and make the development experience infinitely better. For now, let's focus on getting ready to write our first application in TypeScript.

To start writing code in TypeScript, we first need to install the compiler. The compiler is available as a standalone package through Node.js, Visual Studio tooling that Microsoft provides, or you can directly download the compiler's source code. Throughout this text we will be using Visual Studio 2013 as our interactive development environment (IDE). Visual Studio 2013 provides native support for TypeScript with the release of Update 2. For Visual Studio 2012, Microsoft provides an extension that can be installed from the TypeScript home page (http://www.typescriptlang.org/). As TypeScript is becoming more widespread, the number of code editors that have support for it has grown including Eclipse (http://www.jetbrains.com/webstorm/) and Notepad++ (https://github.com/hansrwindhoff/nppPluginTypescript).

The TypeScript compiler, as with a number of modern languages, is written in TypeScript, which means it will compile to plain JavaScript and run in any JavaScript host. With Microsoft's tools installed, you can access the TypeScript compiler directly from the command line and generate JavaScript immediately. The following screenshot shows a list of the available compiler options and what they do. We will look at each of these options more thoroughly later on but for now you can see that the compiler, although very new, already has a very robust feature set

As you can see the list of options is fairly extensive so far and will undoubtedly become richer as the language develops. TypeScript 1.0, which will be the version of the language used in this text, provides parameters for everything from specifying the output file to warnings based on code rules. We will discuss all of these options later on, but for now all you need to know is that you can compile your TypeScript code by passing the compiler the path of the file you want to compile. When we begin to build more complicated applications the Visual Studio integrations will provide an easy way for you to set compiler options for all TypeScript files included in your projects.

Now that we have the compiler installed, let's start writing some code. This wouldn't be a good technical book without the inclusion of "Hello World" to get you started with writing code in a new language. The code for this particular example is pretty simple, but we can use it to demonstrate some of the early benefits of switching to TypeScript.

Command-line compilation

The TypeScript compiler is nothing more than JavaScript code; it is possible to compile your TypeScript anywhere that a JavaScript host exists. Earlier, we saw that an executable was provided that allows us to compile our code from the command line. We will walk through this first example using this executable and discover how simple it is to get going with TypeScript. To get started, let's create a new file on the filesystem and call it HelloWorld.ts. The following code creates a new HTML paragraph element and sets the text to the value of a pair strings concatenated together:

var p = document.createElement('p');
var hello: string = "Hello";
var world: string = 2;
p.textContent = hello + " " + world;

document.body.appendChild(p);

For the most part, this looks like plain old JavaScript. However, if you pay close attention to the declaration of the hello and world variables, you will see something new. After the variable names, you will see that they are now given the type of string. This type annotation tells the compiler to always treat the variables hello and world as strings; however, in this case, the compiler can infer these types from their initial values. Every other reference to these variables will be able to assume that all of the properties and methods of an object of the type string will be accessible. This allows IDEs to provide intelligent code completion as well as visually alert us if we are performing an action that the compiler is going to fail on. Now let's verify that this code compiles and analyze the JavaScript that the compiler outputs.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Launch an instance of the command prompt and browse to the directory where you created the HelloWorld.ts file. From here, running the compiler is as simple as typing the following:

tsc HelloWorld.ts

This generates the following output:

As you can see, the compiler recognizes that we typed the world variable as string and then tried to assign a numeric value to it. While that would have been legal JavaScript, it could lead to data errors later when another piece of code is expecting world to be string. So let's go back to the TypeScript file and modify the value we are assigning to world and run the compiler again:

 var world: string = "World!";

Success! Our code has successfully made it through the TypeScript compiler and it generated a JavaScript file by the name of HelloWorld.js. If you open up this file, you will find the resulting code that will be deployed and run on the client. As you can see, the type annotations were stripped out of the final code, while maintaining a one-to-one mapping between our TypeScript code and the resulting JavaScript code, because they are not actually part of the JavaScript language specification:

  var p = document.createElement('p');
var hello = "Hello";
var world = "World!";
p.textContent = hello + " " + world;

document.body.appendChild(p);

Now that we have our JavaScript generated, we need to test it. The first thing our code is attempting to do is to create a new HTML paragraph element. So we will need to generate an HTML file to load our code and be available for manipulation. Then two parts of a message are concatenated together and assigned to the text value of the paragraph element that has just been created. Finally, the paragraph element is appended to the body of the HTML document. The following HTML code will load our generated JavaScript file:

<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <script src="HelloWorld.js" ></script>
</body>
</html>

Note

In general, script tags should be included within the <head> tag, not in the main <body> tag. In this case, our code is dependent upon the DOM being ready for our code to execute successfully.

Opening the HTML file in a browser will result in the immediate execution of our code when the document's body loads. As you can see in the following screenshot, our paragraph was added to the HTML on the page and Hello World! is displayed:

So as you can see, creating and compiling TypeScript applications is just as easy as creating a basic JavaScript application. However, running the compiler from the command line will become cumbersome as the applications you develop grow in size and complexity. So let's go over setting up a TypeScript project in Visual Studio and get the Hello World application running in a web-based project.

Creating a new project

To create a new project that includes TypeScript, go to the File menu and navigate to New | Project. In the New Project window, you will see a list of installed templates. There is now a new section named TypeScript; select this section and you will see all of the available project templates that can be used to create TypeScript applications.

Note

The location of this template may vary depending on the version of Visual Studio installed. If the TypeScript section is not available, use the search function of the project template selector.

This does not mean that TypeScript can only be added to these project types—you can add TypeScript files to any existing project. For our examples, we will be using the HTML Application with TypeScript project template, so let's select that and create our new application:

Once the project has been created you will notice a few things right away. First, a default TypeScript file and HTML file have been created to host our new application. There is also a web.config and CSS file to host your application styles. All of these elements should seem pretty familiar to you, except the TypeScript file, which is there in place of a JavaScript file.

Now that our project has been created we need to move our code in. Copy the code from HelloWorld.ts into app.ts and do the same with the HTML that was generated. Change the script tag's source attribute to app.js to reference the new location of our code and run the application. The output displayed should be the same.

Build options

Visual Studio has provided a seamless integration with TypeScript and provides a large variety of configuration options. Let's take a look at the project build options first and get a feel for the different things that TypeScript can generate when it is being compiled. To find the build options, right-click on the project in the solution explorer and select Properties from the context menu. As you can see in the following screenshot, we are able to manipulate a large number of the compiler options we saw earlier:

From the build settings you can see that we have the ability to change which version of JavaScript we want to compile our TypeScript into: ECMAScript 5 or ECMAScript 3.

Tip

JavaScript is now formally known as ECMAScript but it is still commonly referred to as its original name.

You also have the option for compiling TypeScript files when you save changes to them. This is a helpful option because when a TypeScript file is compiled so are all other TypeScript files that it references. This is a helpful feature when you have only a few files being referenced, but as your applications grow and the dependency trees become more complex you could run into performance issues. Allowing implicit "any" types tells the compiler not to fail if an object's type is not given or cannot be implied. Unchecking this option is the easiest way to force yourself to fully embrace the type system. Although you may run across some scenarios where an "any" type is inevitable they should be very rare. This can be done by providing a type annotation as shown here:

 var explicitAny: any;

We also have the ability to change the module system we want to use when our JavaScript code is generated. We will discuss modules and the differences between each of our available options later on, but it is important to be aware of this option because it could drastically change the way our final code looks.

The output section gives us a variety of options for what the final output from the compiler will be. Commenting code is a very useful way of making it maintainable, but this can bloat the size of a JavaScript file. This could cause performance problems when downloading the code to a remote client over the web. Since Visual Studio gives us the ability to define different compiler options for different build configurations, we could allow the comments to remain in the output for debugging while removing them for release builds. The Combine JavaScript output into file option allows us to combine all of our generated code into a single output file. This becomes incredibly useful as the number of files in our project grows and there are a lot of network calls taking place to get each file one at a time.

We also have the ability to change the output path of the generated JavaScript. This gives us the ability to push changes directly into a test environment upon successful compilation without ever having to bring down the site or manually copy files to the deployment location. The last option in the output section is a very interesting one. Checking the Generate declaration files option will create declaration files for each of the types you create. These declaration files can then be referenced by other TypeScript files to provide a type definition for objects of a specific type. We will discuss declaration files in more depth later on in the book.

The final section is related to how we want to debug our TypeScript code. We have the ability to generate source maps and the directory in which they should be deployed to. Source maps provide a way for debugging combined and minified JavaScript code. They are particularly helpful when debugging code that has been pushed into production by creating a way to make the JavaScript readable, however, in TypeScript they also provide us with a way back to the original TypeScript code. The final option specifies where the TypeScript files are located; this will allow debugging from inside of Visual Studio directly. In most scenarios, the default option here will suffice.

The things learned in this chapter will be the basis for continuing our journey into TypeScript. We have discussed a variety of ways in which TypeScript improves the JavaScript development model. TypeScript makes large scale application development easier with the addition of a static typing system and code completion. Visual Studio's intellisense feature brings JavaScript development in line with other languages such as C# and Visual Basic. We briefly discussed the compiler and how it turns TypeScript into deployable JavaScript and created our first application. All of the examples shown moving forward will be using Visual Studio; however, feel free to use your favorite IDE. In the next chapter, we will discuss the different language features provided by TypeScript and how the compiler generates its JavaScript output.