A web development expert gives an introduction to the TypeScript language, and goes over how to install it, get a TS project up and running, and a few features.
In this article, we are going to learn the basic features of TypeScript through practical examples. We’ll start with a small introduction to TypeScript, then we are going to create a TypeScript project and use its features to learn the language in practice.
TypeScript is a programming language, built by Microsoft, that extends JavaScript. The language has been built as an open source project, licensed under the Apache License 2.0, so the developer community can use it freely. Among its features, a remarkable one is that TypeScript brings type safety to one of the most flexible, dynamic programming languages around, JavaScript. This characteristic enables developers to be very productive even on large codebases by introducing and facilitating tools and practices like static checking and code refactoring.
Besides enabling developers to check the correctness of their code before running it, TypeScript also brings to the table the state of the art features of JavaScript. That is, with TypeScript we can take advantage of the latest features of JavaScript, like those introduced by ECMAScript 2015, and features that are still under consideration (e.g. decorators). As the developers of TypeScript knew that applications written in the language would face a wide variety of environments (i.e. JavaScript engines), they made it easy to compile and transpile TypeScript to different targets, like ECMAScript 3 and above.
To compile and transpile TypeScript into JavaScript, we need to install the command-line compiler. As this compiler is, in fact, a Node.js program, we first need to install Node.js and NPM on our environment. After that, we can install the compiler as a Node.js package:
This will make the tsc (TypeScript Compiler) command available globally on our machine. To test the installation, let’s create a simple TypeScript file called index.ts with the following code:
Then let’s use the compiler to transform it to JavaScript:
This will generate a new file called index.js with the exact same code of the TypeScript file. To execute this new file, let’s use Node.js:
Although the compiler did nothing else besides create a JavaScript file and copy the original code to it, these steps helped us to validate that our TypeScript installation is in good shape and ready to handle the next steps.
To create a TypeScript project, everything that we need is in a tsconfig.json file. The presence of this file in a directory denotes that this directory is the root of a TypeScript project. This file, among other things, instructs the compiler on which files to compile, which files to ignore, and what environment to target (e.g. ECMAScript 3).
To create our first TypeScript project, let’s create a new directory and add the TypeScript configuration file to it:
As TypeScript can aim different environments (like ECMAScript 3 or ECMAScript 2015) and can be configured to validate different things (like implicit any), we use the tsconfig.json file to adjust the compiler to our needs. In our practical introduction to TypeScript, we will create a small program that deals with tasks and stories and that runs on our terminal, through Node.js, to help us understand the concepts.
Node.js is based on Chrome V8, one of the most up-to-date JavaScript engines available. Version 6 of Node.js ships with a Chrome V8 version capable of supporting 95% of the ECMAScript 2015 specification, as shown by Node Green, while version 8 is capable of supporting 99%. In respect to ECMAScript 2017, both versions support 23% and 73% of the specification, respectively. Therefore, the best choice is to configure our project to be compiled to ECMAScript 2015, which will enable users with Node.js 6 and 8 to run our program without trouble.
Besides configuring the compiler to target ECMAScript 2015, we will also configure four other characteristics:
We will also tell the compiler to process files under ./src, a directory that we will create to which we will add our TypeScript source code. To perform these configurations, let’s open the tsconfig.json file and add the following content to it:
The options used in the configuration file above are just a small subset of what TypeScript supports. For example, we could instruct the compiler to handle decorators, to support jsx files, or even to transpile pure JavaScript files. The official website contains a list of all the options available on TypeScript, but below is an explanation of a few commonly used options:
Now that we understand how to bootstrap a TypeScript project and configure the compiler, let’s start learning about the features provided by TypeScript. Although the features that we are going to cover here (and a few more) are thoroughly explained in the TypeScript handbook, this article will focus on a more practical approach. We will learn the basic concepts of the most important features and put them to work together.
Before creating anything that matters, we need to learn about the most important features of TypeScript: types, variables, and functions. TypeScript became popular over the last couple of years because it enables developers to define strongly typed variables, parameters, and return values while still using JavaScript (which by its nature is weakly typed and extremely flexible). For example, developing in JavaScript, the following code is perfectly valid:
Running it on Node.js, or on any browser for that matter, would output thirty two1 without generating any warning. Nothing new here, it’s just JavaScript behaving as flexible as always. But, what if we want to guarantee that the addOne function accepts only numbers when called? We could change the code to validate the parameter during runtime… or we could use TypeScript to restrict that during compile time:
Now, using the TypeScript compiler to generate JavaScript will produce an error saying:
This is the most valuable feature of TypeScript. Based on this feature amazing tools and IDE integrations can be created to improve tasks like code refactoring. Being able to define types during design time helps us avoid mistakes like passing the wrong variable type to functions.
String and number are two of the basic types that TypeScript supports. Besides these types, TypeScript also supports:
These types enable us to create solutions to whatever problem we face. With them, we can develop code that guarantees that the correct types are being passed around and, if we need to represent more complex entities, we can define classes that contain any arbitrary number of typed variables (as we will see in the next section). To provide an overview of what TypeScript makes possible, let’s take a look at the following code:
The first step executed by the code above creates a type (tuple) that accepts three objects: a number, a string, and a boolean. This tuple represents a ranking where the number is the position, the string is the name of the person in that position, and the boolean indicates whether the player has finished the game or not.
