Check out a free preview of the full React and TypeScript course:
The "Types vs Interfaces" Lesson is part of the full, React and TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Steve discusses similarities and differences between types and interfaces and answers a student's question regarding how to handle things that collect additional arguments in an array. A chart comparing the two is provided on the course website and in this segment.

Get Unlimited Access Now

Transcript from the "Types vs Interfaces" Lesson

>> So we have a site for this workshop, which is gonn be all the things we're talking about. You can see, here's the name tag that we did earlier, and kind of some of the stuff we were doing with the different prop types. And for every single thing that we do today, there is a code sandbox for literally everything that you can kind of take a look at.

[00:00:26] Also, if you go to Setup, there is a repo that also has these examples if you wanna run them locally, cuz I don't trust the Internet. So we have a local version, we have a code sandbox version as well, and some repos that we're gonna work on. But, and on that site in the appendix, one of the questions we just saw is what are the different types and interfaces?

[00:00:52] A few years ago, there was a lot more granular answer between the two. As new versions of TypeScript come out, the line between types and interfaces gets a little bit blurrier, right? Types and interfaces can do more and more similar things. I think one of the ways that I like to think about it is, in JavaScript, function declarations and function expressions are mostly the same but slightly different.

[00:01:26] A function declaration will be hoisted up and a function expression won't be. Arrow functions will lexically bind this but they are, other than edge cases, mostly the same. I think that is becoming increasingly true for types and interfaces. So I included this chart from a tweet to kinda show some of the differences.

[00:01:47] But then I will give you my rule of thumb, or whatever, for thinking about when to use a type or an interface. I like the types. One other thing that's kinda interesting is in Visual Studio Code, when you hover over a type, it will kind of explain to you what the type is in that little pop-up, versus an interface, it will just tell you what the interface is.

[00:02:10] So one way to think about it is for things like classes and stuff along those lines, you'll normally see an interface. But for simpler, more primitives, functions and stuff along those lines, I would use a type. But also, cuz I wanna see that when I hover over a lot of times, it's helpful to me versus just seeing the name of the interface.

[00:02:27] But if that gets so large that it doesn't make any sense to you anymore, you can switch it over to an interface. In other code bases I've worked on, we use interfaces everywhere. Part of that is the time space continuum, right? You could do more things with interfaces at the time.

[00:02:41] The other part was sometimes the right decision is whatever the code base uses that you came into, or whatever the team agrees upon. There's a lot of overlap between them. We're gonna use both over the course of this workshop just to see them, but really, it can, to a certain extent, be at your discretion.

[00:03:05] Cool, Checking, I am going to cover generics. TypeScript is a superset of things on top of JavaScript. So generally speaking, all the rules of JavaScript apply. It is just trying to add an extra layer of protection, because all the JavaScript jokes that we've seen, like true plus true equals two, right?

[00:03:33] TypeScript, true plus true still equals two in TypeScript. TypeScript's just gonna try to stop you from doing that, right? It is JavaScript under the hood. It is JavaScript with an extra layer of protection and stuff along those lines. The question is how do we handle dot, dot, dot, anything that's collecting all the other additional arguments in a function?

[00:03:55] Generally speaking, you would treat them like an array. So we can switchover, let's write some code real quick, it's probably a little bit easier. So we might see something like, Zdd, where we'd say the first number, First, a is a number and we can see all the other numbers that we might see going through.

[00:04:30] In this case, what we would probably do is say, okay, this is going to be an array of numbers, right? Cuz generally speaking, if you're collecting all of them, you still wanna know some information about it, right? So this might add the first number to all of the other ones or something along those lines, right?

[00:04:47] And so it's treated like an array of arguments and so you type it accordingly.