SECRET OF CSS

TypeScript for Deno: Any, Union Types, Custom Types, and Literal Types | by Eduardo Rico | Jun, 2022


Exploring data types

0*36PAK89fttyKv2a2

This is part two. Here is the first part (in Spanish for now).

We continue with the “any” data types plus some special data types that combine several primitive types called “union types” and the “custom types”.

This data type is the one that by default returns us to JavaScript, that is, when declaring a variable with type any, we do not care what type it is going to be.
In general, using this type is a bad practice because it takes away TypeScript’s typing and in that case why do we want to use TypeScript?

However, sometimes it is useful, for example, when we bring information from an API and not all the values are of the same type.

The clear problem is that the TypeScript compiler of any problem compiles to JavaScript even if we have typing errors as in line 20, 21, and 22.

The union types give us flexibility when using a variable so that it can be of one or another type, without being as permissive as any.
In these cases, it is very useful that the typeof operator is native to JS. And the syntax is very intuitive, it is almost an “or ||”.

For example, we want that if we get two numbers, we add them, if we get two strings, then we concatenate them. So the parameters can be either strings or numbers (number|string).

There are two important things here, the first one is the output that gives us the function that is void, later we will talk about that, but I adivce you that there is a very nice thing in TS that is called “function overload” that tells the compiler all the possible values that can have the input parameters of the function and the type of output in each case.

To avoid the compiler marking errors to us, we check the data types for when the two values are strings or numbers, and thus to avoid the compiler thinks that we want to “add” two strings instead of concatenating them — in the same way that it does not think that we want to concatenate two numbers instead of adding them.

With this, we can use this function with numbers and strings but we get an error if we pass a variable or a value with a different data type.

The custom types, as its name indicates, allow us to create a new data type from union types, this is very similar to the interfaces but we will see it later in depth.

And this facilitates the readability of the code, although the union types are quite readable, the custom types allow us to be more expressive, let’s see the same function but with a custom type:

It is important to mention that it is a convention to use PascalCase for types, i.e., that they start with capital letters.

Finally, I want to present a curious data type, which is the “literal types”, this may remind you a lot of an “object literal” and is that in fact, it has the same essence. We declare a variable (in this case it is convenient that it is constant) and we initialize it with a value. This allows us to treat this variable as a specific type.

This is useful when we want to pass options inside a function although it is usually used more in event-driven programming and enums.

In the first line, we see that the type of operation can only be of type “addition” or of type “subtraction”, not that the value is “addition” or “subtraction”, but that the type is. This also happens when we declare a numeric constant and we can let TS infer the type:

In the next installment, we will see the types that a function can return, as well as some types that are uncommon in other languages such as “unknown” and “never”.



News Credit

%d bloggers like this: