All right, so now we have this component and it's got a lot of types associated with it. It's much more type safe, right? And that's great, but as you scroll through, you start to see, okay, it's a little verbose, it feels a little aggressive, it's hard to parse. Okay? So we're getting into that weird like TypeScript territory that people don't love, even though it's not as complicated as that. It's very verbose. Let's clean this up a little bit.

even though it's not as complicated as that. It's very verbose. Let's clean this up a little bit. Let's figure out where things belong and how to make things shareable if other components need it. Let's start at the top. So we have these uh, props and we're just gonna co-locate the types along with the components at first. This is a good first step for a simple app

with the components at first. This is a good first step for a simple app with simple components, right? So we're gonna take this and we're just gonna say edit props, and we're gonna make a type called edit props. And we are just going to paste that back in. And now we've got the same thing. It means the same thing. Edit props is not just being referenced down here, and song has all the correct props coming back for it. Now, you'll also see

and song has all the correct props coming back for it. Now, you'll also see interface being used almost interchangeably with type. Totally valid, totally fine if you prefer interface. Totally good. There's subtle differences between the two things. My personal point of view use type until you need something that interface provides, describing the differences between those two things as beyond the scope of this lesson in this series.

between those two things as beyond the scope of this lesson in this series. But it's a nice thing to research in your spare time. But we're gonna use types for this particular lesson. So type edit props is now the same thing. Okay, let's move down. What else can we extract? Well, we've got this form data, so let's grab this and we'll call this just, uh, let's say update form data. I'll say type update form data equals, okay, great. So now it's already more digestible,

I'll say type update form data equals, okay, great. So now it's already more digestible, but you have the type safety around it still, right? So you can see what all of this is going to be and we can see these types here. Cool, let's keep going. Alright, let's grab the use echo data and we'll say song added data. Okay, type song added data equals great. And now we'll grab the JSO stream data.

Okay, type song added data equals great. And now we'll grab the JSO stream data. Okay, so we'll say, uh, songs, JSON, stream data type songs, JSON stream data. Okay, cool. So now we've got essentially the same thing, but it's way cleaner and way more understandable. But you still have all of the same type safety that you had around these functions, uh, just exported to the top, right? So we're just like moving them up a bit. So now we have to think about organization just like you

So we're just like moving them up a bit. So now we have to think about organization just like you have to with any app, any language that you're writing. Where do these things belong? You could totally keep this stuff here, totally fine, totally valid. Uh, I would argue that some of this stuff is probably common to more components than just this one. Somebody might want to use this web hook in another area. Somebody might wanna stream this data in another area.

Somebody might want to use this web hook in another area. Somebody might wanna stream this data in another area. The song model itself is a common set of data probably going to be used everywhere, so we should just centralize that somewhere. So more components can take advantage of these types. And when you change something, it'll trickle out to everywhere, all at once. So let's create a new file called types. Well, just simple types that ts right?

So let's create a new file called types. Well, just simple types that ts right? So let's boot these two out to that particular file, and we'll export both of these. Export. Great. And so now we'll have to import them song data. Great. Okay, so now if other components use this, use Echo Hook for this particular situation, or they use uh, JSON Stream for the songs that JSON, they get this for free.

or they use uh, JSON Stream for the songs that JSON, they get this for free. They can just import this from types and they get it for free. And at the end, all of the types that we have, they just get bundled away. They don't end up in your final bundle. They just are useful for development. So the next thing I would probably want to do is define the song model.

So the next thing I would probably want to do is define the song model. We're gonna be using that in a lot of places, I would imagine, and I'd like to centrally define that so that it trickles out to all of the other places that it's used automatically. And I don't have to worry about that every single time I am dealing with props, I'm dealing with JSON streams. I just want it in one place. So lots of ways to do this.

with JSON streams. I just want it in one place. So lots of ways to do this. We're just gonna keep it really simple. And we're gonna say export type song model. And let's actually just grab, this is the full song model, right? Whoops, boop boop. Great. And now we can just reference this song model. Okay? And this is the same type. So we can say we have an array

And this is the same type. So we can say we have an array of song models, which is what we have. So now this is starting to look a little more concise, right? So we can centrally update the song, model the properties, and it will automatically reflect into this data as we, we update this type. Now we have another model. So we have, we could do export type tag model.

Now we have another model. So we have, we could do export type tag model. And if you recall, this has a label, which is a string, a value, which is a string. Now, we may or may not have this in the song model. There's lots of ways to tackle this, but for right now, we're gonna say tags and we'll say this is an optional thing coming back. And you might get an array of tag models, right? So now we're just getting this interconnected web of things

And you might get an array of tag models, right? So now we're just getting this interconnected web of things that depend on each other, but are centrally located and updated. Now, I would love to use that song model on my edit props and on my update form data, right? So it's the same data technically, but there are some differences here. There are some optional properties that aren't optional in the song model.

There are some optional properties that aren't optional in the song model. Some of them are knowable, there's some differences. So in the next lesson, we are going to figure out how to reuse that song model in a way that is ergonomic within TypeScript.