TypeScript is like JavaScript but with no surprises.

I heard a long time ago about TS, great stories about how useful it is, allowing js to have Javascript types. At this moment I wasn’t so 100% aware of the sense of type everything, now that I have more knowledge about clean code, good practices and start to develop some little applications in React I think that the code could be better with types and I decided to investigate about and… this is what I found:

🥰DEVELOPERS LOVE IT

Here are some charts about how people start to use more and more…

More interesting charts about JS here: https://2020.stateofjs.com/en-US/technologies/javascript-flavors/
Increasing the usage in GitHub projects.

https://octoverse.github.com/

And high place in the 2020 developer survey of StackOverflow:

https://insights.stackoverflow.com/survey/2020#technology-most-loved-dreaded-and-wanted-languages-loved
Big companies like Airbnb support its use and claim that using it would significantly reduce potential errors.

Source: https://twitter.com/swyx/status/1093670844495089664/photo/2

I went deep into Reddit to find some real words about it and the same: “It's very hard to go back to Javascript once you start writing Typescript”.

🚄But… WHY ALL THIS HYPE?

With so many people loving it I decided to learn the basics and this is what I have learned that it can offer.

Advantages:

• SUPERSET of JS, almost the same language but with consistency in types.
• The main advantage is strict typing, you can type everything, from variables to the parameters of a function, and even the structure of an object, that's can prevent about 15% of the bugs that end up in committed code.
• The ability to find these obvious yet frequently occurring errors this early makes it a lot easier to manage your code with types.
• Types make code management easier and more predictable.
• In TypeScript we can define interfaces for parts of our program, so we can be sure that they interact correctly. It means they will have clear contracts of communication with each other which will significantly reduce the number of bugs. TS + unit tests will do the code more stable, predictable and it will reduce the amount of pre-release bug density.

But… Not all that glitters is gold...

Some little disadvantages:

• Apply type may make you slower in the first instance, in the long term it is better but you have to get used to it.
• Required compilation.
• And of course, TypeScript does not catch run-time type errors. It means that you can write the code that will pass the type check, but you will get an error upon execution.

🤖 Examples of SYNTAX

Basic typing when you declare variables, you won't be able to change the type later (even if you don't declare strictly the type it will be typed), making your code more reliable:




If for any reason, you need a variable without specifically type you can use any:

But... in the documentation, they recommend not to use it unless you are in the process of migration from JS to TS.

Add enum to JS, a way of giving more friendly names to sets of numeric values:

Typing parameters of a function will allow you to detect quickly if you insert something wrong


You can add what is the type of function that will return


but if you don’t do it typescript will do it for you

You can create your own types that allow you to don't repeat the code.

You can type also what you select from the DOM, allowing you access to all the methods of one kind of input.

There are also interfaces, a contract that should be matched with the object if you don’t want errors, and other

And of course, you can implement TypeScript into your favorite JS framework, I'll show you an example in a React project, providing the same advantages mentioned above:

Similar to the PropTypes and now you will have to add the props as mandatory when you use them or the IDE will warn you:

And when you introduce the mandatory prop person it will be okay:

You will be able to type other things (practically everything) like, for example, the hook useState:

And that’s it, folks, I hope you enjoy this little piece of info about TypeScript and maybe consider applying it in some project.

Here are some sources and interesting videos to check and go deeper if you want:
JSConf - Airbnb tactics and strategy to migrate to TS (very interesting)
https://youtu.be/P-J9Eg7hJwE

To type or not to type: quantifying detectable bugs in JavaScript
https://blog.acolyer.org/2017/09/19/to-type-or-not-to-type-quantifying-detectable-bugs-in-javascript/

Official documentation - TS in 5min to JS developer:
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

TypeScript tutorial series:
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI
In this video, you can see how to apply TypeScript in React:
https://www.youtube.com/watch?v=Z5iWr6Srsj8