Object Type In TypeScript By albro

Object Type in TypeScript

We've all seen the appearance of JavaScript objects and used them many times:

{age: 30}

In the Typescript language, we have a type called object, which of course is more precise than JavaScript. For example, you can say that Object means an object that has certain characteristics, or is based on a certain constructor, and so on. Suppose we write a simple object as follows:

const person = {
  name: 'Maximilian',
  age: 30
};

We all know that we can easily console.log this object:

const person = {
  name: 'Maximilian',
  age: 30
};
console.log(person);

If we execute the command tsc app.ts on this code, we will see the object in the browser console:

Display the log of the TypeScript object

So far, there is no surprise, but if we want to get a feature that does not exist in the object, we will encounter an error. For example:

const person = {
  name: 'Maximilian',
  age: 30
};
console.log(person.nickname);

By writing this code, visual studio code immediately draws a red line under the nickname and gives me an error (of course, in typescript files, not javascript). How do you think TypeScript knows this?

If you move your mouse over the object, its type will be displayed:

 Typing the person object in TypeScript

As you can see, we have a colon after person, which means that this information specifies the type of this object. Also, after name: string, which specifies that the content of name must be a string, so instead of key/value pairs we will have key/type pairs.

Of course, we can manually add the object type to this object:

const person : object = {
  name: 'Maximilian',
  age: 30
};

Currently, we still get the nickname error, but now if you move the mouse over this object, instead of the previous type, only the word object will be displayed. With this, you only have a general object and you lose other details like name: string. That's why adding object to determine work is wrong in most work situations. For example, if I put a dot after the object name in console.log in the following code, it will no longer be supported by visual studio code:

Lack of intellisense support when coding

why? Because now the type of my object is just a general type without details. The main problem here is that if we write the following code, we still get an error:

const person : object = {
  name: 'Maximilian',
  age: 30
};
console.log(person.name);

Why do you think name is underlined? Does name not exist in our object? When we say that our object is object, we have made a general object to be imagined for typescript, so typescript does not recognize any attribute and value and warns you that name may not be inside person object.

To solve such a problem, you need to be more precise. That is, instead of writing object after the colon, write a Type object! Pay attention to the following code:

const person: {} = {
  name: 'Maximilian',
  age: 30
};

By writing this symbol, we can specify that our object has a precise and specific type that we want to determine ourselves. Of course, if it is empty, there is no difference with writing an object, so we must write the specific type we want inside it:

const person: {
  name: string;
} = {
  name: 'Maximilian',
  age: 30
};

I haven't changed the code, but I've opened the same object to make it more readable, and then added name:string to it to specify that there will be a property called name on this object, which must be of type string. Of course, the line is drawn under age:30. why? Because the specified type for this object says that it will only have an attribute called name, so age is added in the object definition and it gets an error.

I will complete the code to solve the problem:

const person: {
  name: string;
  age: number;  
} = {
  name: 'Maximilian',
  age: 30
};

Now the error disappears, but we are exactly back to the first house! This was the same type that typescript itself had defined for us at the very beginning. Of course, you can put the number 30 instead of your number:

const person: {
  name: string;
  age: 30;  
} = {
  name: 'Maximilian',
  age: 30
};

In this case, you have told Typescript that the age attribute inside this object is only allowed to take the value 30, and if you try to give it any other value, you will encounter an error. If you leave the number, you can give any number to this feature.

As I explained to you in the previous sessions, specifying the type for variables is not a good thing, and doing this project was only for the purpose of understanding object types, so try to never write typescript codes like this. Also note that after running tsc app.ts, the type part is completely removed because it is meaningless in JavaScript:

var person = {
    name: 'Maximilian',
    age: 30
};
console.log(person.name);

The code above is all the code that remains in the JavaScript file. You must have noticed that const has been changed to var!!!!



0
0
0.000
5 comments
avatar
avatar

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. 
 

0
0
0.000
avatar

Congratulations!


You have obtained a vote from CHESS BROTHERS PROJECT

✅ 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

0
0
0.000