In today’s article we are going to discuss typescript types.
So what are types ?
Types are a syntactic way to enforce a variable to have a specific exact type. for example a variable named ‘mystr’ with the type of a string can’t receive a number as their value.
Why care about types ?
types are extremely important, they are a way of documenting your code, a way to not use if statements to check for a parameter type in a function and finally with types you get much more powerful autocompletion in your editor / IDE. you can check my previous article where I talked further about why you should be using TypeScript in 2021 here is the link
When To use them
you should use types everywhere, but to facilitate your mission TypeScript has a feature called type inference. when ever you are assigning a value to your variable at the declaration time, you don’t have to type the type annotation, TypeScript will do it automatically for you
How to use them then ?
TypeScript makes it easy to use types just read the code below to discover how to declare types in TypeScript
you can use type annotation ( var name : type) with basic types like string, number (in TS numeric types are all numbers), booleans, etc…
here is a graph that contains all the types in TypeScript ( for now focus on the built in types )
in the built in types we see a new type : void
void basically is used to annotate a function ( we will get there ) and indicate that it doesn’t return anything. this is for example used when your function takes a string and just spits it in the console or slam it in the html.
looking at the right side of the graph, there is a User defined Types subtree that seems even more interesting.
So what are user defined types ?
User defined Types subtree are types that you create based on a custom use case, for example, TypeScript doesn’t include a User type representing your model, it also doesn’t know if your response object has the property of sold on it so it gives you the freedom to define your own types, if you didn’t understand till now, this is a pretty the code below will definitely make get your head around it
In the code above we discussed the typing system TypeScript has to offer when it comes to objects.
in TypeScript you can describe the object and its properties like in the ‘person2’ example (check lines 13 → 16). there we see that TypeScript prevented us from adding the “blablabla_property” (check lines 22 & 23 ) at time we assign values to the variable.
now that you understood the syntax let’s continue with other types :
Arrays in TypeScript are an indexed collection of values that has the same type :
the syntax in the photo above shows how to declare an array with a type in TypeScript, if you are going initialize the variable with a value (non empty array in this case) do not bother adding types TypeScript will do it for you.
Everybody should be familiar with OOP before learning TypeScript. please go back and learn the basics if you don’t know classes this article is not for you.
these two Images will explain classes in TypeScript for you :
in today’s article I went briefly over types in TypeScript and how to use them, I am aware that this article is not enough for you to fully understand static typing in TypeScript mainly because I am not an experienced tutorial writer and because this topic can’t be covered in one article, that’s why I will include my favorite free resources to learn TypeScript :