If you are a JavaScript developer, you may have heard of TypeScript at one point or another. If you’re reluctant to give up TypeScript, because you’re not sure how it can serve you better than JavaScript, then you’ve come to the right place.
This guide gives any JavaScript developer an introductory but comprehensive guide to TypeScript that will need to get started with it.
What is TypeScript, what is its type system, and how would it benefit you as a JavaScript developer to use TypeScript in your next project? You will get answers to all these questions by the end of this article.
Note: I may be a bit biased towards typescript. There is no project that I start where I prefer JS to typescript.
What is typescript?
You can think of TypeScript as a language that provides an extra layer on JavaScript.
Why?
Although we initially write our code in TypeScript, we cannot run TypeScript directly on a browser like we run JavaScript. Instead, TypeScript goes through an additional compilation step to convert its code into browser-recognized JavaScript.
Therefore, even when we program in TypeScript, the end-program that runs on the browser will be in JavaScript.
Then, why do we use TypeScript?
Although TypeScript does not provide additional functionalities compared to JavaScript in runtime, to ensure that we, developers, can write less error-prone and better maintain code than when using only JavaScript.
How does TypeScript?
TypeScript, as the name suggests, introduces a type of 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 variable that we are declaring.
With JavaScript, we can assign an integer value to a variable in the first line and a string value in the next.
But with TypeScript, we can restrict this behavior by explicitly declaring a type for a variable. If we try to specify the string in a variable of “number”, it generates an error.
In a gist, this is what makes TypeScript different than JavaScript: use types to prevent us from making a silly mistake in our code.
How does typescript improve on javascript
While the lack of ability to define types is not necessarily a shortcoming in JavaScript, it does give programmers too much freedom, which, inevitably, results in them writing bad code.
In the above scenario with JavaScript, there is nothing to stop the developer from using aNumber Variable Representing an object. While this is not an error that will crash the program, it beats the code for the purpose of using variable names in self-documentation.
TypeScript easily resolves this issue by defining the type of the variable during declaration so that it cannot be assigned to another type of value.
If another developer in your program has access to this variable, they can now rely on its value, as the name suggests.
in this matter, isEligible The ceremony Expects an object that has a field called age. But JavaScript has no way of guaranteeing that the argument given to the function will, in fact, be an object or will have a field that is age-wise.
Again, TypeScript has a solution for this problem.
You may not understand this code at this time. But notice how this ensures that the type passed is the type of person, defined at the beginning.
Using TypeScript will cause hundreds of careless coding mistakes from your program and can prevent your hair from falling out every time you encounter the biggest problem of bugs. This will also better self-document your code and increase its stability.
If you have become frustrated with insufficient code suggestions provided for JavaScript in an IDE, 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.
Using types with TypeScript
Basic type
TypeScript has several basic types that are pre-defined. Numbers, string, boolean and array are some examples of them.
You can find the complete list of basic types Typescript documentation.
Here are a few examples:
Notice how any type affects TypeScript to type JavaScript. Since our purpose in using TypeScript is to give better structure to our code, avoid using any type whenever possible.
Likewise, try to avoid using a union of types, but if it is unavoidable, limit the number of types allowed in the union as much as possible.
Announcement of custom types
Remember how I used a type called Persona in the previous code example? The person in TypeScript is not a basic data type. I created the person type according to my requirements to use as the type of parameter accepted by the given function.
We use interfaces to define a new type of basic structure that we are familiarizing with the application.
Now, if we create a new type of object, it should have the field name and age within it. If not, TypeScript throws an error.
You can also define optional fields inside an interface.
You can then use the custom type as a field type when defining another type.
Extended interface
In TypeScript, you can get any other type of properties by extending its interface.
Suppose your application requires two different types, person and employee. Since an employee is also a person, it makes sense to derive person type attributes when creating an employee interface. This code prevents repetition.
You can achieve this by increasing the individual interface.
Function Parameter Type and Return Type
Similar to variable types, you can define types of function parameters and return values. While the parameter type is declared next to the parameter name, the return type is declared just before the curly braces.
With a defined parameter and type of return value, we can guarantee that you or anyone else using this function has not accidentally passed an object that does not have car type features.
You can also guarantee that the area sold Any object passed will not be undefined or null. And this eliminates many scenarios that could throw an error during runtime. If you were using JavaScript, you would have to write more code to prevent the possibility of such an error occurring during runtime.
Similar to variables, you can define returns and parameter types as multiple types of associations.
When you declare an accepted parameter or return type, the objects of the type that extend the initialization type interface are also accepted as arguments or return values.
Using generics
With TypeScript, you can easily define generic variables like the ones we’ve covered so far. If you are defining a common function, you can use it to process data that is of any built-in or custom type.
What happens if you use ‘someone’ type instead of generics?
Of course, you can change the above function to accept any type of arguments using ‘any’ type.
However, this method does not preserve the type of data provided on the function. Instead, it records each argument in some way. Also you should avoid its use any.
With generics, however, you can preserve what type of data is passed to the function. If you want to change function logic according to the type of data passed, then using a generic is better than accepting any type of data.
Using type aliases
When you want to use a particular field, it can be one of several types, you can define its type as a union of those different types.
Now, you do not have to use long association types. Also, if you want to change the return type of the function in the future, you now have to change only one line code.
Type conversion
When one type is defined by extending the interface to the other, the relationship generated between the two allows us to transform the objects defined in one of them to the other.
Type Car and Importedkar which I defined earlier. First, I’ll create an object of type ImportedCar and see how the conversion works on it.
This code compiles without an error. It makes sense that this conversion works because the ImportedCar type already has all the fields defined in the car type.
If we try to access the constructor field defined in the object before conversion, it generates an error because the changed object is of type Car.
The conclusion
I hope this post has left you in no doubt about using TypeScript for frontend development. Since most of the features in TypeScript are already similar to JavaScript, you will be able to master TypeScript in no time. . This will definitely pay off in your next project.
And the next thing you know, you’ll be a JavaScript developer, who can’t live without TypeScript, like yourself.
this Article Was originally published Live code stream by Juan Cruz Martinez (Twitter: @bajcmartinez), Founder and publisher of live code streams, entrepreneurs, developers, authors, speakers and doers.
Live code stream Also available as a free weekly newspaper. Sign up for updates on everything related to programming, AI and computer science in general.