Typescript vs Javascript

What is Typescript

Typescript is a language developed by Microsoft to avoid the common pitfalls of Javascript programming. More than being a new language, typescript tries to achieve being a super set of javascript. As you already know, javascript doesn’t have type information and until recently it didn’t support real object oriented design patterns like classes etc. Being the world’s new baby and gaining tremendous attraction so fast, javascript has been evolving faster than anything. The ability to write code in one language and shipping it to browsers, backend services (Thanks to NodeJs) or even having it as a native desktop(Thanks to ElectronJs) or mobile applications(Thanks to Ionic, Cordova and many more) brings a huge benefit to the table. Especially with the recent shift in the world from structured relational databases to NoSql databases(Mongo, Microsoft CosmosDb, Google Datastore, AWS DynamoDB) made Javascript programming a much easier choice.

Backward Compatibility

Even though the points above makes Javascript a really strong choice, it also brings many issues to the table. No evolution is without a hassle and evolving so fast, Javascript capabilities change day by day(I’m certain there are already some new features as you’re reading this). This brings up the issue of ability to support new features. Living in a world where there are multiple browsers built on top of different Javascript engines and users not being on the latest versions makes it really hard to use new features. You can take a look at canIUse.com to see which browser supports which features. For ex. https://caniuse.com/#feat=async-functions. This is one of the biggest benefits of Typescript language. Being a transpiled language, it handles backward compatibility by default. You can use most of the latest features and once you compile your code into Javascript, the compiler will output javascript code that’ll virtually work anywhere. So you can enjoy the burning hot new features without worrying about compatibility.

Object Extension on the fly

All of use gets amazed by how dynamic the objects in Javascript are. If someone is passing you an object, you can just define new properties with zero effort. Let’s check out the example below;

This looks and feels super useful. No time wasted defining a class structure, no compiler errors, can evolve any object on the fly. But is that a good thing? I agree that this improves the speed of prototyping but if you ever try to go back into your code you wrote a while ago, or if you’re trying to read someone else’s code (Especially if you’re working on a multi engineer team) it becomes a hassle to follow the code and know what’s inside your object. This opens up a lot of issues with maintainability and security. Having clearly defined types prevents many errors and makes reading and extending the code a breeze.

AutoComplete(Intellisense) support

I think this is my favorite out of all. If you’re working on an IDE other than NotePad you’ll find it amazing to have your autocomplete and code suggestion working thanks to the type information. Here is a screen shot from free IDE VS Code;

Database Interactions

One of the most common task is interacting with databases. Let’s say you have a table for Users and the values inside are (id, userName, password, creationTime). When you don’t know the type information on your table it becomes really hard to manipulate data. For ex. if your id is a number and you use Mongo to say db.collection(‘users’).findOne(id: ‘3’), it’ll return an empty response even if you have a user with id 3. Because Mongo checks the type match as well, searching for a string ‘3’ doesn’t match the id number 3.

Another problem comes from the same source. Because databases only save the data you provided, it’s almost impossible to get the full picture. Let’s say you created two object inside the same table;

If you go to your table and check out user with id 1, you’ll realize it doesn’t have a creationTime field anymore. You can imagine having millions of records and each having something different will make it almost impossible to know all the possible fields an object can have.

Bad Code Detection

I’ve seen many small typos that causes your NodeJs application to crash. Because there are actually no checks until your code is executed, you’ll not hear any complaints until the code reaches a point which might cause as big of a problem as an application crash. And being a believer in fail fast approach this is not even the worst. At least you’ll realize something is terribly wrong and fix it. There are also a lot of cases where some variable is “undefined” and you’re just using it thinking it exists and the code is doing something but you have no idea if it’s right or wrong. One of the biggest benefit of typescript is, catching these errors at the compilation time. Because it analyzes all the code in your project, it gets the full picture and tells you all kind of errors and warnings.

Real Object Oriented Design

Until recently javascript didn’t support an object oriented design explicitly. You can define functions and define properties inside but it’s not really intuitive. Thanks to ES6 now you can define classes in javascript. But still, it doesn’t support access modifiers and many more features of object oriented languages. Typescript comes with all the benefits;

No Migration Needed

You don’t need to convert all your javascript code into Typescript. You can just define type definition files and use your existing javascript code inside Typescript.

No issues with ‘this’ pointer

In javascript ‘this’ points to the current function being executed. So if you have a function definition inside another function and call this, it’s so easy to introduce bugs by reaching to the wrong ‘this’. Typescript prevents these errors by knowing what class you’re trying to access by the ‘this’ keyword.

Debugging Support

If you’re concerned about debugging your code, it’s super simple. You just need to tell your compiler to output sourcemap files. Then will be able to put a breakpoint, see your typescript code inside debugger and go line by line and observe the values in variables like you’d do in any other language.

Fallback to Javascript

The best of Typescript is, it’s a superset of javascript meaning all javascript code is a valid typescript code. Of course in a perfect world, you’d set your compiler flags to make sure your code is super well structured. But if you wanna switch over to javascript every once in a while, you totally can. And at the end of the day, Typescript code isn’t that different than Javascript code. Especially if you’re coding in ES6 and using Classes, your code will be 95% similar to a typescript.

Who’s using Typescript

You can find a big list of users at their website: https://www.typescriptlang.org/community/friends.html

But my favorite ones are;

Typescript Compiler itself is written in Typescript

Visual Studio Code

Angular

Ionic

Leave a Reply

Your email address will not be published. Required fields are marked *