Why we love TypeScript


Words by Ettienne Gous

For some time now, a general trend in web development has been the increasing shift of more and more logic from the server to the client-side application running in the browser.

As a result, the front end stack has become increasingly sophisticated to deal with the added complexity. This has seen the rise of frameworks and libraries like Angular, React and Vue over jQuery or vanilla JavaScript, which no longer cut it at scale.

Some of the scaling challenges include:

  • The need to solve the same problems over and over

  • The desire to separate you logic from you presentation

  • The need to build in a modular fashion so things can be isolated and also easily shared

  • Putting in place guard rails to ensure best practice and a common understanding of how things are done

But as the front end becomes more complex over time, it also becomes harder to understand and maintain.

What is TypeScript?

TypeScript is a superset of JavaScript; a suite of extra features and capabilities that includes access to popular language features that JavaScript lacks (e.g., static typing, classes and interfaces).

TypeScript does something similar to what SASS or Less does for CSS, ensuring benefits from new language are compatible with old systems.

Why we love it?

1. Compile-time safety through strong types

Thanks to the prevalence of strong typing in backend languages, runtime errors in backend code are much less prevalent. There is no reason that the front-end code shouldn't be just as robust. TypeScript helps us close that gap by supporting (optional) strong typing.

This means if you refactor something incorrectly or you are inconsistent with the type that a variable represents, a compilation error will halt you. This is a great example of failing fast and quick feedback loops. It also includes type inference, which gives some of the benefits of types, without actually using them.

2. Use ECMAScript 6/7 features now

Often as web developers, we are restricted in how quickly we can adopt new features in-browser because of the sheer number of browsers and versions that need to be supported.

To counteract this complication, Shim and polyfills are often deployed, adding weight and complexity to applications. Using TypeScript bridges that gap for you and compiles down into JavaScript with excellent browser support.

This table is a great overview to understand ES6 compatibility across the board. From this table it's evident there would be a good fit to use TypeScript should your project require IE11 compatibility.

3. IntelliSense

IntelliSense is a general term for a variety of code editing features, like predictive text for code but with a much more complex job to do. Features including code completion, parameter info, quick info and member lists boost productivity and they help you to navigate, understand and write code much quicker.

4. Familiar to some, a learning opportunity for others

Most backend developers that have come from a typed language like C# will pick TypeScript up faster than JavaScript. An added benefit of this is the ability to create parity between your frontend and backend code.

The DTO models used between an API and the front end code that consumes it now can be done using strong types. This ensures ease of comparison and it keeps systems synchronised. It also protects your ability to understand and trace the impact when your rename of change the type of a property.

An additional benefit of this transition is that front end devs get more exposure to traditional object oriented programming concepts and syntax. In the long run, this is likely to have them more effectively cross-function into backend development.


5. Linting tools

While there are plenty of linting tools around for JavaScript, having worked with TypeScript and TSLint I have found it can do much deeper interrogation of the code. The resultant code is linted for logic and formatting, resulting in code that looks very consistent across the board no matter who has written it.

6. Easy to understand

When a project becomes large and difficult to track and understand, it becomes a form of technical debt. More often than not, without strong typing you will find yourself needing to remember details about preceding and following parts of the code to understand what an object is and what properties it has available.

This cognitive load is removed when you are reading TypeScript and guessing is replaced with knowing when you look at a variable. This ease of understanding can translate to features being implemented faster and in turn reduce the overall time to market.

7. Software Evolution

In its initial implementation, software tends to be clear, concise and well designed for the problems it has to solve. However, over time additional requirements dilute the original architecture and design. 

What separates software implementers and designers from one another is how these systems evolve and how new requirements and features are added, often with team members who were not part of the original design.

A very common occurrence as software organically grows is the emergence of ad-hoc types and the resultant snowballing of informal and often unintentional schema variations as data is passed from place to place.

TypeScript attacks ad-hoc type variations on two fronts; it requires work to define a new type (A form of intentional friction), and it removes friction from re-using existing types. 

As a result, developers on TypeScript will naturally tend toward greater type reuse, and as a flow-on effect, consistency and predictability is improved for any logic that depends on those types.

8. It’s still JavaScript in the end

Tom-ay-toes, tom-ah-toes. TypeScript, JavaScript. At the end of the day the code is compiled and the output is still JavaScript, this means there are no compatibility issues or considerations.

At IE we now encourage all new projects to adopt TypeScript as their client-side language of choice and have even extended that into some of our backend work. We have found it to be a big quality and performance booster across all of our projects.

It ensures we build high-quality robust systems that will not only scale as the code base grows but remain maintainable. We have lots of experience using TypeScript + React and Angular 2+ projects, should you want help with your project get in touch.