<p dir="auto">
Another very interesting types in typescript are union types. This type of data is usually a combination of two or more of the previous types. Let me explain with an example:
<pre><code>function combine (input1: number, input2: number) {
const result = input1 + input2;
return result;
}
<p dir="auto">
I want to edit this function to work with both numbers and strings. That is, if it receives a number, it will add them mathematically, and if it receives a string, it will concatenate them. The problem is that currently this function only accepts numbers. For example:
<pre><code>const combinedAges = combine(30, 26);
console.log(combinedAges);
<p dir="auto">
If we do this, we will have no problem and the result 56 will be displayed in the console of our browser, but if we try to add two strings together, Typescript will give us an error:
<pre><code>const combinedNames = combine('Max', 'Anna');
console.log(combinedNames);
<p dir="auto">
Such a code is not allowed because above we have typed <code>numbers as entries. If we go back and put this type as <code>string, the code above will be error, but the code before adding the numbers will encounter an error. This is where union types come in and allow us to define a type that is the sum of numbers and strings. For example, to determine the type of parameters of the <code>combine function, we can say:
<pre><code>function combine(input1: number | string, input2: number | string) {
const result = input1 + input2;
return result;
}
<p dir="auto">
The symbol between <code>number and <code>string is known as <i>pipe, which is a vertical line. In addition, there is no limit to using two types and you can add as many types as you want to the function with the above structure. Now, as soon as you do this, you will get an error and TypeScript will tell you that the <code>+ operator is not used to type a number and a string at the same time. As you know, the appearance of this word is wrong and we can use this operator for numbers and strings. Typescript only looks to see what your type is and when it realizes that it is a union type, it doesn't check inside it anymore. In fact, TypeScript tells you that you should write more specific code for such cases, so we do the same:
<pre><code>function combine(input1: number | string, input2: number | string) {
let result;
if (typeof input1 === 'number' && typeof input2 === 'number') {
result = input1 + input2;
} else {
result = input1.toString() + input2.toString();
}
return result;
}
<p dir="auto">
As you know, the <code>typeof operator gives us the type of a variable. Here, using this operator, we have said that if the type of the input parameter is <code>number type, add them, but if it is not, it must be a <code>string, so by using the function <code>toString makes sure that the inputs are converted to <code>strings and then concatenates them.
<p dir="auto">
Now if we have the following code:
<pre><code>const combinedAges = combine(30, 26);
console.log(combinedAges);
const combinedNames = combine('Max', 'Anna');
console.log(combinedNames);
<p dir="auto">
And go to the browser, both codes will run without error:
<p dir="auto"><center><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQmQ5PhsJ4TM1zQtm9a6tgEr3sB9W4NunvfTSZtMen3J7TH/01_console.log_different_inputs.png" alt="console.log different inputs" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQmQ5PhsJ4TM1zQtm9a6tgEr3sB9W4NunvfTSZtMen3J7TH/01_console.log_different_inputs.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQmQ5PhsJ4TM1zQtm9a6tgEr3sB9W4NunvfTSZtMen3J7TH/01_console.log_different_inputs.png 2x" />
<p dir="auto">
Literal types specify the data itself instead of saying that my parameter or variable must take a specific data type. We have seen something like this before:
<pre><code>const number = 5;
<p dir="auto">
If you move your mouse over this constant, you will see its type as follows:
<p dir="auto"><center><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQmPYKaiFP3941KUk3SqcaJwz2XcKyYniBXEqohVhuV8VVV/03_type_inference_1.png" alt="Fixed type display for consts" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQmPYKaiFP3941KUk3SqcaJwz2XcKyYniBXEqohVhuV8VVV/03_type_inference_1.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQmPYKaiFP3941KUk3SqcaJwz2XcKyYniBXEqohVhuV8VVV/03_type_inference_1.png 2x" />
<p dir="auto">
That is, the type is no longer "<code>number" but <code>5, because the value of the constants never changes.
<p dir="auto">
We can use this feature and, for example, make it possible to perform a certain transformation when calling the function based on the input value. Suppose we add a third parameter called <code>resultConversion to the <code>combine function that we defined above, which is of <code>string type:
<pre><code>function combine(input1: number | string, input2: number | string, resultConversion: string) {
<p dir="auto">
I want to make it so that when we call this function we can do something like this:
<pre><code>const combinedAges = combine(30, 26, 'as-number');
<p dir="auto">
In other words, use the third parameter to determine that the first and second parameters are added together as a string or as a number! Of course, you can choose your desired value instead of as-number. I want to check three modes:
<pre><code>const combinedAges = combine(30, 26, 'as-number');
console.log(combinedAges);
const combinedStringAges = combine('30', '26', 'as-number');
console.log(combinedStringAges);
const combinedNames = combine('Max', 'Anna', 'as-text');
console.log(combinedNames);
<p dir="auto">
Once the numbers as numbers, again the strings containing the numbers as numbers and finally the strings as a string. Currently, our function is not ready for such a task, because we have set the third parameter as a string, which means that when calling the function, we can enter any string value in it. I want only <code>as-number and <code>as-text to be acceptable, not any string value.
<p dir="auto">
One way to solve this problem is to say:
<pre><code>function combine(input1: number | string, input2: number | string, resultConversion: string) {
let result;
if (typeof input1 === 'number' && typeof input2 === 'number') {
result = input1 + input2;
} else {
result = input1.toString() + input2.toString();
}
if (resultConversion === 'as-number') {
return +result;
} else {
return result.toString();
}
}
<p dir="auto">
That is, if <code>as-number is passed as the third parameter, convert the <code>result into a number. Of course, we get the value <code>3026 for the <code>combinedStringAges variable, so there is an error in this part.
<p dir="auto">
Another way is as follows:
<pre><code>function combine(input1: number | string, input2: number | string, resultConversion: string) {
let result;
if (typeof input1 === 'number' && typeof input2 === 'number' || resultConversion === 'as-number') {
result = +input1 + +input2;
} else {
result = input1.toString() + input2.toString();
}
return result;
}
<p dir="auto">
That is, check the value of <code>resultConversion and if it is so, make sure to convert the inputs to numbers with the <code>+ sign (even if they are strings). Now the correct values of <code>56, <code>56 and <code>MaxAnna are displayed in the browser console respectively.
<p dir="auto">
Even though we are given the correct values, our function is still not a good function because type is the third parameter of the string, so we can type anything in it. For example, let's forget and type <code>as-text <code>as_text. So instead of saving these items, we have to do something else because we may have dozens of items like this.
<p dir="auto">
This is where literal types along with union types come to our aid:
<pre><code>function combine(
input1: number | string,
input2: number | string,
resultConversion: 'as-number' | 'as-text'
) {
let result;
if (typeof input1 === 'number' && typeof input2 === 'number' || resultConversion === 'as-number') {
result = +input1 + +input2;
} else {
result = input1.toString() + input2.toString();
}
return result;
}
<p dir="auto">
If we determine only two values for the third parameter, our problem will be solved! Note that I have written the parameters of the function in different lines to make them more readable, and then I have specified two literal types, and there has been no special change. Now, if you type anything other than these two, you'll get an error, so we'll make sure we don't make a mistake.
Congratulations!
✅ Good job. Your post has been appreciated and has received support from CHESS BROTHERS ♔ 💪
♟ We invite you to use our hashtag #chessbrothers and learn more about us.
♟♟ You can also reach us on our Discord server and promote your posts there.
♟♟♟ Consider joining our curation trail so we work as a team and you get rewards automatically.
♞♟ Check out our @chessbrotherspro account to learn about the curation process carried out daily by our team.
🥇 If you want to earn profits with your HP delegation and support our project, we invite you to join the Master Investor plan. Here you can learn how to do it.
Kindly
The CHESS BROTHERS team
Congratulations @albro! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)
<table><tr><td><img src="https://images.hive.blog/60x70/https://hivebuzz.me/@albro/replies.png?202409230514" /><td>You got more than 600 replies.<br />Your next target is to reach 700 replies. <p dir="auto"><sub><em>You can view your badges on <a href="https://hivebuzz.me/@albro" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">your board and compare yourself to others in the <a href="https://hivebuzz.me/ranking" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Ranking<br /> <sub><em>If you no longer want to receive notifications, reply to this comment with the word <code>STOPHello,
Thanks for your help
this Comment has been upvoted with 100%, thanks to @albro who burned 1000 PLANETWith this burn @albro is actively participating in the CLEAN PLANET reward protocol.@albro is helping @cleanplanet to grow with the curation.@cleanplanet
Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!
Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).
You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.