Search⌘ K
AI Features

The History of TypeScript

Explore the origins and development of TypeScript, its role as a JavaScript superset, and the benefits it brings to Angular projects. Understand how TypeScript’s static typing, class features, and tooling support improve code quality. This lesson helps you gain foundational knowledge to effectively use TypeScript in building scalable, maintainable Angular applications.

Transforming small web applications into thick monolithic clients was impossible 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 applications. The lack of proper mechanisms for interoperability led to cumbersome solutions that never seemed to fit the bill.

Evolution of JavaScript

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. Class-based programming introduced an opportunity to embrace a more object-oriented programming (OOP) approach when building large-scale applications.

Microsoft took on this challenge and spent nearly two years building a superset of the language, combining the conventions of ES6 and borrowing some proposals from the next specification version. 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 two 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 two years later. It was not only running ahead of ES6 but 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 on in the development process. Its support for declaration files also enabled developers to describe the interface of their modules so that other developers could 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’re 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 solid arguments for advocating TypeScript in your next project, and all of them apply to Angular as well.

Here is a short rundown:

  • Annotating your code with types ensures a consistent integration of the different code units and improves code readability and comprehension.

  • The built-in type checker analyzes your code at compile time and helps prevent errors before executing the code.

  • The use of types ensures consistency across the application. Combined with the previous two points, 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.

  • Decorators allow you to extend your classes and implementations in unique ways.

  • Interfaces ensure a smooth and seamless integration of 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, free of cost.

  • The syntax is familiar to developers coming from other OOP-based backgrounds such as Java, C#, and C++.

Introducing TypeScript resources

Now, have a look at where you can get further support to learn and test-drive your new knowledge
of TypeScript.

Note: In this course, TypeScript 4.8 will be used because it is supported by Angular 15.

The official website

Your first stop is the official website of TypeScript. It contains extensive language documentation and a playground that gives 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.

The official wiki documentation

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. You’re encouraged 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.