I'm extremely excited about this guide because we're about to start getting into some typescript programming that is very closely aligned with what we're going to be using when we start building angular 2 applications. And so today we are going to go through interfaces now interfaces.

If you have never used them before may seem a little bit foreign to you. For example, if you come from Ruby you've never used the concept of interfaces before. However, if you've come from more formal object-oriented languages such as Java than your experience with interfaces is probably quite extensive. If you've never worked with them or you need a refresher an interface functions like a contract between you and the program so or I should say between your objects and the program. So if a class is a blueprint for the data and the types of methods of data and behavior that an object is going to perform or to contain then an interface is the set of rules or guidelines that classes or objects have to follow. And if that's a little bit fuzzy for you Don't worry I'm going to go through plenty of examples in this guide and in the next few guides because interfaces are at the core of how to build angular programs so I want you to feel very comfortable with what they are how to use the options around them and that sort of thing.

So without further ado, I'm going to use a what I think is a very practical example here because if you're building an angular application you're probably going to have a concept of users. So I'm going to create an interface called user here and the syntax for interfaces is incredibly basic. It's going to be the name of the attribute followed by a colon followed by the data type and then we're going to put a few more in there. All three of these give the string data types. First ones get the email. Next one is going to be first name and the last one is going to be last name will go into the next guide. How to use functions and how we can integrate and customize or have interfaces for functions as well. Right now we're just going to go with how we can work with data and these kinds of attributes.

interface User {
  email : string;
  firstname : string;
  lastName : string;
}

So we have interface user and I want to have a function here. It's going to be a function called profile and I'm just going use a regular function declaration and this is where things get kind of cool. For the data that we're going to use the first argument is going to be a user but instead of type string or something like that. This one is actually going to be of type user. So this is pulling in this interface right here and I think that's pretty neat. It's almost like we're creating our own type and what we're essentially doing is we're saying for this data type. "You have to follow these rules or this argument has to follow the set of rules." And in this case, it means that we have to have an email a first name and a last name and they have to follow the data type of having all three of those having strings. We're also going to say that this is going to return a string and inside of this we are going to say return Welcome and actually for this one we haven't done first string interpellation we haven't done the tactics in a while so let's do that and say welcome. And then we want to do all three of them for the sake. So you say welcome. $ curly brackets and put the first name followed by the last name and actually you know you skipped one step. You have to do user dot. So this is kind of almost like working with objects since a reason when the last guy had I specifically used an object or introduced the concept of objects because you notice how when I'm calling this I'm using the same kind of syntax as when we used the JavaScript object. I'm using user which is the argument name. So there's nothing special about the username. This could be X. This is just what we're using too. For the argument name but I am to use user and then user first name. Now the reason we can use first name here is that we have an interface and because we said that we have to use the user interface so do see how that works. I think this is absolutely fascinating. No, maybe that's just me but I think it's very cool that we have the ability to essentially create our own set of rules that we can use and leverage in the rest of our program.

function profile(user: User) : string {
  return `welcome, ${user.firstName} ${user.lastName}`;

So this first name can be called because of how we structured our interface and because we told our argument that that's what it was going to do. So we're going to say welcome and then I'm going to copy this and do. Last name and I'm just going to leave it at that. I'm not going to use email I'm going to use email for something out else here in a little bit right now. Leave that and now I'm going to actually go in create a real user.

So if you remember how we created a real user before with using the JavaScript object notation or the object notation then you can relate back to that. So I have var followed by real user equals and curly brackets. So inside of these curly brackets, I make sure to finish it off with a semicolon. This is where we can put our data this is a regular JavaScript object so I'm going to pass in the same ones that we did in the last guide and then put in a couple other ones. Now, this is one of the more strict sides of how this is going to work. So this real user because we're going to be passing it into a profile. This will not work if we do not have syntax that follows the rules we are telling. When we created this interface what we're telling is that we are making a binding contract with the program that whatever we pass into here is going to contain these attributes. So for a first name and go with Tiffany followed by Hudgens will get rid of the last comma and that's it. And now what we can do is pretty cool. We can say console log. And now we can call our method and call the function profile and we can just pass in real users so we can pass in our real user method or real user object into the profile function. So we're actually passing and wrapping this entire object up passing it into here and because this is of type user because this object follows all the rules it's going to map to each one of these values. So first names get to map first name last name is going to map to a last name etc. So now this is 23 yes. I updated the program. Let's run this and see if I got the syntax right.

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

console.log(profile(realUser));

So node 023_interfaces and there you go it says welcome. Tiffany Hudgens. So this is I think this is awesome. This is very cool it’s one of my favorite parts of the typescript language is how you can customize it to fit within a certain set of guidelines. This will if you if done properly will lead to less buggy code because you're setting rules that the rest of the program has to follow. And I like that you're the one that's actually defining these. You're going to see when you get to angular development that this fits in perfectly with how to build a real-world program because your interface is going to function almost kind of like a database schema. So you're going to be able to build parameters and these parameters are going to be what the rest of the program calls just like when we're calling them right here. And then that's what's going to be rendered on the screen.

So one other thing or I should say a couple other things here is first we can grab just as a reminder because we have this really user object. Remember that we can always grab this and call email.

Console.log(realUser.email);

And so if we want to ever print this out you can see it right there. The only reason I really did that is just so you could see that this is a true object. This is just an object that contains these items. If you're coming from a language that uses hashes or something like that you can kind of think of it functioning that way because you have key-value pairs. It's not the exact same thing but it is similar if you want kind of a frame of reference. And that's how that works. Now I want to finish up this guide with talking about how we can add optional items because as cool as it is to have interfaces there may be times when you have items that you want to make available but you don't want to make required.

So a great example of this would be is let's say that this profile function lets's say this was actually like for the this is what we wanted to be rendered on the nav bar. And we didn't want the first and last name but instead, we wanted the email. What I could do here is get rid of all of this and I want to say that this real user is not going to need the first name or the last name. Now if I do this this is going to throw an error. I mean I get rid of the e-mail as well. And the reason it's got their throw error if I click on this it says argument of type and then gives a type is not assignable to the parameter of type user. So what it's saying is that hey you just broke the contract because you said you were going to have a last name and a first name but this object does not contain those values.

So I think that's pretty neat that is watching that and kind of watching over your shoulder to make sure you're doing it right. But there are times when this is going to be a something where you don't want these items and you don't want that to be enforced because you want these to be optional. What you can do is right at the end of the name just add a question mark. And as you can see that that fixes it. So now we can pass in an e-mail and we could also pass in a first name and last name if we wanted to. But they're no longer required.

interface User {
  email : string;
  firstname? : string;
  lastName? : string;
}

function profile(user: User) : string {
  return `welcome, ${user.email}`;
}

var realUser = {
  email: ‘test@test.com’,
};

console.log(profile(realUser));

So that's how you can have optional items. And if I run the program now. You can see it's as welcome and then passes in the data from the email. So that is how you can use interfaces in typescript.

Resources

• Source code