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.
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 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.
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.
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
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
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.
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.