Converting JS to TypeScript

because weaken it. Yeah. Yeah. You weaken it. It's it's kind of an putting those light switches in is not By far my least favorite thing to do because you go from this, like, tiny little light switch that has a hot coming in and something going to the light. And then you got to add a ground. You got to add the neutral, which is packed in the back of the box. Mhmm. And then you got to add, like, usually have that little pigtails because rid. If you can't fit that many wires in a wire nut, then you got a pigtail to it. It's such a and then you're like, alright. Let me try to fit this back into this tiny little box.

Yeah. 220 ones or whatever they are. Two ones. Yeah. Those are the ones that I run. 211. Yeah.

Yeah. Rid. Yeah. It's it's pretty crazy. You gotta be careful. You don't pinch anything on the way in.

the 400 or 450

and then you put the the knot on. And it's so hard to get them all lined up perfectly and whatnot. And rid. It works, but the the Wiggles are way nicer, especially if you, like, have to take it out again in the future,

you have to get the the actual proper ones that have been they have, like, the a stamp on them. And they've been approved by Rid. We are talking about this because Rid. Although, like, v s code has gotten really, really good at that. I always just been like, I'm just gonna leave it there or, like, things that were I had a property that was spelled wrong, and I just, like, live with it for rid however long because I was just too afraid to change it and and break something. And and and once I was on TypeScript, I was like, oh, just right click, refactor, rename that property, and boom, all the types are updated. Rid. Anywhere I've used that property, it's it's all been done. So, whatever because you're not allowed to do anything that is against code with that stuff. But they're way better. The lever nuts are or sorry. The The the twist nuts but some electricians don't, rid which is kind of annoying. It's it's kinda confusing to do that. I actually ripped out a bunch of the three ways, and just moved the, Like the other switch into a just a coin cell operated. Leviton has these ones where you can just put a and that was much easier than having to rid. Figure out all the crazy wiring, and you just capped them all off or what? Yeah. Yeah. You capped off the one. You capped them off on both ends.

The Waco.

You know, I do the the I I watched a bunch of YouTube that was like, alright. Here's here's the ways to making the best. You you twist the wires before you do everything. So I followed it, all of the,

the It just You just Yeah. Right. No kidding.

volt rated WAGO,

Yeah. So I was thinking, like, now, maybe I'll just go all in on these and just start Next ones I do just start using these. They're way better. Honestly, I just need to buy a big pack of them because That's what I did. Yeah. With with the lever with the nuts, you have to. Rid. I I always twist them with the linesman's first, I had just moved over my course platform to TypeScript in rid. Friday at 4:52 Larry, let's get into

You know, best practices to a tee, but, yeah, I I ordered a bunch of So when we launched, it was like, alright. Mutations are still hitting our GraphQL API. It's all using the same database, so mutations are a little bit more tough.

like, I I just went on Amazon. They're called lever nuts. They're just Okay. Just generic ones. But if you wanna use rid. If you wanna use the, like, actual lever nuts in, like, a 120 volts,

You just you just fit it in.

As well as, like, edge cases. I thought it was kind of funny

so much easier, the there's, like, 2 when you have a three way, you have 2 travelers,

my code base that was in a specific file that I was like, I don't like, rid. I gotta I gotta move that thing, but I don't really feel like moving it because I I don't know that I had, I had a like, I don't often have a server crash, but I I definitely I hit a server crash, rid. Due to some a bot was trying to submit a form on my website, and it actually found a little edge case. And I was like, oh, man. If I was on TypeScript,

for me, at least, moving to TypeScript has made the refactoring set up some error handling where I would explicitly catch it, Welcome to Syntax, the podcast with the tastiest TypeScript treats out rid There. Today, we've got a good one for you. We are gonna talk about,

Really get out my

was that little label maker,

you know what came in big time handy I don't know.

this weekend? Wow. That's not yeah. It's not a ton, but, like, it's all it's enough. You know what? I did my first four way switch where I wasn't expecting it to be shown. And that's the kind of little things that it caught for me more so than anything.

voltage meters and

And I gotta tell you, man, I I had no idea after doing so many 1 you know, just normal 2 is it just a normal two way switch or whatever? Those are so easy. And then you get into the three way switch, and all of a sudden, the red's connecting to the black and the blue and the, you know, who knows? Like, I I had to, like,

The Nimbot There you go. Because I would I would find the wires. I would find the common wire, and then I would label it. And the next time. So next person that goes in that outlet is gonna pop open that light switch and be like, oh, man. This dude labeled the wires for me. That's awesome.

Oh, hey. No. It's all good, man. Hey. I you know, I saw you doing some electrical last night on Instagram, and I was doing the same. I installed

and then send that over to Sentry. By default, Sentry will just rid Catch everything. But in my case, I wanted a little bit more information, so I sent that over. And now they're starting to pile in. I've gotten 2 or 3 this morning already, and it's rid. Just a bit more insight into what's happening, so pretty happy about that. You're gonna wanna check it out at century.

I haven't turned it on, but I've been seeing that little message pop up in my dashboard.

How's it going, Scott? I forgot to introduce you.

I don't know, a 100

rid. Where, like, 1 in, like, yeah.

Io. Use a coupon code rid. Tasty treat, all lowercase, all one word, and I'll give you 2 months for free. Thank you, Century, for sponsoring. Sick.

tracking service, 1 course that doesn't have a description or doesn't have, like, a something like that. You know? So, like, that's rid perimeter, and it it caught that. And those are the things, like, if you ever see something that says, hello, undefined on, like, a email or on a website, you go, okay. They They didn't catch it. You just assume as a developer, you just assume, it's probably gonna be there, and it probably will always be there. But there's gonna be a one in 10,000 requests where, okay, there there is an issue here, and and then it's kind of embarrassing to show that. Totally.

Rid. You know? Don't you like autocomplete?

because, actually, what's happening is Versus Code is actually just running your code through TypeScript rid and try to infer as much as it possibly can. However, at a certain point, you write a, like a Yeah. And, like, a lot of the autocomplete will work in extremely and this type of thing. And a 100% of the situations where this thing is referenced.

APIs or anything like that. I personally spend way less time looking at documentation Yeah. It it's funny.

a request handler function

because one of the things that I rid to do when I have the docs up is I'm just looking at what methods exist and what are their inputs and outputs.

rid. JavaScript files in most IDEs Performance stuff, the profiling, but not replaced yet just yet. That's so it seems pretty cool to be able to I, like, I was having an issue

and having that a 100% across the board is super nice. Yeah. It helps you identify things too when you're working with 3rd party, always drive me crazy. It drive me nuts, and you shove everything back in the box, and you're like, alright.

rid. Reapproach some problems or things that I had done before and clean it all up. So I I've been doing a ton of migrating myself. So yeah. TS, are you are you moving your whole GraphQL API over to Svelte functions, or are you, like, moving that stuff off of GraphQL and just putting it in, like, a Server side database

And then now what we're doing is we're moving off of our API to do things just on Sveltekit

Working with the API is different than Fitting all of that into the the tiny little it's like the the new light manufacturers, the the new switches rid are so awesome, but it's like, how the heck am I supposed to fit this in here?

moving to TypeScript.

how I wanted to do it, and sometimes it gives me a chance to

or something like that, I I cleared the last TypeScript error, and I hit 0. And I was so happy about it. Wow.

Such a large project like that. Yeah. Yeah. And and I personally so I moved to TypeScript,

So we're just gonna kind of go through I know you've converted a whole bunch of applications. You've been on TypeScript for a while with yours. So we're just gonna sort of, like, talk about how to tackle rid. Requests, not even a 100. But, like, basically, every 5 seconds, we submit some data to the server rid to hand to log the progress of how you're viewing the video. And there was, like, a weird issue where I'm not sure where it's coming from just yet, but rid I I think Cloudflare is probably blocking a request if it happens too quickly after another one. But I needed some insight into of that. So, basically, I, that you basically install in your application, whether it's a node back end, whether JavaScript front end, whether it's Python, literally works with everything, Outside of the thing, it has no idea that that's a request handler.

just because Oh, wow. It's It's way easier. And, like, yeah, the site, I would say more than half the site is now, but it is opening up some TypeScript stuff. So I've been pretty deep into the TypeScript errors as I go. So as I go, I'm I'm, you know, I move something over, and then I it uncovers some interesting things where rid.

query, Svelte function. So when we rewrote the site, the goal was to get at launch All of the data loading to be done via Svelte,

you do it when you can kind of kind of situation. Totally. So does that mean that you eventually will have no GraphQL API? Yes. Hopefully

against TypeScript,

I had a lot of people when I, like, posted my progress on Twitter. I had Not a lot, but like a handful of people who were

They were all hitting the GraphQL API, and I'm moving a lot of those over to Svelte actions Six switches none was it was just too much work and too much management for What essentially could just be,

And then cleaning up some of like I said, the admin stuff that I had left in there, because it's like you know, the admin tools are great, and they're a lot of fun to work on, but they're also low priority for everything. So it's, from any other way than just somebody sending you a message on Discord. Been like, oh, hey. By the way, do you Do you notice that this, text looks kinda weird here or something like that? Yeah. It's finding those kind of issues. Right? Yeah. I think the the super common one is rid Is what you said is that you you maybe have a label, and you're inputting the course dot name into that label. Rid. Whoever, like, for me, I have where But now I don't have to necessarily look that up because my ID is telling me what Methods exist on any given property, what their inputs and outputs are. Not only that, but, like, sometimes you think you're working with thing. Right? I think I'm working with thing, And so I do thing dot property, and

All of these stem back to that initial decision then it's issue. So, yeah, you you cap them off on both ends. Yeah. I rid I don't know if I was that event I mean, I guess installing the 3 and 4 way switches is kind of adventurous because you're really getting into it. Like, I opened it. I, I I opened it. It's probably the hardest. Yeah. I opened it up, and it's like, alright. We got 2 white wires and 2 black wires, but they're telling me that there should be 2 red wires and 2 black wires. Okay. I got 2 white ones. And then and then in the in one of the 3 way switches, there's a red wire and the white wire. So some at some point, the red wire becomes

and that, for the most part, worked With the exception of, like, a handful of admin pages.

to move off of Meteor. Right? Because Yeah. When we move off of Meteor, it's like, alright. What do you wanna do? Do you wanna have 2 separate applications? And we went with the 2 separate applications And, I have everything else turned on, the, or, you know, to 2 separate applications,

rid show for us to do. Let's talk real quick about, like, why do you wanna move to to TypeScript? So,

The first one is, like, refactoring is is so much easier. So rid. There was a lot of stuff that I had in

rid. It's it's kinda interesting to to see that thing. So let's just run through some benefits to moving to TypeScript.

because at the time, the other only other option would have been, rid. Next. Js, really, to do that.

soon. You know what? I I

like a PHP style site, like what we're doing now, essentially, with all kits. That's that's That's really interesting. So you're just going in. Maybe we need a whole episode on this because I'm very I'm really curious on it. So I'll I'll hold off on that. I think that'd be kind of an interesting, rid. Twisting copper. There's there's only so many times you can do that before you, I've had it where they're white,

So when we moved to

it was rid. Fine for, like, releases. Everything was great, but, man, coordinating that with such a small team in, like, honestly, a project that probably doesn't need that, rid. We didn't have we're not using the external API for anything.

I usually just go rid. Lever nuts because I've I've actually been having a hard time

approved. Which one? So just normal Svelte data loading,

So I had all my stuff ready for a three way switch, and then I pulled it on, like, what is this business going on here? And then I found out a whole another light switch that was connected to these same lights. By the way, rid. Quick quick question. Do you do you go all the way on the the Wago, or do you go nuts? And a couple of three way switches.

Kind of a especially with that four way switch. When I took off the 1st switch, it was the four way switch, and I wasn't I didn't realize it was a four way. I thought it was a a three way switch.

finding the the the proper I have a bunch of, like, the, like, Amazon ones, Which are fine for low voltage.

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

how to take a code base that is in JavaScript and convert it to TypeScript. What is the process? How do you rid or something like that. It probably seems

so overwhelming at points that you think, like, is that even doable? Because it's certainly easier starting from scratch, but That's not the case in in many applications, so we're gonna get on into that. We're sponsored today by Sentry.

Sentry is the amazing error and exception, Like, I fixed our vacuum lines with it and whatnot, but you shouldn't you should never use those for actual electrical because they're not they're not TSA

What else here? Better DX, AmazingDx is just the auto the autocomplete itself. Like, if you don't like TypeScript, you probably at least like autocomplete.

not a number would pop up in your UI or something or or just look little things where

That, like, dreaded,

that aren't going to show up on an exception an error tracking service. They're not going to show up,

Like, I always talk about, like, TypeScript as being like, it's not Going to solve your bugs for you, but it's going to alert you where there could be bugs or there could be situations where there's trouble. And one thing I I really liked when moving my application to TS is it found so many of those situations Text or a specific HTML element was showing in my UI

Yeah. It's it's wild because often, at least in North America or at least in Ontario, the, And at that point you're dead in the water. So at certain points you do need to describe your your data

And the color of those is is different. Sometimes it's red and sometimes black. Sometimes both of them are black, and you don't know which one is the the traveler.

It should never be an issue, but if for some reason someone ever puts power to I would have, I would have been able to I would have caught that definitely before it went through. Yeah. And and you know what? For me, I found a lot of situations and they will track all of your errors' exceptions. One kinda cool thing,

rid. Which if it's white, you're supposed to mark it with a piece of black tape to show that it's a black wire, like, our course player, That they are in beta right now is, session replay. Have you have you turned this on yet, Scott? I haven't done it yet.

this unhooked up wire,

The white wire in inside of another box somewhere else that I I wasn't seeing or you know, it just you know, it it's rid. Easy when red goes to red, black goes to black, and, you know, everything just works. And then the moment that you open it up and you're like, this is not what I was expecting in here.