Blog
Typescript vs. Javascript - Differences and Choosing the Right One for Your Needs
Unless you've been living under a rock for the last few years, if you're into something related to Front-End web development, you've surely heard of TypeScript.
TypeScript is a programming language built on top of JavaScript. This superset of JavaScript provides the language with several additional features that make it possible to write code with fewer errors, make it simpler, more consistent, and easier to test.
Since its inception by Microsoft in 2012, the adoption of TypeScript has only grown. Especially since Google decided to adopt it as the default language to develop with Angular.
Its rise has been unstoppable. Over 65% of Web Front-End developers have already used it at some point and are interested in using it in their day-to-day development life in the future:
And since it can be used with Node.js it is growing a lot on the server-side as well.
But what exactly is TypeScript?
ECMASCript 6 or later added many features to classic JavaScript (ECMAScript 5), such as a much clearer syntax for object-oriented programming and many new functionalities that did not exist before: promises, asynchronous programming, symbols, etc. Still, it has limitations and difficulties. TypeScript goes one step further and adds more functionality to ES, such as strong typing, annotations, or modules.
Because TypeScript is a superset of JavaScript, all code written in JavaScript is valid for TypeScript. But the opposite is not true. That is since browsers do not understand TypeScript, it is necessary to compile it (the correct word is "transpile") to JavaScript before using it in a browser.
TypeScript can be transpired into any variant of JavaScript / ECMAScript that we want. For example, if we know that our project will work in old browsers, we can force it to compile to ECMAScript 5 (the classic JavaScript, supported by all browsers, including Internet Explorer). However, if we are clear that users are going to use relatively recent browsers, we can generate a simpler final code supported by ECMAScript 6 or later.
Note: in case you were wondering, isn't that also done by Babel, which helps us use new ES features in classic JS? Indeed, it is. But Babel does not have type checking or other of the advanced features that TypeScript offers (we will see them now), and they (TS and Babel) are also 100% compatible. In fact, TypeScript has a plugin designed specifically to work with Babel. So if you use Babel you can keep doing it with TypeScript. Some say they are a couple forged in heaven.
JavaScript features compared to TypeScript
To give you an easy-to-see summary of the features in which TypeScript improves upon JavaScript / ECMAScript, we leave you with the following comparison table:
(Slide the table left and right on mobile devices)
| Characteristic |
JavaScript |
TypeScript |
| Static typing |
Does not exist: variables can be changed of type on the fly, at any time. |
It is a strongly typed language so we must indicate in all cases the type of data to handle and errors will occur if we change it. It also supports type inference in declarations, fixing them from there. |
| Generic types |
They do not exist. |
It allows you to create reusable code based on generic types (not to be confused with the absence of strong or static typing in JavaScript). |
| Structural typing |
Does not exist. |
It allows the creation of structures based on interfaces so that we can work with a predefined data structure that does not go outside of certain parameters, but at the same time it allows the flexibility of using equivalent structures with different types. |
| Enumerated types |
They can be simulated with simple classes, but they do not give, by far, the same robustness. |
TypeScript allows you to define enumerations and maintain robustness when using them so that we cannot get out of them. |
| Tuples |
No support |
Supports Tuples as basic data type |
| Modularization |
It supports modules as does ECMAScript 6, but the module support in browsers is still recent. |
It offers support for modules directly in the language. |
| Object-oriented programming |
Prototype-based, with complex syntax in ES5, and simplified syntax in ES6+. |
It offers a syntax very similar to that of other languages such as C# or Java, and also adds new capabilities in ECMAScript, such as abstract classes, access modifiers, enumerated types. |
| Interfaces |
No support |
In TypeScript interfaces are essential and allow you to create a multitude of advanced scenarios. |
| Namespaces |
They can be simulated in a basic way |
Total support integrated in the language, helps us to better organize the code and avoid conflicts. |
| Decorators |
No support |
It offers built-in support for this feature, making aspect-based code writing and dependency injection much easier. |
Tooling
All of this is fine, but a simple comparison would be to leave out possibly the most important thing: the great support of tools at development time that TypeScript has, that is, what is popularly known as tooling.
The main thing to know is that TypeScript integrates a component called tsserver and a protocol of the same name that encapsulates the compiler and other language services and exposes them as a service for code editors. This provides a great ability to validate code as it is being written and provides contextual help (known as Intellisense) to the programmer while programming.
This gives us an enormous capacity to create code with fewer errors and to receive help throughout the development process.
All major code editors, like Atom, Sublime, EMacs, NeoVim ... and of course Visual Studio Code, include support for this feature.
Can you get something similar in JavaScript? Yes, but it implies documenting absolutely everything you write with JSDoc and that your editor supports you for it (most of them do). That is, it is not direct, much less automatic.
Advantages of TypeScript
We can summarize the main advantages of TypeScript in this list:
- It's easy to learn, and the whole team can catch up with it in no time. Although you must first know JavaScript thoroughly, that is, it is not for beginners.
- Makes JavaScript an "adult" language, comparable in many ways to Java or C#. In fact, you can start small: writing JavaScript and gradually adding TypeScript mixed with the previous one, since it is 100% compatible with JS.
- It allows you to develop without worrying about the support of certain new features that are incorporated into the different versions of ECMAScript, since the code is then translated to work with older versions.
- Improves contextual help as you write code, as it is more information-rich than JavaScript. In editors that support it (and there are many), you will notice a big difference and it will reduce the mistakes that you and your team make.
- It allows you to create standardized code across the work team, leaving much less room for problems and to grow it in the future as there is better native support in browsers for certain features.
- It works well with the Front-End libraries and frameworks you are using. Some, like Angular, Ember, or Aurelia take special advantage of it, and even the combined use of TypeScript + React is becoming the norm.
Disadvantages of TypeScript
Not everything was going to be wonderful (although most were). Let's see the main "drawbacks":
- The learning curve is greater than that of JavaScript. Not that it's particularly complex, but it's certainly not like a normal scripting language. To begin, you need to know JavaScript well, because it is based on it. But it also implements many other advanced concepts typical of other languages such as C# or Java, so some things can be more difficult for those who only come from a background of only web development. Anyway, you can learn fast.
- Somewhat complicated type system. Its main advantage, the strong typing, is also a source of frustration since if you want to get the most out of it, it forces you to write down the types everywhere (it can be tedious) and it takes away from the undeniable flexibility that weak JavaScript types have. Obviously, each approach has its advantages and disadvantages, and finding the balance between the two can be difficult.
- It must be compiled. TypeScript, as we mentioned before, is not a language supported directly by browsers and therefore must be transpiled into conventional JavaScript / ECMAScript before deploying it. That adds one more step to the normal work, although of course it is automated on all occasions, either directly by the native compiler of the language (`tsc --watch), or by means of the normal tooling: npm, Grunt, or Webpack among other tools.
- .D.ts files: to work in the best possible way with third-party libraries/modules it is necessary to have "environment definition" files (with a .d.ts extension) and not all of them have them or they are not of the quality that would expect.
- False sense of security. Since TypeScript gives you compile-time type checking and detects many possible errors before they occur, some programmers come to think that TypeScript code is 100% safe and will not have problems displaying it if it has compiled correctly. But they forget that JavaScript is still underneath, so anything can happen. Of course, the security of the code will improve, but it is not foolproof.
So do I use JavaScript or TypeScript?
Let's see, as in so many other things, nothing can be stated as an absolute, but a good rule of thumb would be that for small projects using TypeScript is a bit of "gunning down flies with a shotgun", so it may not be worth it.
Now, in medium or large projects, and especially if several people are involved, writing the code in TypeScript offers great advantages that will be noticed in the short and long term.
If you work with Angular and other similar frameworks, using TypeScript is almost a must. In fact, in the case of Angular, docs are written in this language and the documentation clearly encourages its use. Also, almost all the literature, posts, and examples are written with TypeScript.
So our advice would be to work with TypeScript to see what value you and your team can get. Most of those who start programming with the language quickly become "dependent" and end up using it for almost everything.
We hope you find it useful!
