en
de
Software Engineering

How TypeScript helps us to develop great software

Nowadays, we use a lot of fancy tools, libraries, and frameworks in our web projects. Some of these tools are more important and helpful than others. One of the most important tools I would not want to miss in my projects is TypeScript.

TypeScript is a JavaScript transpiler developed by Microsoft and one of the most commonly used transpilers. The other popular one is a community project called Babel.
Contrary to Babel, TypeScript not only transpiles your code, it also offers a static type system which thereby improves code quality and enables advanced tooling.

Why do we need transpilers anyway?

Everything started 2015 with the ECMAScript version 6, lately also called ECMAScript 2015. The previous version was already more than 5 years old, so the update brought a lot of long-awaited features like classes, modules, arrow functions, promises and much more. The most famous implementation of this ECMAScript standard is JavaScript.

This was a game changer. All these features improved the language ever so. They made us more productive and made people feel more comfortable with JavaScript because of familiar concepts.  And ECMAScript is not done yet. We are already talking about ECMAScript 2017 that will bring features like async/await for a better handling of asynchronous code.  The result of all this is, that today JavaScript is one of the trendiest programming languages. 

Unfortunately, browsers are not that fast with implementing the new ECMAScript standard. So to be able to already use all these features already today, we need a transpiler. A Transpiler takes our feature JavaScript and transpiles it to ECMAScript 2015 which runs on all browsers and platforms.

Why TypeScript

My first project with TypeScript started in 2014. This was quite early because the era of transpilers had just started and ECMAScript 2015 wasn´t even finalized yet.  Back then, we chose TypeScript because of its type system and not because of its transpiling capabilities. We expected that TypeScript would help us to develop a mobile web application in an IoT-context with a distributed team with varying experience level, limited money, and a tight schedule.

This was a kind of a bet because using TypeScript added additional complexity to the project and most team members weren’t familiar with it yet. But it worked out and one reason for this is because TypeScript is just a JavaScript superset and can be applied progressively. Now, more than three years later we are more convinced about its advantages than ever.

Effects on the team

Due to the evolution of digital technology people can use software and the internet from wherever they are through their mobile devices. As a consequence, fewer people own desktop computers and more and more desktop applications and software is moving to the web. This implies that also more and more desktop developers need to adapt their skills and learn how to develop web applications. Another reason why JavaScript is gaining more and more acceptance.

Future JavaScript gives us classes and TypeScript enable us to also use types and interfaces. This makes switching to web development much easier for developers with an OOP background. The typing system of TypeScript consists of type annotations, interfaces, and classes. Type annotations are lightweight and can be applied easily.

function sayHi(person: string) {
    return "Hi " + person;
}

There are a handful of built-in types like string and number. If we want to define own types we can use an interface.

interface Person {
    name: string;
}

function sayHi(person: Person) {
    return "Hi " + person.name;
}

If we now would try to call

sayHi('John Doe');

we would see an error message saying that: Argument of type ’string‘ is not assignable to parameter of type ‚Person‘.

Using types and working with data contracts prevents stupid mistakes and makes it easier for new team members to extend the code base. It helps developers with different backgrounds to get started because they can use familiar concepts and it helps inexperienced developers by preventing common JavaScript mistakes.
Furthermore, the usage of classes, interfaces, and types lead to a code base that can be read and understood by more people on the team than just the frontend developers.

Advanced tooling

Using types, interfaces and classes enables a lot of tooling that helps us achieve a better code quality and to identify mistakes already before runtime.
We get the full power of linting which can save a lot of trouble because we can fix errors right away while writing the code. It enables us to detect simple mistakes, misuse of libraries, violation of data contract and usage of non-existing variables.

In addition, editors and IDE’s are able to offer powerful code completion. Next to classes and interfaces that are already describing which properties exists, this mainly gets enabled through type declaration files. These typing definitions are available for all browser and language-specific API’s and the majority of JavaScript libraries. We can also write own d.ts files and use them.

In this example, the code completion shows us exactly what is possible. This saves us time and prevents us from using wrong properties or misspelling them.

TypeScript and corresponding tools also improve refactorings like renaming, code documentation and debugging. Thanks to the community, there are a lot of plugins and tools that can be integrated into existing tool stacks and projects.

Better Maintainability

Another big advantage of TypeScript is that all these already mentioned points like linting, broader acceptance and advanced tooling automatically improve maintainability.

Developing a big codebase with several developers becomes easier because we have the types and tooling that makes our application more robust. We know that when we rename a property or change a method header and forget to change it somewhere else, we will receive a compiler error. We fail fast and our application becomes less error prone. For sure this doesn’t replace tests, but it helps the team a lot to not be afraid of necessary refactorings.

TypeScript offers flags to define how strict the compiler should be, enabling you to apply as many as you want. This is nice because you can choose a configuration that fits your team and hold the balance between productivity and restriction.

All the new features like classes, promises, async/await, collections improve the readability of our code, avoid spaghetti code and callback hells. On top of that, types give us the safety to use them and develop great software.

Summary

I don´t want to say that TypeScript is the best and you absolutely should use it. There are other toolchains like  Babel + Flow by Facebook that are looking promising and might be the right choice for your team. We at Zühlke also have teams that are using different tools.

But a fact is, JavaScript is not the little kid anymore. We are now using it to write serious software and real web applications instead of simple, static, text-based websites. Therefore we also need more serious tooling to improve maintainability and robustness of our projects and to be able to work on larger code bases in even larger teams. TypeScript helps us meet these requirements.

Don’t hesitate to comment below if you have any questions or want to know more.

Kommentare (0)

×

Updates

Schreiben Sie sich jetzt ein für unsere zwei-wöchentlichen Updates per E-Mail.

This field is required
This field is required
This field is required

Mich interessiert

Select at least one category
You were signed up successfully.