Check out a free preview of the full React and TypeScript, v2 course

The "Wrapping Up" Lesson is part of the full, React and TypeScript, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve wraps up the course by sharing a few resources and answering an audience question about composing types.


Transcript from the "Wrapping Up" Lesson

>> I would say the heuristic to follow, it's gonna be my kinda closing piece here. Is there's deeper you can go in terms of library code. But on the practical scale of things that the heuristic of what have I actually had to use in the last little bit.

This covers almost all of it, right? Obviously, there are further explorations, yes. And I put some links and some reading material. There's also, I added some stuff around higher-order components, which I would say in the hook's era. I find myself more making hooks than I make higher order components.

Like how to pass through certain props. Some of this stuff exists, but I gotta say, under the heuristic of what are the stuff that you're gonna use? This is a core set that I find myself in the large code bases that I've worked on the last few years using repeatedly, over and over.

>> And do you think it's a suitable scenario for some cases when not to read it? Let's say you have a couple of layers of passengers, extra passengers at. And let's say you repass, let's say you opted out of context, can you repass much of properties? Do you think it's also a good idea if they're very closely coupled to the prompts of the most bottom.

Again, to say the same thing with it we've got [INAUDIBLE] stages, do you think the prompts, because this. And this layer you just structure a bit and let's say, at the top level, two properties plus, whatever the lowest station. Then one property whatever, the lowest, and then end up with just the most one [INAUDIBLE].

>> Yeah, one of the things that I would do and I think this answers the question is probably start to think about, what does composability look like, right? So for instance, one of the thoughts that struck me as I was putting together that was it's not a particularly big app, right?

Is let's see, if I can do it real quick, next color. I wrote that a lot, right? And so it's not always the sole property, right, to your point on every single object, right? One of the things that we do in this strategy is start to think about the compostable.

There are a lot of things that involve a hex color, but some of these, it being a somewhat simple app. It involves some other things as well, right? And so what I might start to do is head over, whether it's in global d.t or somewhere else like, it depends.

What I might start to do is like, you know how we had props with children that then could extend? I find myself, there was a point where I didn't know props with children existed and I wrote my own and used it all the time. It worked, it was great, but a lot of times I might do is like, And I could say in this case, P.

And now, I could theoretically take any other set of props, like that might be one of my lower level ones, right? And like later on, I can be like, hey, I want to add this together. Now, I have it in one place. It's utility type that I can like, abstract and start to like compose together larger and more advanced types.

And we talked a little bit about interfaces versus types. The other thing that I have done over time is, you can do stuff. Try thing another thing that I would need, sure. Right, and I might make, Same basic concept and this is something I've done before to like, honestly great fact.

And it's served me better sometimes in a lot of fancy stuff. And then you can say, you can see where this is going, right?
>> There's union
>> Yep, and you can begin to just compose them. This is normally what I ended up, yeah. I have never had the diligence actually called props with, props with, props with.

Because we did props with children I was like, yeah, it seems good. A lot of times, I've just done with and you can see like that one I've had to work it out a little bit. I think I gotta admit some stuff and play around. Also P, it's probably part of it.

But the basic pattern, right, not to get too into the weeds here, right, is that, yeah, it worked. I can begin to compose these and have the different sets of them. And if something is only expecting hex color and it gets hex like, as long like it'll play around the types as long as it is a set that works.

Unlike Java and C, and stuff like that you don't have to be like in this type only. If a function is expecting some with A and B and you pass an object has A, B, and C and C is not used. That fits the type, because it doesn't see as irrelevant, right?

And so you get some flexibility and TypeScript that you don't get with other type systems. Cool, did I answer your question?
>> Yeah.
>> Awesome.
>> I think you just need to make, like, at some point, it's trade off the mayabe finding the role.
>> Yep, exactly, eexactly.

And I would encourage you to like, think of like, consider that and think about that, cuz it is very tempting to go on the Internet expedition. And be like, I should do this crazy pattern. I've regretted it almost every time, sometimes the next week, sometimes the my favorite things are something.

2020 me, thought that was a smart idea, right? 2022 me, regrets everything, right? And understanding that you live with code bases for a long time and cleverness very frequently comes to bite you. And explicitness sometimes bites you, but at least it's just annoying bites, right? Mike North has a full like just TypeScript dedicated course where like go into like the internals for this, which is that is useful in a lot of cases.

But if we're just thinking about the react layer you get a lot of the power from react to, yeah, awesome, thank you.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now