In this chapter, we will start working with TypeScript, the language Google recommends for using with Angular. All the features ECMAScript 2015 and ECMAScript 2016 provide, such as functions, classes, modules, and decorators, are already implemented in or added to the roadmap of TypeScript. Because of the extra type annotations, there are some syntactical additions compared to JavaScript.
For a smoother transition from the language which is fully supported by modern browsers at the time of writing, that is, ES5, we will start with some common features between ES2016 and TypeScript. Where there are differences between the ES2016 syntax and TypeScript, we'll explicitly mention it. In the second half of the chapter, we'll add the type annotations to everything we've learned until this point.
Later in this chapter, we will explain the extra features TypeScript provides, such as static typing and extra syntax. We will discuss the different consequences based on these features, which will help us to be more productive and less error-prone. Let's get going!
TypeScript is an open source programming language that is developed and maintained by Microsoft. Its initial public release was in October 2012. TypeScript is a superset of ECMAScript, supporting all of the syntax and semantics of JavaScript with some extra features on top, such as static typing and richer syntax.
Figure 1 shows the relationships among ES5, ES2015, ES2016, and TypeScript.
Figure 1
As TypeScript is statically typed, it can provide a number of benefits to us as JavaScript developers. Let's take a quick look at those benefits now.
One of the most common mistakes we make while writing JavaScript code is to misspell a property or a method name. Usually, we find out about the mistake when we get a runtime error. This can happen during development as well as during production. Hoping that we will know about the error before we deploy our code to the production environment isn't a comfortable feeling! However, this is not a problem specific to JavaScript; it is something common to all the dynamic languages. Even with lots of unit tests, these errors can slip by.
TypeScript provides a compiler, which takes care of such mistakes for us by using static code analysis. If we take advantage of static typing, TypeScript will be aware of the existing properties a given object has, and if we misspell any of them, the compiler will warn us with a compile-time error.
Another great benefit of TypeScript is that it allows large teams to collaborate since it provides formal, verifiable naming. This way, it allows us to write easy-to-understand code.
There are a number of tools, such as Tern, that are trying to bring better autocompletion support for JavaScript in text editors and IDEs. However, as JavaScript is a dynamic language, it is impossible for the IDEs and text editors to make sophisticated suggestions without any metadata. Google Closure Compiler, for instance, uses type annotations provided in the JSDoc in order to provide static typing to the language.
Annotating the code with such metadata is a built-in feature of TypeScript known as type annotations. Based on them, text editors and IDEs can perform a better static analysis on our code. This provides better refactoring tools and autocompletion, which increases our productivity and allows us to make fewer mistakes while writing the source code for our applications.
TypeScript by itself has a number of other benefits:
- It is a superset of JavaScript: All JavaScript programs (for example, ES5 and ES2015) are already valid TypeScript ones. In essence, you have already been writing TypeScript code. Since it is based on the latest version of the ECMAScript standard, it allows us to take advantage of the latest bleeding-edge syntax provided by the language.
- Supports optional type checking: If, for any reason, we decide that we don't want to explicitly define the type of a variable or a method, we can just skip the type definition. However, we should be aware that this means we are no longer taking advantage of the static typing, so we are giving up on all the benefits mentioned earlier.
- Developed and maintained by Microsoft: The quality of the implementation of the language is very high, and it is unlikely that support will be dropped unexpectedly. TypeScript is based on the work of some of the world's best experts in programming language development.
- It is open source: This allows the community to freely contribute to the language and suggest features, which are discussed in an open manner. The fact that TypeScript is open source makes the development of third-party extensions and tools easier. This extends the scope of its usage even further.
Since modern browsers do not support TypeScript natively, there is a compiler that translates the TypeScript code we write into readable JavaScript in a predefined target version of ECMAScript. Once the code is compiled, all the type annotations are removed.