TypeScript Crash Course #9 - Interfaces

Key Takeaways

okay then my friends so now I want to move on to something much more fun and interesting which kind of opens up a way to define our own custom types and that is interfaces so in a nutshell interfaces are a way to define a certain structure that all data structures can adhere to whether they be classes object literals or even other interfaces now that might sound like gobble de complete nonsense so let's just Dive Right In and do a few examples so let's imagine we have an application that lists a bunch of blog authors on a page and each author would represent or each author would be represented by sorry an object now it might be that you have several author objects and they all need to adhere to a specific object structure for example they might all need a name property which is a string and they might all need an avatar property which could also be a string it could be a URL to a picture or something now we can impose that kind of structure on our objects by making an interface for an author which describes what properties and what type of values those properties should be on an author object now the way we do that is by typing interface first of all and then the name of the interface which I'm going to call Author with a capital A and this capitalization is convention for interfaces it's called Pascal case where each word starts with a capital letter all right so now we're going to open up our curly braces and Define the structure for any object which implements this author interface so we're going to have a name property which is a string and we'll also have an avatar property which is also a string cool so now we have this interface and we can assign it as a type to variables much like we assign strings booleans numbers and arrays as types so let's create a new constant and I'm going to call this constant author one and I'm going to give this a type of author which is the interface which means that this now has to equal an object with these properties so I could put in here we have a name property and that's a string so we'll say this one is Mario and then also we need an avatar property and that's also a string and I will say that's SL image SL mario.png right and now there's no errors if we had a third property like age or something and that was a number then we're going to get an error on this to say look this is not in the interface so let's take that off and now we have this author object which is of type author it adheres to this author interface all right so let's make a new interface now for something else and this is going to be for a post so like a blog post and a post might have a title which is a string it might also have a body which is a string it it might have some tags and those tags could be of type string array and then we could have a created at property and that could be a date and then we could have an author and that could be of type author so we can type properties like this inside other interfaces as our own custom interface type so now if we created a new post I could say constant new post post is equal to something or other and what I will do is type this as a post so now down here we need to add in all the properties we will say the title is going to be something like my first post and then we'll do a body which is something interesting and then after that we will do tags and the tags is going to be a string array so we'll say I don't know gaming um Tech maybe and then after that we will have a created app property now this is a date type which means it must be some kind of date object so we'll just say new date for this and then below that we'll say the author now the author needs to be of author type and we have a constant right here called author one which is of author type so we could use that we could say author one and it allows us and it allows us to do that because this is of type author if we added on any old random object right here then it's not going to allow us to do that it has to adhere to this interface we could write out here so we could add a name and an avatar and that would be fine but I'm just going to use author one instead awesome all right so that's how we can create these interfaces which kind of dictate how an object looks in terms of the properties it has and the values of those properties or rather the types of those properties so now let's have a look at using these interfaces as argument types so what I'm going to do now is create a new function down here and this function will be called create post and it's going to take in as an argument something called post and the type of this will be post as defined right here by this interface so whatever we pass in must be an object object like this kind of thing right here okay so it's going to return nothing so we'll say void right here and then inside I'm just going to log something into the console typically you might do something like save it to a database whatever I'm going to say console.log and we'll do a template string which will say created post and then we'll output the post title so I'll assign curly braces and then post and then if we say dot it's going to know all of the different properties on this post because we said the type of this is a post and it knows that a post has these properties so it gives us good code completion right here so we can say post and then look for the title and we'll output that we'll also say who it's by so we'll say byy and then dollar sign curly braces post then dots and then the author now the author itself is an object and we have an interface for that and we said the type of this author property is author as defined by this interface so if we press dot again over here it's going to know those two properties because it knows it's of author type so we can use the name right here to Output the author name awesome so let's try invoking this function I'm going to say down here create post and invoke it and notice we get an error because it expects an argument so let's pass an argument in which is an object now all I'm going to do is pass in a title property which is a new post title now we still get an error and that's because this must be of type post not just any object so it has to have all of the properties as defined here so instead of that let's just try passing in this new post which we know has all those so new post like so and now we don't get those errors awesome so what I'm going to do is save this and then open up the terminal to see this logged to the console to make sure it's worked and we can see create post my first post which is the title by Mario the author awesome all right so finally let's have a look at how we can use these interfaces with arrays so let me first create a new variable and I'm going to call this posts and I'm going to type this to something so much like we can have arrays that are typed so they can only have certain types of data like strings by saying something like string array we can also do the same with our own custom types using interfaces so we have this post interface face and I could say I want to have an array where only post objects can go inside that array so I could type that as post array like so and to begin with I could set it equal to an empty array but then if I wanted to add items to this array I could only add post objects so let me say posts. push and then if I try to add any old object or even just a string for example that says hello I'm not going to be allowed to do that because that's not post object obviously if I Tred to add an object with the properties like title and maybe also give this I don't know what have we got we've got a body hello again you can see we get an error because this is not a post object we just have a couple of the properties however if I add in the new post which is this thing right here this object that we created that is of type post then it's going to let me do that so new post like so and that works and by the way we don't have to say this is of type post right here for that to work so if I get rid of this like so and just say that new post is equal to this object then these things where we pass new post into the function right here that works and when we pass new post into this push method to add it to this post array that works as well so this doesn't have to be explicitly typed as a post object and also it's not going to infer the type right here because this in typescripts eyes is just an object right it just happens that it conforms to this structure so when typescript is doing checks right here it basically says okay does this thing right here that we pass in this argument does it conform to this interface right here does it have all the same properties and are those property types the required types and in this case yes they are but if I changed one of the types right here like if I changed this to a number like three for example then this is not going to work and this is not going to work right because it recognizes now that these properties and types of these properties are not the same as defined right here so let me just hover over this and you can see that this is not inferring it as a post right that's important it's not inferring it as a post we have to explicitly say when we're using an interface that this is a post if we want to give it that definite type okay but nevertheless if we take this off this object still adheres to this structure and so we're allowed to pass it into functions where we declared that it must be of type post or that we have an array of type post inside that array and we can add them to it okay so there we go my friends that's the basics of interfaces it's a really powerful feature that allows us to Define these kind of custom types of data now in the full Master Class course we'll go into much more detail about interfaces how they can be extended and work alongside other data structures like classes this was very much scratching the surface of what they can do for us in this video so if you want to learn more about them then I'm going to leave a link to the full Master Class down below the video