Hello everyone, today I would like to share the great features of TypeScript (TS), let’s find out!

Talking about TypeScript is now very popular, many projects like React have applied TypeScript (TS) instead of Javascript (JS) as usual and many newcomers (like me) are very frustrating. and annoying when the code is tired, but I have to go fix some errors of TS, it takes time. But when I entered the React project, I had to write TS, I couldn’t help but write so I had to go find out what TS is? Then only practice on coding, but gradually TS is very effective.

In addition to setting the Type for a variable, parameter or function , for example, when you look at a function’s parameter you will realize what type of value the params you receive, so it’s easy for me to handle … yes … .

Then say crap for many hours on the main topic! This article you have never learned about TS can be easy to understand, but after watching, let’s practice a lot.

1. Unions

Unions is one of the very easy to understand features in TS, it is like the “||” operator In JS, it is possible to set multiple types

For example:

Explanation : Looking at the above, you can see that the parameter id can accept two types of values: string or number

Unions are also useful when denoting the type as nullable :

Explanation : In the above code, you can realize that id can only have 2 values: string or undefined , this makes it easier for you to process the code inside because we already know its output type . .

Similarly, you can also apply Unions to the interface :

2. Generics

As you can see in Unions you can set mutile types but that’s not a good idea when you want to set multiple types and use it for multiple variables, which is quite clumsy like that.

Pretty wordy, isn’t it, then let’s use Generics to see how!

So now you can use it easily, when to this guy <T extends string | string [] seems confusing, actually, it’s easy to understand, you just understand that this guy T is just a string or an array in which the elements are only strings .

3. Tuples

When it comes to Tuples , there are two things to say: Explicitly and Implicitly

Explicitly : Meaning that the variable guy array mi can only be an array and only 2 elements, the first element is a string , the second is number

Implicitly : The array you are just read-only can not be edited, deleted anything

Alternatively you can apply to the function :

In a nutshell, Tuples function either to limit the lengh of an array or to set it to read-only .

4. Mapped Types

Mapped Types said:

Sometimes you need to look at other people’s happiness to find your own happiness

This means that a variable can use a different type or interface type for itself.

For example:

In addition, there are many other utility types : Omit, Partial, Readonly, Readonly, Exclude, Extract, NonNullable, ReturnType.

You can combine with Generics :

Explanation : Writeable uses the type of Teacher (name, email is readonly), you can see -readonly means to remove readonly so we can change the name attribute.

summary

In summary above are the great features of TypeScript hope the article will help you in the process of your work, see you in other articles. Thanks