Converting JS to TypeScript

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.

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, 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, tracking service, 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, and they will track all of your errors' exceptions. One kinda cool thing, 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.

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

And, I have everything else turned on, the,

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 rid. Where, like, our course player, like, 1 in, like, I don't know, a 100 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, set up some error handling where I would explicitly catch it, 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.

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.

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

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 Six switches 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 And a couple of three way switches.

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, Really get out my voltage meters and you know what came in big time handy was that little label maker, 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.

Yeah. It's it's wild because often, at least in North America or at least in Ontario, the, the there's, like, 2 when you have a three way, you have 2 travelers, 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.

I've had it where they're white, 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, 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.

It should never be an issue, but if for some reason someone ever puts power to this unhooked up wire,

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 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.

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.

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?

I usually just go rid. Lever nuts because I've I've actually been having a hard time finding the the the proper I have a bunch of, like, the, like, Amazon ones, Which are fine for low voltage.

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

approved. Which one? So

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 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 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

always drive me crazy. It drive me nuts, and you shove everything back in the box, and you're like, alright.

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, You know, best practices to a tee, but, yeah, I I ordered a bunch of the the 400 or 450 volt rated WAGO, The Waco.

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

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, 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, because rid. Twisting copper. There's there's only so many times you can do that before you, 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. It it's funny.

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? You just I don't know.

You just you just fit it in.

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

Yeah. Right. No kidding.

Larry, let's get into moving to TypeScript.

Rid. We are talking about this because I had just moved over my course platform to TypeScript in rid. Friday at 4:52 or something like that, I I cleared the last TypeScript error, and I hit 0. And I was so happy about it. Wow.

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

Such a large project like that. Yeah. Yeah. And and I personally so I moved to TypeScript, And then now what we're doing is we're moving off of our API to do things just on Sveltekit 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.

Working with the API is different than how I wanted to do it, and sometimes it gives me a chance to

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

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, just normal Svelte data loading, and that, for the most part, worked With the exception of, like, a handful of admin pages.

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.

They were all hitting the GraphQL API, and I'm moving a lot of those over to Svelte actions 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, 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

soon. You know what? I I yeah.

All of these stem back to that initial decision 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 because at the time, the other only other option would have been, rid. Next. Js, really, to do that.

So when we moved to or, you know, to 2 separate applications, 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.

It just was it was just too much work and too much management for What essentially could just be,

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 show for us to do. Let's talk real quick about, like, why do you wanna move to to TypeScript? So, 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 extremely against TypeScript, and this type of thing. And rid. It's it's kinda interesting to to see that thing. So let's just run through some benefits to moving to TypeScript.

The first one is, like, refactoring is is so much easier. So rid. There was a lot of stuff that I had in 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 a 100% of the situations where this thing is referenced.

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, for me, at least, moving to TypeScript has made the refactoring so much easier, As well as, like, edge cases. I thought it was kind of funny 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, 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

where That, like, dreaded, none not a number would pop up in your UI or something or or just look little things where Text or a specific HTML element was showing in my UI 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.

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 that aren't going to show up on an exception an error tracking service. They're not going to show up, 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

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.

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.

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

Yeah. And, like, a lot of the autocomplete will work in rid. JavaScript files in most IDEs 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 a request handler function Outside of the thing, it has no idea that that's a request handler.

And at that point you're dead in the water. So at certain points you do need to describe your your data

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, APIs or anything like that. I personally spend way less time looking at documentation 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.

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