TypeScript Tutorial #16 - Interfaces with Classes

Key Takeaways

right there my friends so we've seen how to use interfaces to define the basic structure of objects in the last lesson now I want to show you how we can use interfaces alongside classes as well so what I'm going to do is create a new folder inside source called interfaces this is where all of our interface files are going to live and I'm going to create a new one called has formatter es so inside here I'm going to create a new interface I'm also going to export it so we can use it in other files as well so say export first then we want to export an interface which is called has formatter now inside here we can define the different properties or methods that anything which implements or uses this interface should have now I don't want to add any properties I just want to add a method and that method is going to be a format method and this format method should return a string okay so that's it that's the only thing that I want this interface to ensure that whatever uses it has this format method so I can use this with a class now to say that a class must have this format method if it uses this interface right so if I go to our invoice class over here I can say that I want to implement the has formatter interface now first of all I need to import it so let me say import double curly braces from we need to come out of the classes folder then into the interfaces folder and then it has formatter dot Jas okay and then we want to import has formatter from that now if we want to implement the has formatter interface inside a class then we can say implements right here and then whatever interface that we want to implement inside this class so has formatter and now we're saying look this class must follow the structure of not that the has formatter interface so it must have this formats method inside it which returns a string now in our case it does so this passes there's no error it successfully implements that okay so it's following this structure and we're just ensuring that we have to follow this structure so that in the future we can be sure that every object that we create using this class follows this has formatter interface so if we create an array for example in the future and we only want objects to be added to that which implements this has format interface we can be sure that anything that goes in there using this class has that has formatter interface I hope that makes sense it will become a bit clearer later on when we start to use this elsewhere but anyway we've now implemented that if we didn't have this then we get an error okay so we have to have that former method all right so let's try creating another class which also implements this has formatter interface so I'm going to copy all this right here and I'm going to create a new file called payment dot CS and I'm gonna paste that or right in here and this class is going to be called payment and then the clients is no longer going to be a clients but a recipient instead and down here we want to output recipients instead of clients so it's pretty much the same but instead of a client property we now have a recipient property because when we make a payment it's going to someone when we raise an invoice we're getting money from someone and we'll change the text as well so we'll say is owed because we owe it to them so it would say something like Yoshi is old X amount for whatever he did okay so we have those two classes and they both implements the has formatter interface so in the future for example we could create some variables let me first import a couple of things up here we want invoice we also want payment and that comes from the payment JavaScript file and we also want the has formatter so import and it's going to be has formatter and that's gonna be from dot forward slash interfaces forward slash has formatter jeaious okay so we're importing those three things now imagine we create a couple of variables so I'll say let doc one be of type has formatter so we're saying here in the future this variable must be of type has formatter it must implement that interface and I'll do the same for another variable doc - and now what I could do is create a new instance of the invoice and store it in dock one because we know that the invoice implements this has formatter interface and then for dock - we could set that equal to a new payment using this class because we also know that that payment class implements has a formatter so that's absolutely fine they're both of that type if that makes sense so I'm going to sing now dock 1 is equal to new invoice and the first parameter is going to be Yoshi that's the client for the invoice the second parameter is just going to be the details web work and the third want the amount which is 250 and then on to that I'll make a new payment so I'll say doc 2 is equal to a new payment and that also implements the house formatter interface this time it's going to be - Mario and that's going to be for plumbing work and the amount is going to be 200 so that's fine doc 1 can be an invoice doctor can be a payment because they both implement this interface so this is just making sure that whatever object in the future is stored inside this doc 1 variable and this doctor variable has to implement this interface it just dropped our code a little bit more and makes things a little bit more secure for ourselves in the future now another thing if we wanted to create an array which only holds objects which implements this has format interface we can do so I could say let Docs be some kind of has formatter array and initialize it to be a new array now we're saying the only objects which implement this interface can go inside that array we can say down here docs dot push and it's going to be doc 1 and that's fine because that implements the has formatter interface and Doc's push doc 2 which is also fine because that implements the has formatter interface okay so we're just restricting what can go in here now and it can come from several different classes this object as long as they both implements that has formatter interface and that way we can be sure that every object inside here has a format function which returns a string so when we're cycling through this we can be guaranteed that we can use the format function on every string now so that's the benefit let me just log these to the console so I'm going to say console dot log the docs and save it let me just see this works and we can see we have an invoice and the payment inside here awesome alright so now we know how to do all that why don't we put it to good use in our project down here and let me get rid of these as well we don't need those invoices down here inside this form when we add an event listener and that's submit we're getting all of the values from these different things right here at the type 2 in front details and the amounts now what I want to do is check the type first of all is it going to be either an invoice or a payments and then create a new invoice or payments object so what I'm going to do first is down here say let doc be some kind of variable which implements has format so in the future this can only be an object which implements that interface then under that I'm going to do an if check so I'll say if and then the type which is this thing right here remember the type is what they choose right here if the type value is going to be equal to invoice at that point we're going to say that we want to create a new invoice object and store it inside dock so we'll say that dock is equal to a new invoice right here and the first argument is going to be the two from so if we got to invoice we can see that the first one is the client and that's from this two from field right here so we'll say two from value the second one is going to be the details so details that value and the third one is the amount so amount and then we say value as number like so because it expects a number to be the type okay so that's the new invoice right there otherwise we're going to create a new payment object instead source a dock is equal to new payment and it's the same things go in so I'm going to grab this and paste it right here because we need a string which is two from then the details then the amount because the same things go in here we have a recipient which is a string the details and then the amount so now down here instead of logging out all of these things I can console dot log the dock right so let me save that and come over here and when we submit something will say payment to Yoshi and that's going to be for doing some marketing the amount is gonna be a hundred pounds at it and we can see we have a payment object right here the recipient is Yoshi the detail is doing some marketing the amount is 100 if I create an invoice to Mario for doing some website work and that is going to be for 200 and add that we now have an invoice object awesome so now we have these objects available to us when a user is submitting this form in the next video what we'll start to do is create a which can take these objects and render them to the screen