Introduction
JavaScript has evolved over the years with new features and improvements that make it a more capable language. But despite this improvement, it still has countless limitations that make it a bad choice for building large web applications.
It's missing key features like type-checking that other languages have, which means that it can lead to bugs and even security issues in your application. Sure, you might not need the type-checking feature if your application is small, but as the codebase grows, the chances of errors increases.
JavaScript was really never designed to be a programming language for big applications. It's a scripting language, it doesn't have static typing, but more importantly perhaps, it lacks some of the structuring mechanisms that you need in large applications like classes and modules and perhaps interfaces.
Anders Hejlsberg (TypeScript Core developer)
This is why TypeScript was created, to give developers a syntax that's closer to the languages we're already familiar with while keeping all of JavaScript's advantages. And it's precisely what you need to build better web apps that don't rely on external libraries or frameworks that are difficult to integrate into your project.
In this article, we won't talk about what is TypeScript and how to add types to variables. If you want further details about basics of TypeScript, I'm sure you can find it, but you will not find it here.
Instead, I will cover why you should be using it instead of JavaScript for your next web application project and why it will replace JavaScript as the main programming language in the future.
The problem with JavaScript
Like many of us, I've written many JavaScript apps before introducing myself to the TypeScript world. I worked as a self-employed software developer for almost all of my career. And while doing so, I built multiple web applications for clients that were usually used for medium-sized businesses.
Some projects were so complex that I was often confused about how to organize my code properly to avoid duplicate code and make it more simple. The biggest issue for me was going back to a project after a couple of months. It always felt as if I was losing track of what I was doing in that piece of code, and that I needed to spend time re-reading everything to understand how the application was working again.
Consider this simple method inside the JavaScript class:
handleResponse(data) {
if (data !== 'success') {
this.handleError(data)
return
}
this.checkboxes.forEach(box => box.checked = false)
const message = this.sendToClients
? 'The invoice is created and sent to clients'
: 'The invoice is created without sending emails'
sweetAlert.fire('The invoice is created', message, 'success')
}
I call this method when an AJAX response comes from the server. When I had a task to implement a new feature, I had a hard time knowing what properties live inside objects. I still don't know what data variable in this code example contains apart from the “success” string.
Because of this lack of proper organization, I typically found myself spending a lot of time trying to figure out how a particular piece of code works again. This is what made me think that working on the backend is so much easier for me because I don't have to deal with anonymous objects all over my codebase.
Why TypeScript?
What are the major advantages of using TypeScript over JavaScript? Let me start by saying that the single biggest reason to use TypeScript is that it helps you organize your code.
It is like reading code and documentation at the same time. I can give a great analogy to the use of TypeScript. Imagine you bought a new house, and your task is to move all your things there. You have plenty of boxes with different things inside them - books, plates, clothes, furniture, etc.
Now, having a big JavaScript app is like putting all of your things in boxes and later organizing these boxes in your new home. You need to figure out where should you put your plates and glasses before you put them in their new home.
When you use TypeScript, each of your box has a categorized label and the sheet with the list of things that you put in the box attached to the box. You know exactly where things are located. It becomes so much easier to unpack things in a new house.
I know that everyone will agree that life is a lot better when you are well organized. The same is true for coding. As developers, we have many tasks on our plate. We need to write code for various features while taking care of the front-end UI as well. This is why TypeScript is in demand right now, it helps you stay organized. It gives you the ability to separate your back-end code from the front-end code and easily access them later on when working on new features.
The learning curve
You often might hear people say that learning a new programming language can be difficult and time-consuming. This is not the case with TypeScript. In fact, it is so easy to get started with it that you will probably find yourself wondering why you didn't start using it earlier.
I would suggest reading TypeScript apps on GitHub for some inspiration and best practices that you can replicate in your app once you are familiar with the basics of the language.
If you haven't spent time studying other people's code, stop reading this right now and find some open source code to study. Seriously! I mean it! Go search the Web for some code in your language of choice, written by some well-known, acknowledged expert.
Jørn Ølmheim
TypeScript was designed by Microsoft team to be easy to use by both, designers and developers. Anyone who knows JavaScript can easily learn TypeScript and start using it in their projects right away. There is no need to learn new concepts such as class or interfaces. It can be easily integrated with your existing code effortlessly.
When you deep-dive more into TypeScript over time, you will find things like generics, annotations, intersection types, and tuples which takes time to learn and start implementing in your code. But these will be worth learning because eventually, they will help you write less boilerplate code. You will be able to create flexible and reliable apps in no time!
JavaScript use cases
JavaScript is still pretty good for prototyping new apps and creating small applications. I think it is overkill to use TypeScript for simple apps like todo list or calculator, but if you do so, it will probably help you eventually as you begin to create more complex apps and programs.
You can even start building an app with plain JavaScript. And when you start noticing that it's getting popular, you can add TypeScript in it and sleep safely knowing that you will be able to support old browsers without too much trouble.
The other use case for using plain JavaScript might be if you have a team of developers who do not know TypeScript at all. In this scenario, I would teach them the basics so that they can use TypeScript in their projects later if they feel comfortable enough with it. As they get more comfortable with TypeScript, your team can start building TS apps instead of vanilla JS.
Other than prototyping and small apps, JavaScript is not needed anymore. There are already so many libraries with TypeScript support that you can use in your projects. For example, you can use the latest Vue or Angular that are written in TypeScript themselves. For React, you will need to install a @types/react
package to make it support TypeScript.
Conclusion
JavaScript overall is a beautiful language which lacks of some of the fundamental features that are necessary for building large, scalable applications. TypeScript, on the other hand, was created to solve all the issues that JavaScript has.
In this article, I don't say that JavaScript sucks, at the end of the day, you are still writing JavaScript in your ts files. If you love JavaScript as much as I do, stop using it for big applications and embrace TypeScript. It's easy to get started and easy to learn if you already know JavaScript.
Remember, that even with TypeScript, people will write systems that impossible to maintain. If you take someone who doesn't know how to drive and put him in a Lamborghini, there is a big chance that he will crash.
Awesome tools don't make us better programmers, but it helps us do things that we couldn't do before. Sure, I can live a joyful life without ever using Vue or React, but I would probably miss out on a lot of cool stuff. Maybe it's just me being in love with strongly typed languages like Go, Swift and Kotlin. If just love the power of TypeScript, I hope this power will be more common in JavaScript world.
Keywords: js, ts, frontend, hejlsberg, olmheim