TypeScript vs JavaScript

February 2018

What is TypeScript? What is JavaScript?

JavaScript was introduced in 1995 as a weakly typed scripting language by Netscape to make HTML dynamic. The web has changed since then. What have been simple "Homepages" back in 1995 are now complex webapps. JavaScript wasn't originally designed for those large scale applications. To adjust for the changes, adjustments to the JavaScript language have been proposed and adopted to various degrees by different browsers. So when we say "JavaScript" it isn't actually clear what we mean.

Currently, all major browsers understand the JavaScript version from 2009 called ECMAScript 5 (ES5) (ECMA is an organization that develops international standards and is responsible for standardizing JavaScript). So usually when someone says "JavaScript" without any further specification, what they mean is ES5. However, ES5 isn't the latest released version of the "JavaScript" language. In 2015, the 6th edition called ES6 or ES2015 was released. In 2016, the 7th edition called ES7 or ES2016 was released. So there is a gap between the latest official version of the JavaScript language and what browsers are capable to understand.

Summary to this point: There are different versions of JavaScript. Browsers understand ES5 and this is often what we refer to as "JavaScript", but the most recent official version is ES7.

Since JavaScript (ES5) is the only language that browsers understand to make html dynamic, you've got a problem if you don't like it. For example, if you prefer strongly typed languages, like for example Java, then you might not like JavaScript. So what can you do about it? Your only option is to choose a language that can be compiled (transpiled...) to JavaScript. There are different options to choose from.

Languages that can be compiled to JavaScript (ES5) (except for some constructs that have to be handled with polyfills):

Aha, there we have it the first time, TypeScript. So TypeScript is a language that can be compiled to JavaScript. What else characterizes the TypeScript language? Basically three things:

  1. It is optionally typed. This means you can add type declarations to your regular JavaScript and define new interfaces. This is for example really useful for API documentation.
  2. TypeScript is a superset of JavaScript. This means that valid JavaScript is valid TypeScript. This only holds true in the sense that a JavaScript output is produced on compilation, while the TypeScript compiler might still throw errors.
  3. TypeScript can be compiled to all major versions of JavaScript (ES3, ES5, ES6, ES7).

Talking intelligently about TypeScript vs JavaScript

Since there are multiple versions of JavaScript, we have to be more specific about which version of JavaScript we're talking about here. Are we talking about ES5, the version that is supported by most browsers? Or are we talking about ES7, the most recent version? Or about ES6?

The second question we have to ask ourselves is which context we're talking about. Are we talking about a simple hobby website? Are we talking about a large web app? Are we talking about a micro-service in the backend? How many people are involved in the project?

Those points will be included in the following sections by separating the JS versions and analyzing strengths in respect to the project setup.

Strengths of Typescript

The basic argument of TypeScript vs JavaScript boils down to strongly typed vs weakly typed languages. Of course there are more factors, like adoption, build complexity and learning curve, but the essence of it is still whether to favor strongly or weakly typed languages. There is research on the topic, like for example "A Large Scale Study of Programming Languages and Code Quality in Github", which concludes you're slighly better off in terms of bugs with TypeScript than with JavaScript. However, research on topics like that has to be considered with caution, since it's hard to actually interpret data meaningfully. In my opinion, TypeScript hits the sweet spot for typing since it's optionally typed. You can just rename your .js files to .ts and add types gradually.

From my experience, types add an advantage in the sense of better documentation. Other programmers (and yourself, later on), will immediately know what data type goes in and comes out of a function. That's also very valuable for any API, since you don't have to sit there with the API Docs open all the time. The autocompletion on IDEs is still superior for typed languages than for dynamic languages, even though IDEs can guess some types through type inference. About the verbosity argument, I think of types as integral part of documentation and as such a good kind of verbosity. I feel that those advantages kick in for anything more than 100 lines of code or when using any external libraries.

I'm not the only one that thinks like this. Industry leaders such as Angular and RxJS have adopted TypeScript. This alone gives a strong sense of justification for TypeScript. The question we're trying to answer here is how will the adoption of typescript look like in 5 years? Currently there's a strong trend upwards, but no-one can tell how the future looks like. To me, Google adopting it is a positive sign, not a guarantee that it will stick around, but better than nothing.

Strengths of ES6 / ES7

One of the advantages of ES6 / ES7 is, that it's the "accepted" language of the web. That means, that you'll have a low chance of that language going down in popularity over the years. With TypeScript, for example, there could come along another company that propses another type system (e.g. Flow) and the community is split. That means, when you're looking on the market for developers, almost all web-devs will know es6 / es7 but only a subset will know TypeScript. Having this kind of assurance that your chosen technology is meant to stick around is a great asset.

Apart from that, since TypeScript is basically "ES7 + types", it still comes back to the strongly vs weakly typed discussion. Since you still need to compile your code to ES5 for browsers to understand it, you don't really get the "simplicity bonus". Even when you run your code on node, ES6 is only partially supported yet.

Strengths of ES5

The main advantage is, that it's still the only language that browsers understand across the board and thus you don't have to transpile your code. The benefit is twofold: You don't need know anything about any build process or transpiler and you don't have to wait for the transpiler to transpile (development can be faster).

You also won't need a module loader, you simply include other scripts with scripts tags. The advantage of this is that everyone having touched a website in the past 20 years knows how this is done. Again, this is perfectly fine for small pages, but becomes troublesome for larger scale apps.

At first it might also look like an advantage, that ES5 is a subset of ES7 and a subset of ES6. Everyone that knows ES6 also knows ES5, but not the other way around. That way, it seems to be easiest to find programmers on the market that know how to maintain your project. On the other hand, you'll have a legacy solution and programmers fluid in ES6 will be less than thrilled to maintain an ES5 project. So all in all I definitely wouldn't recommend building a solution based on the assumption that it will be easier to recruit ES5 devs.

Conclusion

If you're unfamiliar with TypeScript / ES6 / ES7 and just have a tiny webpage to build, you're fastest choosing plain old JavaScript (ES5). However, since it's a "deprecated" version of JavaScript, it's still better for your project and your career to dive into ES6, ES7 or TypeScript and learn the new concepts. It will be a bit daunting at first with module loaders and everything, but it's worth it if you're planning to stay with web development a little longer.

If you're working in a team, build something that has to scale and has to be maintained for a long time, choose TypeScript. I know this is an opinionated conclusion, but in my experience the benefits of TypeScript outweigh the learning curve and the additional keystrokes for declaring types. Since ES6 / ES7 currently still need to be compiled to ES5 anyways, you just as well might use TypeScript instead of Babel or something else to do that job. Then you can proceed to gradually add types where you feel they would be helpful. I add types quite rigorously to my TypeScript projects, as I really appreciate the documentation and autocompletion me and my team gains from it.

Interested in TypeScript?