Object Type In TypeScript By albro

<p dir="auto"> We've all seen the appearance of JavaScript objects and used them many times: <pre><code>{age: 30} <p dir="auto"> In the Typescript language, we have a type called <code>object, which of course is more precise than JavaScript. For example, you can say that <code>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: <pre><code>const person = { name: 'Maximilian', age: 30 }; <p dir="auto"> We all know that we can easily <code>console.log this object: <pre><code>const person = { name: 'Maximilian', age: 30 }; console.log(person); <p dir="auto"> If we execute the command <code>tsc app.ts on this code, we will see the object in the browser console: <p dir="auto"><center><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQmWj3yUubvGqLtrEGGQviP21WYzC6LaL1CX9jan9iG137L/01_logged_object.png" alt="Display the log of the TypeScript object" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQmWj3yUubvGqLtrEGGQviP21WYzC6LaL1CX9jan9iG137L/01_logged_object.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQmWj3yUubvGqLtrEGGQviP21WYzC6LaL1CX9jan9iG137L/01_logged_object.png 2x" /> <p dir="auto"> 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: <pre><code>const person = { name: 'Maximilian', age: 30 }; console.log(person.nickname); <p dir="auto"> 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? <p dir="auto"> If you move your mouse over the object, its type will be displayed: <p dir="auto"><center><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQmQMFVVfpkuCTFrF849hq8o3rN2bSX7hvwckSsNEFeEu67/02_person_object_type.png" alt=" Typing the person object in TypeScript" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQmQMFVVfpkuCTFrF849hq8o3rN2bSX7hvwckSsNEFeEu67/02_person_object_type.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQmQMFVVfpkuCTFrF849hq8o3rN2bSX7hvwckSsNEFeEu67/02_person_object_type.png 2x" /> <p dir="auto"> As you can see, we have a colon after <code>person, which means that this information specifies the type of this object. Also, after <code>name: string, which specifies that the content of <code>name must be a <code>string, so instead of <code>key/value pairs we will have <code>key/type pairs. <p dir="auto"> Of course, we can manually add the object type to this object: <pre><code>const person : object = { name: 'Maximilian', age: 30 }; <p dir="auto"> 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 <code>name: string. That's why adding <code>object to determine work is wrong in most work situations. For example, if I put a dot after the object name in <code>console.log in the following code, it will no longer be supported by visual studio code: <p dir="auto"><center><img src="https://images.hive.blog/768x0/https://images.ecency.com/DQmPRvmiaBCwznPZCGLjRrwK7EuCD1Kh2EjhS8zjbyThSy5/03_no_ide_support.png" alt="Lack of intellisense support when coding" srcset="https://images.hive.blog/768x0/https://images.ecency.com/DQmPRvmiaBCwznPZCGLjRrwK7EuCD1Kh2EjhS8zjbyThSy5/03_no_ide_support.png 1x, https://images.hive.blog/1536x0/https://images.ecency.com/DQmPRvmiaBCwznPZCGLjRrwK7EuCD1Kh2EjhS8zjbyThSy5/03_no_ide_support.png 2x" /> <p dir="auto"> 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: <pre><code>const person : object = { name: 'Maximilian', age: 30 }; console.log(person.name); <p dir="auto"> Why do you think <code>name is underlined? Does <code>name not exist in our object? When we say that our object is <code>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 <code>name may not be inside <code>person object. <p dir="auto"> To solve such a problem, you need to be more precise. That is, instead of writing <code>object after the colon, write a <code>Type object! Pay attention to the following code: <pre><code>const person: {} = { name: 'Maximilian', age: 30 }; <p dir="auto"> 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: <pre><code>const person: { name: string; } = { name: 'Maximilian', age: 30 }; <p dir="auto"> I haven't changed the code, but I've opened the same object to make it more readable, and then added <code>name:string to it to specify that there will be a property called <code>name on this object, which must be of type string. Of course, the line is drawn under <code>age:30. why? Because the specified type for this object says that it will only have an attribute called <code>name, so <code>age is added in the object definition and it gets an error. <p dir="auto"> I will complete the code to solve the problem: <pre><code>const person: { name: string; age: number; } = { name: 'Maximilian', age: 30 }; <p dir="auto"> 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 <code>30 instead of your <code>number: <pre><code>const person: { name: string; age: 30; } = { name: 'Maximilian', age: 30 }; <p dir="auto"> In this case, you have told Typescript that the <code>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 <code>number, you can give any number to this feature. <p dir="auto"> 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 <code>tsc app.ts, the type part is completely removed because it is meaningless in JavaScript: <pre><code>var person = { name: 'Maximilian', age: 30 }; console.log(person.name); <p dir="auto"> The code above is all the code that remains in the JavaScript file. You must have noticed that <code>const has been changed to <code>var!!!!