<p dir="auto">
One of the concepts that exist in TypeScript is a type of data that has a dual state (like <code>tuples). This type of data is usually used to assign a numerical value that has a string to be read by humans and is called an <code>Enum. <code>Enums are available in many programming languages, but we don't have access to them in JavaScript.
<p dir="auto">
To write an <code>Enum, you must use the following structure:
<pre><code>Enum name {NEW, OLD}
<p dir="auto">
For today's exercise, I use the following code:
<pre><code>const person = {
name: 'Maximilian',
age: 30,
hobbies: ['Sports', 'Cooking'],
role: [2, 'author']
};
<p dir="auto">
I want to change the <code>role. Suppose we have three levels of <code>admin, <code>author and <code>reader (normal users) for the role (user's role on the site). Now we want to have a numerical value for each of these roles to use in the code: <code>admin is <code>0, normal user is <code>1, and <code>author is <code>2.
<p dir="auto">
<i><strong>Question: Why not add numbers normally? For example, in the form of an array?
<p dir="auto">
<i><strong>Answer: Because our possible problems increase. For example, we may add a number that is not defined in the system (for example, level 4 that does not exist). Another example is our own work. If we put the numbers in an array normally, during development we would have to constantly check who each access level was for.
<p dir="auto">
Usually, newbies try to avoid numbers and use strings like <code>Admin or <code>ReadOnly-User to make the code more readable, but the problem is that during coding, for example, in <code>if conditions, they remember that the defined value is <code>Read-only-user or <code>read_only_user or <code>ReadOnlyUser or... That's why constants are usually used in JavaScript, for example:
<pre><code>const ADMIN = 'ADMIN';
const USER = 'READ-ONLY-USER';
const AUTHOR = 3;
<p dir="auto">
Then these same constants are used instead of writing strings. This method is a suitable method, but it is still possible to enter an invalid value in them by mistake, because, for example, in the code above, <code>AUTHOR has the data type <code>number, so we can put any number in its place!
<p dir="auto">
Now suppose we want to write an <code>enum for this situation:
<pre><code>enum Role { ADMIN = 'ADMIN', READ_ONLY = 100, AUTHOR = 'AUTHOR' };
<p dir="auto">
Usually, in coding conventions, it is said that the <code>enum name must start with a capital letter (<code>Role) and the values inside it must all be written in capital letters (<code>READ_ONLY and...). As you can see, you can use numbers and strings and whatever you want, just like arrays.
<p dir="auto">
Also note that we can write the above example as follows:
<pre><code>enum Role { ADMIN, READ_ONLY, AUTHOR };
<p dir="auto">
In this case, <code>index is used as a value, that is, <code>ADMIN is equal to <code>zero, <code>READ_ONLY is equal to <code>one, and <code>AUTHOR is equal to <code>2, but if you want to use a value other than the default indexes, which are numeric, you can use the example above. Use it and give it your own desired values.
<p dir="auto">
Also, if you only define a separate number for the first value, the Enum starts there:
<pre><code>enum Role { ADMIN = 5, READ_ONLY, AUTHOR };
<p dir="auto">
Here I have set <code>ADMIN to be <code>5 so <code>READ_ONLY value is <code>6 and <code>AUTHOR value is <code>7. That is, initialization starts from the first number. Note that the name of each of these items (such as <code>ADMIN) is a type of label, which means we only use it to work in the code. For example, in the above code, <code>ADMIN is equal to <code>5, so wherever we use <code>Role.ADMIN, the number <code>5 is given to us, not the string <code>ADMIN. This can cause you to make mistakes in string mode.
<p dir="auto">
We can use it as an example to say:
<pre><code>enum Role { ADMIN, READ_ONLY, AUTHOR };
const person = {
name: 'Maximilian',
age: 30,
hobbies: ['Sports', 'Cooking'],
role: Role.ADMIN
};
<p dir="auto">
Then, to try the codes, you can say:
<pre><code>if (person.role === Role.AUTHOR) {
console.log('is author');
}
<p dir="auto">
Since above we had set the value of <code>Role.ADMIN for the <code>role, the <code>console.log statement should not be executed and if we go to the browser, I will not see anything. Why? Because <code>ADMIN is not the same as <code>AUTHOR and the condition is wrong.
<p dir="auto">
In addition, as I said, Enums are only in Typescript and do not exist externally in JavaScript, so if you run the <code>tsc app.ts command and go to the <code>app.js file, you will easily notice the differences:
<pre><code>let Role;
(function (Role) {
Role["ADMIN"] = "ADMIN";
Role[Role["READ_ONLY"] = 100] = "READ_ONLY";
Role["AUTHOR"] = "AUTHOR";
})(Role || (Role = {}));
;
var person = {
name: 'Maximilian',
age: 30,
hobbies: ['Sports', 'Cooking'],
role: Role.ADMIN
};
<p dir="auto">
As you can see, implementing our simple code in JavaScript is complicated and time-consuming, and this is one of the beauties of the TypeScript language, which makes our work much easier.
<h3>
<code>any type in typescript
<p dir="auto">
<code>any means "anything", so if you give this type to any variable, it means that you have allowed any value to be placed in it. Pay attention to the following example:
<pre><code>let favoriteActivities: any;
<p dir="auto">
The <code>favoriteActivities variable can take any value and there will be no problem. Using <code>any is not recommended because it takes away the benefits of TypeScript. At least we can say instead of <code>any:
<pre><code>let favoriteActivities: any[];
<p dir="auto">
In this case, at least we say that it is an array that accepts any value in itself so that we are a little more limited. <code>any has no special explanation and is really that simple. Note that most programmers recommend that you avoid <code>any as much as possible unless you don't know what value one of your variables is going to take. In such a situation, you can temporarily use <code>any to avoid making a mistake and then come back in the future and choose the correct type for it.
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.
Hello,
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