84C69042-0571-4E30-A2A5-FF2385BABDF7@3xCreated with sketchtool.

Development

Typescript vs Javascript in web development

Like it or not, JavaScript is still the dominant language in the web development space. Despite the countless advantages of TypeScript and other languages like it, nothing seems to be able to topple JS’s status as the lingua franca of the modern web. Should it be that way, though? In this blog post, we’re going to take a closer look at TypeScript and why it should be considered a worthy successor to JavaScript.

Originally envisioned in 1995, JavaScript was created by Mosaic Communications for its NetScape browser. Brendan Eich, the language’s main architect, famously designed and implemented the first prototype of the language within 10 days. Designed to provide a degree of interactivity to the then-exploding World Wide Web, JavaScript stood the test of time and exceeded its creators’ wildest dreams. These days, the language can be found everywhere, not just within browsers. It works on servers and even within the standalone desktop and mobile applications.

brendan_eich_wide-a3fe697134cc3d9aa2b40a83d45c1773850e4fc8-1024x575.jpg

Unfortunately, there’s a problem. All JavaScript was meant to do was to make static documents which made the original world wide web slightly less static. The web, however, evolved rapidly – and JavaScript tried to keep up. However, it needed to maintain backwards compatibility, which meant any large-scale changes to the language were (and still are, to some extent) out of the question. This means that the design limitations of JavaScript as designed in 1995 still affect us today.

These limitations can be particularly painful whenever we try to use the language to create any large-scale app or system – something which JavaScript was not designed for. The lack of strong typing within the language is an especially common pain point. JavaScript handles types rather poorly – to the point where it’s openly mocked in talks and conferences.

TypeScript aims to solve this problem by being exactly what it says on the tin – JavaScript with strong typing. There are, of course, more advantages of TypeScript than just typing. Before we can get down to discussing them, we need to understand what TypeScript exactly is.

Hello,TypeScript!

TypeScript is a language introduced in 2012 by Microsoft. It transpiles to JavaScript – as in, before it’s deployed on a website or within an application, it compiles to JS which is then run in the browser or on the server.

TypeScript is also a superset of JavaScript – technically, it still is JS with additional bits bolted on top. Any valid JavaScript program is also a valid TypeScript program. This is a major benefit to programmers considering a dalliance with the language: they can start off on an existing codebase, adding new syntax and features as they learn at their own pace.

Speaking of programmers, one of the stated goals behind TypeScript was to help programmers familiar with strictly-typed languages (such as Java or C#) transition to web development. One of the major advantages of TypeScript is its similarity to those established languages.

Not just a language

One of the biggest advantages of TypeScript is the fact that it’s not just a language: it comes with a very mature tooling ecosystem, which includes a compiler and integrations for the most popular IDEs and text editors.

The strong typing present in TypeScript allows for the use of highly-productive tools and practices in modern software development. Refactoring your entire project becomes a breeze, while static type checking ensures the high quality of code.

Finally, TypeScript boasts some very impressive integration support for major build tools. If you’re an experienced JavaScript developer, you’ll be glad to know that all your favourites, such as Babel, Grunt, or WebPack not only support TypeScript, they do it well.

Oh, and if you were wondering if TypeScript plays well with Angular and/or React, rest assured – Angular pretty much requires the language, while the TypeScript + React combination is steadily gaining in popularity.

typescript-logo-facebook-788x412.png

Why Typescript, then?

Enough superlatives, however – let’s get down to business. Why should you choose to migrate over from JavaScript to TypeScript?

Strong typing enforces good coding practices

Let’s consider an all-too-common scenario. Imagine you’re a programmer, newly assigned to a project. Your first assignment is to properly format the output of a function which takes a single argument, foo. Sounds simple enough, right? But what even is foo? Is it a string? Is it a number? Is it an object?

Unfortunately, the previous coder on the project didn’t properly comment his code. After all, if he could figure out what foo was, why can’t you?

And so, you set about digging through the rest of the codebase, looking for every place where the function was called to figure out what foo is meant to be. And just like that, a ten-minute job turned into an hour-long investigation, because reading the code turned up more uncertainties and the previous programmer was last seen hurriedly buying a one-way ticket to Timbuktu.

If only there was a type attached to the foo variable – at best, the most work you would have to do was look up the class definition.

To the more experienced amongst you, this example may seem trivial – and that’s exactly the point. After all, trivial mistakes are the easiest ones to make.

Easy to maintain codebases

If you apply our previous example to a large app project – large projects being explicitly what TypeScript was designed for – and we can immediately see the benefits. Because of the way static typing subtly encourages programmers to work in a very specific fashion. From a business standpoint, this manifests itself in two primary ways.

Firstly, programmers working in statically-typed languages are subtly encouraged to follow certain patterns when writing code. Chief among these patterns is the separation between definitions and actual logic. Like our previous example demonstrates, it’s useful for onboarding new project members – but it also makes refactoring a breeze. It’s much, much easier to implement major changes when you know where everything is supposed to go.  As an added bonus, code written that way is much easier to read for humans – making code reviews fun.

Secondly, since every TypeScript app has to compile to JavaScript first, testing is enforced – after all, if it doesn’t compile, there must be a bug! Regular JavaScript allows programmers to write code which will run until it encounters a problem – which is fine for simple websites (which the language was designed for, let’s not forget). The moment we start getting fancy with our apps, however, is when hunting for bugs starts consuming most of our development time – after all, the app will attempt to run until it hits a bug.

Because TypeScript apps have to compile, the most common bugs can be caught at that time – saving you precious man-hours which would otherwise be spent on fixing bugs well after they were introduced into the codebase.

It’s all optional!

Speaking of business standpoints – our favourite feature of TypeScript by far is that it doesn’t require a serious commitment. In fact, the barrier to entry is tiny: simply start using the compiler. TypeScript is still JavaScript, after all. Valid JS code fed into the compiler will result in a working program.

What this means in practice is that you don’t need to re-write your entire codebase just to take advantage of a single feature. Your development team can explore TypeScript at their own pace, learning as they build new features. In fact, this is also one of our favourite React features – why not kill two birds with one stone and try two exciting new technologies at the same time?

Well, what’ll it be?

Obviously, there’s much more to the TypeScript vs JavaScript debate than this. The points we mentioned, however, should serve as a decent introduction to the language and many of its concepts. We hope you found this article useful and we’d wholeheartedly like to encourage you to give TypeScript a try.

Who knows – maybe it’s exactly what you’ve been looking for to make your web development experience that much more pleasant.

If you feel like you wanna talk about using Typescript in your project – let us know on hello@appnroll.com !

Clutch logo 4.8stars

2020 Appnroll Sp. z o.o.

All rights reserved

Privacy policy
We are we rock IT
footer_svgCreated with Sketch.

Hey, our website uses cookies.
We hope you’re cool with that? Read more