TypeScript Tutorial #15 - Interfaces

oh okay then gang so another tool that we can use in typescript that we can't in JavaScript is an interface now an interface allows us to enforce a certain structure of a class or an object we can use it to describe what properties and what methods and what the types of those properties and return types of those methods are now you might be thinking it sounds very much like a class but it's different from a class we don't use an interface to generate objects or create new objects based on the interface we just use it to enforce a certain type of structure within classes or objects now the difference might seem a bit murky but it will hopefully begin to make sense when we dive into some examples over the next couple of lessons so let me start by making a simple interface we do that in typescript by saying interface first of all then the name of the interface I'm gonna say is person curly braces and then inside we can say what properties and is person objects should have and what type they should be so for example I say that every object that describes itself as his person should have a name because if you're a person you have a name right and that should be a string likewise we also have an age which should be a number and maybe we have a method called speak because people speak and it takes in a parameter it doesn't matter what the parameter is called I'm just using a but in any kind of is person object later the parameter name could be whatever you want but it must take in a parameter which is a string oops that's a such ring a string and it must return void and then final it may be we have a spend method because people like to spend and that's going to take in a parameter which is a number and it's also going to return a number as well so right here we're defining this is person interface now we don't have a constructor like a class or anything because like I say we don't use an interface to create new is person objects in this case we'll just use it to say look if we have a variable in the future which is declaring itself to be an is person then it must have these properties and it must have these methods right so for example say I have a constant called me and I'm going to set that type to be is person like that and initialize it with a value okay now at the minute we get an error because we're saying here that look this variable me has to be of type is person right here using this interface but at the minute this object does not comply to this interface it doesn't have a name age speak and spend so we need to add these into the object for it to work so I could say name is going to be shot and then the age is gonna be 30 and we also need a speak method so I'll create that it takes in a parameter which is gonna be a string I'll call this text but you can call it what you want but it must be a string and then it's gonna return void so I'll explicitly say that right here and all I'll do is console.log the text that's all this does and we also need a spend method as well which takes in a number I'll call the parameter amounts but you can call it what you want must be a number this returns a number so I'll explicitly say that you don't have to do this by the way because typescript can infer the return type based on what's inside the function but I'm just being explicit here and this is going to console dot log I spent and then will output the amount and then will return the amount at the end because we're returning a number so now the error is gone up here okay if I just comment one of these out then the error comes back because it doesn't comply to this but when we have all of the difference properties and methods that this interface has it's complying to that interface so now this is valid now what if I add on something else an extra property for example skills well if I set this to be an array we get an error and because this skills property right here is not inside the interface it now no longer matches the structure of the interface so let's get rid of that and now the error goes so I'm just going to say console.log and then me to see what this looks like in the browser over here and we can see we have this object with all of these different properties and methods so that is all working now the benefit of this is that we can have multiple different objects that is of type is person that it implements this interface but they could have different values the methods could be slightly different they all have to be the same signature where they taking a string or a number and return void on number but what they do inside those functions could be completely different but they all follow this general structure right here now the good thing about this is that we could declare another variable say let someone and then we'll say is person is going to be the type and later in the future this now has to match the structure of the interface so it enforces those rules on a variable ok another good thing is that we can say inside a function if we take a parameter it must be and is person type so we could say for example we have a function called greet person and that's equal to an arrow function and then as a parameter over here we're going to take in something called person which must be an is person object right so now inside here we can say console dot log and we'll say hello and then after hello will output person dots and intellisense automatically gives us these things because it knows it follows the structure of this interface it knows what properties and methods are available to us on an is person object so I could output the name right here so now we could only ever pass in an object right here which matches this person interface which is nice so if I come down here I could say greet person and then if I try to pass in an object with say just a name property then this is not going to allow me to do that because it has to match this thing right here however if I pass in me which is this and is off type is person it lets me do that so if I save it then come over to the console I'll see that this works hello Shawn awesome so this is the basics of interfaces now in the next video I want to take it one step further and show you how interfaces can work with classes as well

Channel: Net Ninja

Views: 147,626

Keywords: typescript, typescript tutorial, typescript vs javascript, ts, ts vs js, typescript for beginners, tutorial, tutorial for beginners, typescript tutorial for beginners, what is typescript, typescript basics, install typescript

Id: VbW6vWTaHOY

Length: 7min 18sec (438 seconds)

Published: Wed May 20 2020