A comprehensive guide to Typescript for JavaScript developers
What is Typescript?
You can think of Typescript as a language that provides an additional layer over JavaScript.
Why?
Although we initially write our code in Typescript, we can’t directly run Typescript on a browser like we run JavaScript. Instead, Typescript goes through an additional compilation step to convert its code into browser-recognized JavaScript.
So, even when we program in Typescript, the end-program that runs on the browser will be in JavaScript.
Then, why do we use Typescript at all?
Though Typescript doesn’t provide additional functionalities than JavaScript at runtime, it offers a set of features to ensure that we, the developers, can write less error-prone and better maintainable code compared to when using just JavaScript.
How does Typescript do that?
Typescript, as the name suggests, introduces a type system on top of vanilla JavaScript. Whereas with JavaScript, the type of variable is dynamically assigned, Typescript forces us to pre-define the type of the variable we are declaring.
With JavaScript, we can assign an integer value to a variable in the first line and assign a string value to it in the next.
But with Typescript, we can restrict this behavior by explicitly declaring a type for a variable. If we try to assign a string to a variable of type “number,” it generates an error.
In a gist, this is what Typescript does differently than JavaScript: use types to prevent us from making silly mistakes in our code.
How Typescript improves upon JavaScript
While the lack of ability to define types is not necessarily a deficit in JavaScript, it gives too much freedom to programmers, which, inevitably, results in them writing bad code.
In the above scenario with Javascript, there’s nothing to stop the developer from using theaNumbervariableto represent an object. While it isn’t an error that would crash the program, it beats the purpose of using variable names to self-document the code.
Typescript easily solves this issue by defining the type of the variable during declaration so that it can’t be assigned to a value of another type.
If another developer has access to this variable in your program, they can now rely upon its value being a number exactly as the name suggests.
In this case, theisEligiblefunctionexpects an object that has a field named age. But Javascript doesn’t have a way to guarantee that the argument passed to the function will be, in fact, an object or it will have a field named age.
Again, Typescript has the solution to this problem.
Now, this code may not make sense to you at the moment. But note how it ensures that the type of the variable passed is of the type Person, which is defined at the beginning.
Using Typescript will take away hundreds of careless coding mistakes from your program and prevent you from having to pull your hair out every time you encounter the silliest of bugs. It will also make your code better self-documented and increase its maintainability.
If you have been frustrated with the insufficient code suggestions provided for JavaScript in an IDE, then you have another reason to give Typescript a try. The presence of types gives Typescript the ability to show better code suggestions in an IDE.
