So, the props that we're passing to it right now, we know we're getting navigation and this navigate function, and we know how to access this because we referenced the documentation. However, because we're using TypeScript, we have the ability to do even better. We can define exactly everything that's happening here and we can leverage this by using an interface.

So, let's see what that looks like here. I'm going to define an interface, and this is something that's built directly into TypeScript, and interfaces typically follow a naming pattern where you start the name of the interface with a capital I followed by the component that you're describing. So, I'm gonna say, IFeedScreenProps, and the reason why I use props at the end is because you can also create interfaces in TypeScript for a component state, as well, but for right now, I'm just gonna be using the props.

FeedScreen.tsx

interface IFeedScreenProps {

}

So, inside of here, the point of an interface doesn't have anything to do with behavior or functionality of the application. Instead, we are gonna be describing the shape and how to interact with the various properties that this component has available to it. So, the main issue, or the main type of thing we're trying to solve here is that we know how to interact with properties and navigation, and this navigate function, because we've referenced the documentation.

However, if we were to come back to this application a few months from now, that is not really gonna be that obvious to us. Instead, it would be better if the component itself described all of the ways that we were going to interact with this navigation function. It's gonna make it more intuitive and it's also gonna make it less error prone.

So, inside of this interface, what we're gonna do is essentially create some documentation for us on how we can call this navigate function. So, the first thing we're gonna do is we're gonna say that the first element inside of the props we're gonna work with is gonna be called navigation, and that is an object, and we know it's an object because we can see here that navigate is called on navigation, so we know that's going to be an object. Now, inside of navigation, we have this navigate function. So, I can say navigate, and then this is going to be a function which takes in a string as argument and then it returns void. So, whenever you're building out your types of interfaces, then this is a way that you can define a function.

Now, we have a couple little warnings right here, let's look at each one of them. The first one is here on line nine. If I hover over props, it says that the parameter props implicitly has an any type.

I really want you to remember this word, implicitly, because it's gonna be an important one that you know as you build out any type of application. We really wanna try to avoid any type of code that's implicit. Implicit code means that you essentially have to know, without a lot of context, how a function or how a component is gonna work. It's much better to be explicit, when we're explicit, we are describing and telling the component, and telling yourself, if you're looking at your code later on, or telling other developers exactly how it's going to work, so we're gonna try to stay away from this.

But it says that a parameter, props, implicitly has an any type, which means that you could come down here into the function, and you could call something else. So, say that I want to call in another text component and I could say that there is props and username or something like this, and notice that we don't have any error here. So, we would essentially need to memorize all of the props that are being passed into this feed screen component, which, that's gonna be, and I can tell you this from experience, a very, very bad way to build a program, because you're constantly gonna have to go and reference every one of the components that call this, whatever component you're working with, and you're gonna have to see what properties are being passed to it. That's not really a fun way to build a program.

Instead, what we can do is we can be explicit, and that's what our interface is doing. Our interface will give a set of rules that the component has to follow. So, let's keep an eye on this username here as we're incorporating the feed screen property interface. So, I'm just gonna copy this name and now I'm gonna wrap up our list of props here, and I'm gonna say that props is going to follow this interface, and watch what happened down here on line 18.

Now, we have an error like we should because we don't have a property of username being passed, and that's what the interface is telling us. It's saying that property, username, does not exist on type IFeedScreenProps. So, that's perfect. We can get rid of that because we don't have access to that data.

Now, we have one more warning here. If I hover over string, it says that parameter has a name, but no type. Did you mean arg, and then it gives a number, string?

So, whenever you're defining a function in an interface, you actually have to say that this is gonna be an argument. So, I'm gonna say that this is arg : string.

FeedScreen.tsx

interface IFeedScreenProps {
  navigation: {
    navigate: (arg: string) => void;
  }
}

I'm gonna show you exactly how this works and how beneficial this is, but first let's just make sure that the component's working. So, let's save. This gets refreshed, and you can see we didn't break anything, but now we have a lot more guidance on how to build this out. So, let's test this as well.

So, say we come back to this application a few months from now, and this component's pretty big, and so we don't wanna go and reference every spot that the navigation object and the navigate functions called and we come down here, and we just say, "Okay, I wanna direct this to another screen." So, let's say that instead of search, I wanna go to, say, the account screen.

You could say props.navigation, and watch this, as I'm typing, if you remember before, in the last guide, when I was typing out, we had to essentially have it memorized, or copy and paste from the documentation, but, now when I type props and hit dot, it immediately gives me the option of what I have available to me, because what the system's doing is it's going up and it's referencing this interface, and it says, "Oh, okay, you called props, "which means you have access to this navigation object."

If we had listed a number of other objects, it would list each one of those as being available to us. So, I'm gonna say, yes, that's exactly what I want. I want the navigation object, then, from there, I hit dot, and it tells me that I have access to the navigate function. Once again, if I had listed a list of items that were inside of the navigation object, it would show me that full list.

It also tells me exactly how I can call this function. So, I'm gonna click navigate, and then watch what would happen if I called this incorrectly. So, say that I tried to pass in an object and I thought, "Okay, the way I do routing "is I pass in a name object, and it's called Account." You can see that this is giving me an error, and if you hover over it, it says, Argument of type object name string is not assignable to the parameter of type string.

So, this is essentially, and the way I like to think of using TypeScript and interfaces in these kind of tools, it's almost like I'm pair programming. It's like I'm working with another developer who's looking right over my shoulder, and he's giving me guidance on how I'm supposed to be building out the program, and it's like him pointing out, and saying, "Oh, yeah, you're calling this function wrong," and that would only be possible by leveraging TypeScript, and these types of things like interfaces.

So, now I could fix that by removing the object, calling it just as a string, and you can see our error's gone. So, I'll delete that because we have built out our account screen yet, hit save, and everything is good to go.

So, in summary, that is how and why you can use interfaces inside of a TypeScript application.

Resources

• Source code