Why I Migrated From JavaScript to TypeScript Again | by Nicholas Obert | Mar, 2022

The advantages of TypeScript and when it is best to migrate to it

Picture by Chris Briggs on Unsplash

JavaScript runs the online, individuals say. Nonetheless, it’s additionally true that 39% of JavaScript builders hate it, in keeping with the 2021 Stack Overflow survey and solely 61% of them actually wish to work with it.

In 2012, whereas JavaScript was nonetheless king of internet growth, Microsoft launched their new programming language, TypeScript. It was designed to make up for JavaScript relating to massive, complicated programs the place its extra versatile cousin would get the builders upset.

The survey additionally exhibits {that a} vital share of JavaScript builders desires to work with, and even swap to, TypeScript. The info exhibits that the latter is presently the third most liked programming language and 75% of its builders wish to use it in 2022.

Some time again, I began engaged on a relational database management system (RDBMS) I needed to implement from scratch. Despite the fact that I by no means was a fan of JavaScript, I nonetheless determined to jot down the system in it with Node.js as a result of I needed to be taught extra about this expertise.

Initially, I used to be type of happy with JavaScript’s dynamic typing system and very versatile construction. I might write code a lot quicker than I’d have in a language similar to Java or C++, which might have been my first alternative for such a venture.

Nonetheless, because the codebase was turning into at all times bigger and more and more complicated, I began having frequent typing points. I’m positive most of you already know the frustration of receiving the “Can not learn properties of undefined/null” error message, however you haven’t any clue the place it may need originated.

Null TypeError in JavaScript.

One other battle with JavaScript was working with objects. I at all times had to return to the place I created such objects, as there was no approach of defining a strict template all situations should adhere to. To make it even worse, the IDE could not assist with catching typos and, most significantly, it couldn’t give any trace about what strategies and properties an object had. In spite of everything, the any sort doesn’t present a lot data for each you and the IDE to work with.

Whereas JavaScript does the job simply positive in codebases that reach for only a couple hundred traces of code throughout just a few recordsdata, you’ll positively get misplaced in hundreds of traces unfold throughout tens of deeply nested recordsdata and folders, to not point out the battle of getting again to work after some time, when you’ll most likely have forgotten how the item saved within the sqlToken variable that got here seemingly out of nowhere appears like.

Along with that, different builders that take a look at your code may go insane attempting to determine what a sure construction is comprised of or the way it ought to actually be used, to not point out the battle of debugging edge cases-related points.

Though it might appear scary emigrate your codebase to a different expertise, particularly when you find yourself not conversant in it, and most of the people are likely to avoid it, it’s generally needed. In my case, I needed to swap to TypeScript two occasions.

The primary venture I needed to migrate was the database administration system, which was an absolute ache to rewrite. Initially, I needed to be taught the language and how you can arrange the event surroundings. Then I went by the entire codebase and located dozens of dumb typing errors and unhealthy practices I did not even take into consideration. In reality, when you find yourself not required to speculate a lot psychological effort into consciously designing the information buildings you may be working with, you are likely to pay much less consideration when writing code.

The second venture I needed to migrate was a React frontend of a reserving system. Thankfully, frontend code doesn’t often encompass a lot logic, so it was comparatively simple to rewrite in TypeScript. Nonetheless, it’s essential for an utility to deal with accurately information exchanges between the backend and frontend. Specifically, probably the most difficult half is agreeing on a standard construction, often JSON, to characterize the information inside requests.

When defining such construction, it’s a good suggestion to be as strict and exact as attainable with varieties, defining what’s allowed and what’s to not keep away from probably harmful edge circumstances. That is the place statically typed languages similar to TypeScript turn out to be useful, as they don’t help you carry out operations — at the very least straight — that would lead to sort errors.

TypeScript catching a dumb bug.

Now, to alter the codebase language from JavaScript to TypeScript, it’s important to undergo a two-step course of. Initially, it’s good to arrange the event surroundings. This consists of putting in the wanted dependencies and making a tsconfig.json to outline the compiler settings.

Within the root listing, run the next instructions so as to add TypeScript to the venture. Notice that you’ve got should have npm put in in your system.

npm set up typescript — save-dev
npx tsc --init

Now it’s important to edit the newly created tsconfig.json file in keeping with your wants. To maintain the article extra concise, I gained’t give attention to how you can do it, however you may observe this simple guide. Anyway, under is an instance of tsconfig.json for a Node.js venture:

tsconfig.json for a Node.js project.

The second step is to regulate your JavaScript code by including static varieties and fixing eventual apparent bugs that can come to gentle. Nonetheless, to perform this it’s important to know some TypeScript within the first place. Thankfully, it’s not laborious to get began with and there are numerous good on-line tutorials about it.

Beneath is proven an instance of a Redux retailer slice first in JavaScript, then in TypeScript:

JavaScript code for Redux storage slice.
TypeScript code for Redux retailer slice.

Congratulations! You will have simply made your codebase rather more sturdy and dependable with little effort.

Despite the fact that I personally don’t like JavaScript, I have to admit it has its place within the software program growth world. In reality, its versatile syntax is ideal for shortly and easily dealing with internet requests and all types of occasions. Furthermore, due to its excessive abstraction stage, it’s a fantastic software to get began with and permits you to simply implement your concepts in code.

Regardless of that, although, JavaScript just isn’t at all times one of the best reply. Whereas it nonetheless holds its throne within the growth of frontend layers, sadly, it lacks the reliability and robustness required for complicated logic and large-scale programs for all the explanations I’ve talked about earlier than.

In essence, for those who don’t foresee your codebase rising past just a few hundred traces of code, could be higher off sticking with JavaScript, as TypeScript could also be considerably overkilling. Alternatively, for those who plan on implementing quite a few options or dealing with massive quantities of information, then it is best to begin straight with TypeScript.

If you’re not sure as a substitute, you can begin constructing with JavaScript and finally adapt your codebase to the scenario. No less than in my expertise, your code will turn out to be too laborious to handle earlier than it’s too massive and entangled emigrate to a extra well-structured tech stack.

TypeScript vs JavaScript use case diagram.

To wrap it up, JavaScript is sweet sufficient for easy and small programs similar to an utility frontend or a minimal API backend. Nonetheless, relating to extra complicated software program similar to a reserving system backend or a database administration system, you had higher use a better-structured programming language similar to TypeScript or some other language that options static varieties.

As a lot as it might be good, JavaScript just isn’t the answer to each downside. That is the explanation why many alternative programming languages and applied sciences exist within the first place: they have been designed to perform a selected job. And, though you may certainly use only one tech stack for each system you construct, it doesn’t imply that it is best to. In spite of everything, you don’t use a hammer to bump in a screw: a screwdriver does the job a lot better.

There isn’t a one-size-fits-all method in life. All of it boils all the way down to utilizing the proper software for the proper job.

I hope you loved this text. If in case you have something so as to add or any query, please share your ideas in a remark.

Thanks for studying!

More Posts