This course has been updated! We now recommend you take the React and TypeScript, v2 course.
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: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: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.