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:
1 2 | <span class="token keyword">let</span> color <span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">'blue'</span> <span class="token punctuation">;</span> |
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.
1 2 | <span class="token keyword">let</span> color <span class="token operator">=</span> <span class="token string">'blue'</span> <span class="token punctuation">;</span> |
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
1 2 3 | <span class="token comment">// TypeScript will assign the type to any</span> <span class="token keyword">let</span> color <span class="token punctuation">;</span> |
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 .
1 2 3 | <span class="token keyword">let</span> color <span class="token operator">:</span> string <span class="token punctuation">;</span> color <span class="token operator">=</span> <span class="token string">'white'</span> |
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:
1 2 | <span class="token keyword">let</span> color <span class="token operator">:</span> <span class="token punctuation">(</span> string <span class="token operator">|</span> number <span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token string">'white'</span> <span class="token punctuation">;</span> |
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 .