What are Type Annotation and Type Inference in TypeScript?

Tram Ho

When working with javascript you must be familiar with using variables without having to care about what type of data it is, right? It is true that when I first approached Typescript I also felt it was quite annoying because it was necessary to declare enough types to make it stricter. At that time I thought, ” JavaScript is good enough, does it really need to learn TypeScript?”. Most people are fine without it. But when you get used to it, you will realize some benefits such as:

  • By setting the type for each variable your code is easier to guess and debug.
  • Organize code easily for large projects with strong OOP support.
  • TypeScript has a compilation step to JavaScript, which will catch all kinds of errors before they run.
  • Typescript is open source so it’s free and has a huge community of support.

In this article, we will get acquainted with TypeScript by understanding the difference between Type Annotation and Type Inference . I will assume that you are someone who knows a little bit about Javascript and about the basic types, like string, number and boolean. If you are not familiar with the types, check out the documentation here to get started.

Type Annotation

Type Annotation means we tell the typescript what the variable will be of the data type. To assign that variable a value correctly, we will add a colon and type after declaring the variable like this:

This means that the color variable will accept the data type as string and it is only allowed to assign 1 string to that variable. If we intentionally assign it a data number , it will have an error like this:

Type Inference

Type inference means that the typescript will automatically guess what the data type of that variable is. If you declare and initialize it with a specific value or a certain expression.

In the above code we just declare the variable and initialize it with a value of string and never declare a data type for it. But typescript will still understand and automatically declare a color type string . And if you want to change the value of color , you must pass it a string. If we deliberately assign it a number value, we will encounter the same error as above.

When to use Type Annotation

Type Inference makes it easier to use typescript but it is not always possible to use it. So when will we use Type Annotation?

Delayed initialization

The same is true in this case typescript because it has not received any initialization value, it will now automatically assign the data type to any .

No one wants when using typescript and still have to accept the type as any . To overcome this, we need to assign it a data type that we want. So now is the time to use Type Annotation .

Assigning multiple types

Sometimes we also need 2 data types within a variable, right? For example, color codes such as (000) or (white). Now we will use the character | In between 2 data types as follows:

Above is a little sharing about typescript hopefully it will help you partly understand what a typescript is and what it is worth pursuing or not.

Thank you for reading your article

Reference link here .

Share the news now

Source : Viblo