09 March 2021
Why use TypeScript? Could it be the best way to write frontend in 2021?
TL;DR – yes, it definitely is. Thank you for reading this article. Just kidding, don’t go yet! 😁 Since you’ve opened this piece in the first place, you were probably looking for a more detailed answer to why use TypeScript question. In the next few paragraphs, I’ll explain why TypeScript is such an obvious choice for writing the frontend in 2021.
What is Typescript?
As always in programming, the answer is “it depends”. Of course, you can write everything in pure vanilla JS but why hurt yourself? 😄 It’s always better to have information about types than not to. But to warm up a little bit first, let’s take a look at some statistics.
Reports, we all love reports 📊
In 2020 The Software House prepared a report State of Frontend 2020. It’s a huge knowledge base about developers experience, satisfaction and daily workflow. You should definitely check it if you haven’t had a chance yet. When developers were asked, “Have you used TypeScript during the last year?”, 77% answered “Yes“ compared to 23% of “No” answers. Additionally, about 94% of respondents indicated that they like Typescript the most. The last question about TS from this survey seems pretty interesting, too.
Although answers in this question differ from each other it shows that people think that Typescript will definitely stay with us in the foreseeable future.
You’ll find more interesting facts, statistics and expert commentary on State of Frontend 2021 in our extensive report. 👇
But to not rely on just one source of information, let’s add another source of truth – the really popular annual survey State of JS. In this report, you can also see that satisfaction of using Typescript is on a high level and usage of this technology raises year by year.
Now with this knowledge, you know that Typescript is a big player on the market, so we can step into the details and answer the question of why and what is Typescript used for at all?
Check out the TSH experts comment in details on industry reports:
Why use Typescript? Because it’s the best programming language 🤩
TypeScript may save your project from failure
Now imagine that your system uses this function to calculate salary then automatically transfer money to your employees. We assume that this function takes numbers as arguments and should work flawlessly. But what if you have some bugs in your backend or application code and you get a list of bonuses as strings instead of numbers. What could possibly go wrong?
So as you can see, static types can prevent certain issues already at the software development stage. I know that for many of you my fellow readers this example looks trivial but remember…
Even the smallest bug can break the biggest system.
Author – me
Typescript documents itself
Typescript code is self-explanatory. Your type definitions written directly in project or library files can replace documentation in many cases. Look at this example. Let’s say that we have some function called renderItems which takes items as an argument.
- read the documentation (if one exist),
- add console.log(items) in the definition of this function, run the application and check the “items” argument in the console,
- try to find out where the function is used and from there track down what data is put into it,
- ask your colleagues if someone has been recently working on it,
- just assume that the items argument is what you think it is (but it’s not the best idea).
As you can see you have a lot of options to find out what is that thing you are looking at. But with a more complicated codebase, it can take much more time than you expect. Are there any better solutions? Of course, there are! Here comes the TypeScript! 😄 In TS you don’t have any of those things I mentioned above. You get answers to your questions immediately in your IDE or in the compiler when something goes wrong. In Typescript this function definition could look something like this:
Without reading the whole function definition you know that items parameter is an Item type array. Additionally, you just need a quick look to know what the item consists of. Of course, it’s good practice to keep type definitions in separate files but for the article’s purpose, I simplified things a little bit.
Typescript gives you great IDE support
Developers spend most of their time in some IDE’s (integrated development environment e.g. WebStorm) or more lightweight code editors like VSCode. Of course, every code could be written in a simple notepad but it would be painful and took far much more time. Developers use IDEs to make our lives easier and work faster. TypeScript provides a lot of features here, for example:
- Mouse hover support – you can just hover the cursor on part of the code you are interested in and you can see what hides behind it.
- Code auto-completion – in static type languages IDE, code auto-completion is just faster and works more confidently. Again, you don’t have to dig into documentation because of code hints.
Typescript has types inference
Typescript allows you to forget about console.log()
Typescript written apps are just way easier to debug because most of the problems you encounter in IDE or in compilation time. Personally, I found that since I switched to TS I spend far less time in the browser console.
Typescript works great with Node backend
Job interviews can be stressful but we have something that will help
Typescript improves project quality
Software projects are different and often involve more than one programmer. All these things I mentioned in previous sections lead to better and easier project maintenance. Developers can really appreciate all TypeScript flavours when their project grows and the team goes bigger.
Typescript is supported by the most popular frontend libraries
If all of the aforementioned arguments didn’t convince you to use TypeScript to write the frontend in 2021, I can just refer to “big players” on the market. All the popular frontend libraries like React, Vue or Angular are written in Typescript and support it out of the box. Vue 3 version has been completely rewritten in TS.
Why might you not like Typescript? 😥
I couldn’t exclude Typescript disadvantages from this article. Like every technology, Typescript has it’s cons too. For me, these are not big concerns at all but I understand that for some developers, these arguments will be enough to decide not to choose Typescript for their software project.
Typescript can be difficult (at the beginning!)
When you switch from the dynamic language it can be difficult to start a new project in this technology. You probably think: “OMG, now I have to write much more code than I would write in vanilla JS”. Additionally, the first contact with TS errors may leave you scared or surprised (or both as I was 🤣) – sometimes they are really hard and long to read indeed. But trust me, after some time you will appreciate this additional effort when your project grows or when you have a long break from it.
Typescript is not 100% reliable (duh!)
Now you’re probably thinking: “Wait… But you said that….”, so let me explain. Typescript is just another tool in the world of software development that people use to achieve better results in software projects. But people make mistakes. Some libraries or project files can have wrong type definitions. If you use popular open-source packages or libraries this happens very rarely, and even if does, you can check out GitHub issues or create a new issue by yourself. If you find a bug in type definitions you can even make a pull request by yourself to help this library grow.
Typescript is not used everywhere (yet!)
You already know that some types might be faulty, but I have one more surprise – there are packages and libraries that don’t have type definitions at all. 🤣 Very often libraries or packages have their own types inside them, but sometimes they just don’t exist. Fortunately, there is a huge repository Definitely Typed where you can check if your package misses any type definitions. 90% will exist and you’ll be ready to go. However, a few times I’ve managed to choose some less popular plugin or library which was lacking in types.
Typescript may be difficult to set up (in some cases!)
When you use a pre-prepared boilerplate, CLI or app wrapper, you’re basically ready to code. But when it comes to starting a project from scratch and configuring the Webpack, testing library, and Node.js server by yourself it may put your patience to the test. Although in my opinion, all advantages Typescript offers are worth this additional effort.
Why use TypeScript to write the frontend in 2021? Summary
As you can see, Typescript has its pros and cons. IMHO, TS disadvantages are minor enough, and the overwhelming advantages it offers are completely worth it. That’s why we choose Typescript by default for our software projects at The Software House and that’s why they became such an important part of our frontend services.
The article you’ve just read deals with more theoretical aspects and arguments on why use Typescript in 2021. In the second part that will be published very soon, I’ll show you a far more practical code example of why Typescript is the best choice for frontend development in 2021.