What is TypeScript and Why You Should Use It in 2023

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 “types”. Don’t worry if you don’t know what’s typing or the differences between dynamic and static typing.

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 Full-stack Developer, and at the same time, I started to use TypeScript.

Thanks to Typescript, I recovered 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.

Static Typing vs Dynamic Typing (TypeScript vs JavaScript)

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 name a type of data (a number, a character, etc.).

Dynamic typing is considered the simplest way to write because the used programming language will deduce a variable’s data.

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

On 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 adds a static typing feature to JavaScript.

It’s considered a superset because it adds 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

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. All your types are checked at the compilation time when you’re using a typed language. Before running your code, your compiler will scan and display errors if there are issues. It can save you a lot of time and help 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. Using this kind of superset, you will understand your code in-depth and probably learn new programming concepts. I honestly think, 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 fully use 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 the benefits of using it on large projects but not necessarily on a small ones. 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. This 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 TypeScript, and why you should use types, I created a quick activity to show you how it’s helpful to understand code faster.

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

• string: A list of characters, usually a sentence
• number: All kinds 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 element is structured.

interface Car {
  licencePlate: string
  color: string
  nbSeats: number
}

const myList = Array<Car>()

Answer: In this code, we have a structure called Car containing three variables (licencePlate, color, and nbSeats). By reading the code, we can understand that the licencePlate and the color 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).

Interestingly, even if it’s the first time we see the code and never executed it, we have a lot of information giving necessary 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.

Thanks for reading. Let’s connect!

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. Join me on Twitter for more. 🚀🎒