I wanna talk about two first party Laravel packages that you very well might use that can be greatly enhanced by using TypeScript with them. And these two packages are the Echo package and the stream package. First, let's start with Echo. So down here we are actually just going to use the Echo Hook. And the Echo Hook is a new way of consuming events via uh, web sockets, right?

And the Echo Hook is a new way of consuming events via uh, web sockets, right? So we can specify here, you can see the channel name. So the channel name is songs and the event is song added, right? So I have a song added event and uh, it gets a song model and it's broadcast with this data. So let's pull this over to the side here. And with the echo hook,

So let's pull this over to the side here. And with the echo hook, you just get a simple callback, right? So if you provide a callback, you can then console, you know, log E, right? Whatever, whatever comes back through. But by default this is unknown, right? We don't know exactly what is in here, but you can specify the shape of this data. So again, generics, I told you we'd be using generics a lot.

but you can specify the shape of this data. So again, generics, I told you we'd be using generics a lot. We are. So let's specify the shape of the data. So we know we're getting a song, right? So we're getting a song object back, getting id, which is a number. And let's actually just grab all of this and we'll update it. So we'll do this, bring it over here. Anywhere there's an arrow, let's get rid of it

So we'll do this, bring it over here. Anywhere there's an arrow, let's get rid of it and we'll just say string as a default. Okay? And now we've got a sensible wand. Let's see which one's URL Notes Rating we know is a number favorite is a Boolean created at a string updated as a string. So this is the payload. We're specifying the payload. Now what does that get us? Well now this knows everything about what's coming through.

Now what does that get us? Well now this knows everything about what's coming through. So when we get nice auto complete here, this really helps us. And if something changes, if suddenly we decide that this isn't there anymore, well it lights up red and when we wanna know that. So that's how you would specify the shape of the data coming through that web socket event. Let's talk about streaming. For streaming.

through that web socket event. Let's talk about streaming. For streaming. We are going to install the Laravel Stream React Hook. Let's go ahead and do that. So it's NPMI, Laravel Stream Reacts. Great. So now that's there. Okay, so we are going to be looking at this route. This is get songs, json and we are streaming JSON Back. It is an object that has a songs as a top key and then it's getting a hundred songs

It is an object that has a songs as a top key and then it's getting a hundred songs and returning it a little bit silly to stream back. But for the sake of this demo, I think it works. The Stream React package has a use JSON Stream. Hook, and all you do is you point it to the URL, right? So this is where we are getting our streaming data from. And then you can say, uh, stream result equals, and if we have stream result, we can just see what's in here.

and if we have stream result, we can just see what's in here. So if cancel Clear data, data ID is fecking is streaming, send string data. So what we're interested in is data. What is the data that's coming back here? And right now the data is just null. It doesn't know anything about the shape, it doesn't know anything about this data at all. But I bet you can guess how we could specify this data.

it doesn't know anything about this data at all. But I bet you can guess how we could specify this data. We can use generics, so we know it's going to be songs, right? And then that is going to be an array of objects. So you can set it up already just like that. You actually just grab this up here because it's the same shape. And now this data knows something about this. It knows it's either going

And now this data knows something about this. It knows it's either going to be null when the stream hasn't started yet. But once the stream is complete and the JSON has been parsed, we know we are going to get, uh, songs with an array of song objects. So if we go ahead and, uh, hit this, we can do songs and then we get all of these array methods as we should. So we can say for each, and then we can say s and we should get hopefully auto complete on Yes, we do

So we can say for each, and then we can say s and we should get hopefully auto complete on Yes, we do all of this data. So you can actually utilize the generics provided by these first party packages to strengthen the typing around the data that you are receiving back from streaming and back from web sockets.