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 full-stack 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
const my_string: string = “Hello, and welcome on HereWeCode!”
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 applications and back-end applications. It fits well with Vue.Js, React.Js, Node.Js, etc.
Why do you need to use TypeScript in 2020
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.logeverything. - 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 2020, 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 2020, 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!
Top comments (12)
I hated typescript. I was thinking that javascript and dynamic typing is the best but at some point I tried it out and I have never looked back, and I have now been using it for 6 years and I do not trust javascript without types anymore ;)
Thanks for your post!
Ahaha, indeed at the beginning I think it's more common to hate it! But as you told, once you used it a few times, it's becoming one of the mandatory. :)
I remember I battled with typescript to make the code to compile and run more than I battle with writing the functions that do the job.... lol
The first time you use new technology is always like this. But once you get used to it, it's better!
When you're not used to types, it can be a bit difficult. But once you know how to use them, it's a must have for large projects! 😄
Yeah I can see the benefits in the bigger team. Often you need to use other components not built by you , then typescript helps you to use the right input.
Yes exactly, usually when you’re reading code you can have a better understanding without printing everything.
When you’re using projects with massive data structures, it’s easier to visualise how the data is stored.
Good article Typescript is something I need to learn again. How many Typescript jobs are actually out there though I keep having recruiters ask for just javascript.
Thank you 👍
I don't know if there is a lot of jobs where TypeScript is a requirement.
However, if you are a JavaScript developer, for sure TypeScript will be an extra good knowledge.
A great article!
Thank you 🙏😊
Did you mean 2012? devblogs.microsoft.com/typescript/...
Oh... I made an error; I was not sure about myself then I saw Wikipedia with "Preview release: 3.9 RC / 28 April 2020; 2 months ago" and "Stable release: 3.9.7 / 6 July 2020; 13 days ago". I didn't notice it was the last preview release and the last stable release!
After checking, the first version was in 2012, and the first stable version was in 2014.
Thank you for telling me this, I will update it now!