Check out a free preview of the full Production-Grade TypeScript course:
The "Using Interfaces" Lesson is part of the full, Production-Grade TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Mike uses an interface to import type information for API calls in the application's data layer. Interfaces do not contain any implementation code so the impact on the application's codebase size is minimal.

Get Unlimited Access Now

Transcript from the "Using Interfaces" Lesson

[00:00:00]
>> So we have a couple more things to talk about today. And in these next couple sections are some of the most important things I can offer you, some of the most important pieces of knowledge that I see underappreciated and underused in the TypeScript ecosystem. So, I wanna make sure that we get to these things.

[00:00:27] First, let's talk about dealing with pure type information. And this can appear in our app in a couple different places. First, we have this concept of, maybe we have models, right? So this slack app potentially could have a team, a channel, a message. These are sort of data entities that relate to my app.

[00:00:52] And I may use those types in various different places. So I'll show you where I would put those and that is in a TypeScript file, side by side with all of the rest of my stuff. types.ts and in here, I could and if you're following along in the notes from section seven, so I'm gonna go and grab the contents of this file.

[00:01:17] You can read through the stuff which I'll be talking about in a moment. But this is this big section, a bunch of different interfaces. So I'm gonna bring those into this newly created file, and there we go. So, this is gonna be a JavaScript module like any other and if we build it, We'll see that the JavaScript piece test disappears to almost nothing.

[00:01:42] Because interfaces, of course, are just type information, there's nothing else. In fact, I don't think I'm even going to touch, I'm not even going to see this file yet because I have not imported it anywhere. So let's import it in one place. So I wanna go to this data folder, which is sort of a data layer.

[00:02:05] And we've got some functions here that pretty clearly are intended to make some API calls. So get all teams is gonna return an array of teams and I've called this an ITeam. Now, this is a convention if anyone here has worked with C-Sharp, this is a convention borrowed from that ecosystem where the capital I leaving the interface name indicates that something's in an interface.

[00:02:34] And the reason is if I see something like this, without having some sort of naming convention, it's not immediately clear to me that this is just type information. And by the way I could do, I could use the new type only import here, and it will work just fine.

[00:02:53] So we're getting a list of teams, this returns a promise that resolves, To list of teams, Get team by ID this returns a promise that resolves to a team. And these cached lists here, let's see making this API call, I'm returning this, so that looks like it's the right type.

[00:03:33] And just taking a look at this real quick, I expect that this is also going to be a promise that resolves to an ITeam. Okay, so now we're using our type information in at least one spot. I'm gonna build once more, and I just want us to look at the build output, so we can see what all happens here.

[00:03:57] So if I were to look in here and search for like ITeam, it's just not in here, no results, no concept of this symbol being available in here. So it just disappears. So that's what I would do with type information that has to do with my app. But that's not the only kind of type information we need to worry about.