The history of TypeScript

Transforming small web applications into thick monolithic clients was not possible due to the limitations of earlier JavaScript versions, such as the ECMAScript 5 specification. In a nutshell, large-scale JavaScript applications suffered from serious maintainability and scalability problems as soon as they grew in size and complexity. This issue became more relevant as new libraries and modules required seamless integration into our applications. The lack of proper mechanisms for interoperability led to cumbersome solutions that never seemed to fit the bill.

As a response to these concerns, ECMAScript 6 (also known as ES6 or ES2015) promised to solve these issues by introducing better module loading functionalities, an improved language architecture for better scope handling, and a wide variety of syntactic sugar to better manage types and objects. The introduction of class-based programming turned into an opportunity to embrace a more OOP approach when building large-scale applications.

Microsoft took on this challenge and spent nearly 2 years building a superset of the language, combining the conventions of ES6 and borrowing some proposals from the next version of the specification, ES7. The idea was to launch something that would help build enterprise applications with a lower error footprint using static type checking, better tooling, and code analysis. After 2 years of development led by Anders Hejlsberg, lead architect of C# and creator of Delphi and Turbo Pascal, TypeScript 0.8 was finally introduced in 2012 and reached version 1.0 2 years later. It was not only running ahead of ES6 – it also implemented the same features and provided a stable environment for building large-scale applications. It introduced, among other features, optional static typing through type annotations, thereby ensuring type checking at compile-time and catching errors early in the development process. Its support for declaration files also allows developers to describe the interface of their modules so that other developers can better integrate them into their code workflow and tooling.

The benefits of TypeScript

As a superset of JavaScript, one of the main advantages of embracing TypeScript in your next project is the low entry barrier. If you know JavaScript, you are pretty much all set, since all the additional features in TypeScript are optional. You can pick and introduce any of them to achieve your goal. Overall, there is a long list of strong arguments for advocating for TypeScript in your next project, and all of them apply to Angular as well.

Here is a short rundown, to name a few:

• Annotating your code with types ensures a consistent integration of your different code units and improves code readability and comprehension.
• The built-in type-checker analyzes your code at runtime and helps you prevent errors even before executing your code.
• The use of types ensures consistency across your application. In combination with the previous two, the overall code error footprint gets minimized in the long run.
• TypeScript extends classes with long-time demanded features such as class fields, private members, and enumerations.
• The use of decorators allows you to extend your classes and implementations in unique ways.
• Creating interfaces ensures a smooth and seamless integration of your libraries in other systems and code bases.
• TypeScript support across different IDEs is terrific, and you can benefit from features such as highlighting code, real-time type checking, and automatic compilation at no cost.
• The syntax is familiar to developers coming from other OOP-based backgrounds such as Java, C#, and C++.

Introducing TypeScript resources

Let's have a look at where we can get further support to learn and test drive our new knowledge of TypeScript.

Important Note

In this book we will be using TypeScript 3.9 as it is supported by Angular 10

The TypeScript official site

Our first stop is the official website of the language: https://www.typescriptlang.org.

There, we can find more extensive documentation of the language, along with a playground that gives us access to a quick tutorial to get up to speed with the language in no time. It includes some ready-made code examples that cover some of the most common traits of the language. We encourage you to leverage this tool to test the code examples we'll cover throughout this chapter.

The TypeScript official wiki

The code for TypeScript is fully open sourced at GitHub, and the Microsoft team has put reasonable effort into documenting the different facets of the code in the wiki available on the repository site. We encourage you to take a look at it any time you have a question, or if you want to dive deeper into any of the language features or form aspects of its syntax. The wiki is located at https://github.com/Microsoft/TypeScript/wiki.