How to Configure TypeScript Functions to Work with Interfaces
This guide examines how to create functions that follow an interface's set of rules.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

In this guide, I'm going to talk about how we can create interfaces for functions. Now you're already familiar with a few different ways you can use interfaces. Just kind of on a normal basis. But now I'm going to show how you can use functions and have your arguments structured via an interface.

So I'm going to create an Invoice interface function so I'm going to start by saying interface and I'll create one called invoice func and inside of this in curly braces, I'm going to pass in a set of parentheses. So these parentheses are going to contain the arguments that I want to use in the function so I can see a name and I want it to be of type string and total which is going to be a type number and I want it to return nothing and I want it to be a void method which means I'm just going to print out to the console if I wanted to return a string or a number or something then that's where I could put that. And now I can create an Invoice I'm going to say let my invoice and I want this to be of type invoice func right here. And now what I can do because I want this to be a function expression is all say my invoice equals function. And now I'm going to pass in the parameters.

Now they don't have to be in name in total because I want this to be you know to show you that these are different. They're the same arguments but remember that an interface is a contract the names typically aren't the same but they represent the same thing. So N is mapped and name T is mapped to t right here and that's a way that will function. And now inside of it, I'm going to say console log n and console log t. So all I'm doing is I am creating a function storing it in my invoice and I'm saying that it's going to take two parameters. Now, these are being forced to have this set of parameters because I created the interface and I'm saying that this invoice is going to be of type invoice function or invoice func and I'm going to say my invoice and now I'll pass on the value. So first one has to be a string. Next one is going to be a number. And now if I run this, this is number 024_interface_functions.

Interface InvoiceFunc {
  (name : string, total : number) : void;
}

let myInvoice : InvoiceFunc;
myInvoice = function(n, t) {
  console.log(n);
  console.log(t);
}

myInvoice(‘Google’, 500);

There you go. It worked perfectly. So you'll see this in typescript in angular programs you won't see it quite as often as you'll see interface's built in to work with classes and objects and different things like that. However, I think that will still work properly. It's still something that's important to do because other developers are going to use this. You'll see this scattered throughout some singular programs and so I didn't want it to surprise you when you see a function that had an interface and you know to think that maybe it was a class or something.

So just you know interfaces can be applied to functions to objects and to classes so it's pretty much going to be used throughout all of your typescript development. So it's good to get a good grounding across the board on it.

Resources