This is going to be a quick guide on typescript objects. And the main reason why it's got to be quick is that if you have any experience with JavaScript you've already gone through these. And even if you have haven't the syntax for objects is incredibly straightforward so you'll pick up on it pretty quick and we'll be using them in the next few guide. So I wanted to make sure that you had some familiarity with what they are.

So at a high level, an object is the ability to encapsulate both attributes and functions inside of a single object. Now if you have gone through a number of the other guides then that may sound familiar. I know this sounds very familiar to me the way the classes work or her the way some other functions work but really at the end of the day, a JavaScript object is one of the more generic things you're going to be working with on a constant basis. Take for example if you're working with APIs which if you're working with angular applications you're pretty much guaranteed to be working with APIs. APIs are the very name of them. They usually return JavaScript object notation. And what that means is it returns a collection of JavaScript objects. Thankfully JavaScript objects are pretty easy to understand.

I'm going to create an object called a real user object and we can pretend that this is something that God returned from an API because this is pretty standard to what wouldn't get returned inside of this object. We're going to have a series of key-value pairs so I can put an email for this user at test@test.com to separate and have additional items. You use a comma and so I'm going to have a first name for this user as well. And then the last name and for right now. Let's keep it at that. I'm going out of function right after we verify the syntax is all correct and one other thing. When you come down here at the end of an object and it with a semicolon so I’ll say console log and in order to access this real user we pass in the real usernames so the object name and then we using the dot syntax we can grab any of the attributes so I can do real user email and this will bring that up for us. So I'm going to run it. Let me make sure that I have. Yes, that's correct.

var realUser = {
  email: ‘test@test.com’,
  firstName: ‘Jordan’,
  lastName: ‘Hudgens’
};

console.log(realUser.email);

And there you go you can see that it printed out the value for the email and you can go through and if you wanted you could grab each one of these so you could grab the first name. And you could grab the last name and all of this would work. Perfectly fine just like the other ones.

console.log(realUser.email);
console.log(realUser.firstName);
console.log(realUser.lastName);

So that's how you can create a very basic JavaScript object. Now in addition to data, these objects can also hold functions. So if I add a comma at the end of the last name command then I can say and create a message called “say hi” and some not to pass anything in I’m not gonna use any data inside of it. I just want it to be have agreed. You say return. Hey there and now if I come down I want real user. Say hi and then pass in brackets because this is a function. Notice how when I put a function inside of a JavaScript object I don't need the function keyword. I don't even need to use the arrow syntax. I can just put the syntax just like this and when JavaScript or typescript sees the parentheses it's going to know that this is a function.

var realUser = {
  email: ‘test@test.com’,
  firstName: ‘Jordan’,
  lastName: ‘Hudgens’
  sayHi() {
    return “Hey there!”;
  }
};

console.log(realUser.email);
console.log(realUser.firstName);
console.log(realUser.lastName);
console.log(realUser.sayHi());

So if I run this command you can see that this works. And at the very end, it prints out Hey there. So this is a basic JavaScript object as you can see the syntax is very straightforward. It is simply a variable name an equals for assignment. So you can think of it just like regular variable and then you are using curly brackets to encapsulate all of the data and behavior. If you are going to be working with APIs I can't reiterate this enough you are going to be seen this kind of syntax all over the place because you're going to be working with json data.

So this is how you can create an object and also how you can call that object.

Resources

• Source code