What is TypeScript and Why You Should Use it in 2021

Nowadays, Javascript is a popular programming language used in almost all websites. The first stable version of TypeScript was released in 2014, and I think it's going to be one of the trends at the end of the year. Discover what the pros and cons are, and when to use it!

My developer's story

When I started to learn how to code, I mostly used languages such as C, and C++, and for me, one of the missing features in Javascript was the typing. Don't worry if you don't know what's typing, or what the differences between dynamic typing and static typing are; I will introduce these notions to you in the next section of this post.

A few months ago, even though I'm still in my last Master's degree year, I joined a startup in Paris as a fullstack javascript developer, and at the same time, I started to use TypeScript.

Thanks to Typescript, I recover the feeling of developing in a strict and precise language like when I was doing C++. You're probably wondering why I think it's essential to use types? I explain it all in this post.

Dynamic Typing vs Static Typing

Before going further with TypeScript, you need to know the difference between Dynamic Typing and Static Typing. As you probably already know, when you're programming each variable is typed. Code is like a human; it needs to give a name to a type of data (a number, a character, etc.).

The dynamic typing is considered as the most simple to write because the used programming language will deduce what kind of data is into a variable.

Note: You will find this kind of typing in languages such as Javascript, and Python.

const my_number = 0 // Javascript will deduce that my_number is a number
const my_string = “Hello, and welcome on HereWeCode!// Javascript will deduce that my_text is a string

At the opposite of dynamic typing, when you're using a programming language with static typing, you need to write the type directly in the code.

Note: You will find this kind of typing in languages such as C, C++, Java, etc.

const my_number: number = 0 // my_number is clearly defined as a number
const my_string: string = “Hello, and welcome on HereWeCode!// my_string is clearly defined as a string

What is TypeScript

TypeScript is an open-source programming language developed and maintained by Microsoft. As you can guess by the name, TypeScript is adding a static typing feature to JavaScript. It's considered as a superset because it's adding new features to JavaScript. As a superset, all JavaScript programs are also valid TypeScript programs. You can use TypeScript to develop front-end and back-end applications. It fits well with Vue.Js, React.Js, Node.Js, etc.

Why do you need to use TypeScript in 2021

Discover a list of the pros of converting your Javascript code to Typescript.

  • Errors are not displayed anymore on run time. Did you notice when you're programming with JavaScript errors appear on the fly (during the code execution)? For example, when you click on a button the code is executed until you get an error on a specific line. When you're using a typed language, all your types are checked at the compilation time. Before running your code, your compiler will check and display errors if there are issues. It can save you a lot of time and helps you to prevent potential crashes or bugs.
  • Start when you want. TypeScript can read JavaScript files, and you don't need to rewrite all your code to use it. You can do it file by file until your project is fully converted.
  • A more readable code. In my opinion, this is the most important pros of using TypeScript. Thanks to types, you will understand your code more efficiently by improving its quality. All will be clear, and you will know what's inside a variable without console.log everything.
  • Refactoring becomes more straightforward. At the same time, by improving the readability of your code, you will be able to modify it more easily. When you're using dynamic types, sometimes it can take a lot of time to understand in depth the code you're changing.
  • Better IDE support. Because you're giving more information in the code, IDEs (WebStorm, Visual Studio Code, etc.) can provide you with better support, such as code navigation, autocompletion, flags errors, etc.
  • Improve your programming skills. By using this kind of superset, you will understand your code in-depth, and probably learn new programming concepts. I honestly think that in 2021, being able to code using types can benefit your career.

Disadvantages of using TypeScript

Discover a list of the cons of converting your Javascript code to Typescript.

  • Another JavaScript tool to learn. The JavaScript environment is huge (frameworks, libraries, etc.), and even if TypeScript is pretty similar, you will need to invest time to make full use of it.
  • More time to develop. Programming in TypeScript is not as fast as in JavaScript. When we talk about using new technology, I think it's important to define when it's good to use it or not. For TypeScript, you will find benefits of using it on large projects but not necessarily on a small one. If you're creating a website using a few lines of JavaScript, it's not worth switching to TypeScript, unless you want to learn it.
  • Static typing can be weird sometimes. Because TypeScript is a superset of JavaScript, the code is converted into JavaScript. Which means, the compiler automatically converts all the TypeScript you are writing to JavaScript. As a consequence, you may encounter some typing errors. But that's nothing compared to the mistakes you can make without using types.

A short exercise with types

Now you have a better idea of what is Typescript, and why you should use types in 2021, I created a quick activity to show you how it's useful to understand code faster.

A few hints and details that you need to know before:

  • string: A list of character, usually a sentence
  • number: All kind of number
  • Array: A list of something (specified in our case between <...>)

Now it's your turn; try to understand the code below. You will need to identify what is in the list, and how each list element is structured.

interface Car {
  licencePlate: string
  colour: string
  nbSeats: number

const myList = Array<Car>()

Answer: In this code, we have a structure called Car containing three variables (licencePlate, colour, and nbSeats). By reading the code, we can understand that the licencePlate and the colour will always be a string (a list of characters), and then nbSeats will always be a number. Now we have an idea of how the Car looks like; we can see that the developer wanted to create a variable my_list, containing a list of Car (each element of the list will be a car).

What is interesting in this kind of exercise is that even if it's the first time we see the code, and we never executed it, we have a lot of information giving key details on how everything is structured. However, this is still a short code example, I let you imagine how using types can be powerful on thousands of code lines in a big software company like Spotify.

➡️ If you want more content like this, you can follow me on Twitter, where I tweet about web development, self-improvement, and my journey as a fullstack developer!

Learn to code with simple and concrete examples.

English / Français