TypeScript Tooling Explained

Welcome to Syntax, the podcast with the tastiest web development treats out there. Today, we've got another TypeScript ready. Episode for you. We're gonna go through all of the TypeScript tooling and explain what they do. What are type checkers? What are compilers? What are transpilers? How do you run Node when you're writing TypeScript? What are build tools? What's the difference? What about the configs? What about Versus Code? Rid. Whole bunch of stuff. Today, we are sponsored by 3 awesome companies. First 1 is LogRocket JavaScript session replay. Second 1, Magic Bell. Rid. They did notifications, integration for your application and FreshBooks JavaScript session. Oh, no. FreshBooks does not do JavaScript session replay. Rid. FreshBooks does cloud accounting. We'll talk about all of them partway through the episode.

With me, as always, is mister Scott Talinsky. How are you doing today, Scott? Hey. What's up? I'm doing a much better here. Just hanging out,

trying to get back to work now. Yeah. I had a had a couple Days off from sick day stuff and then now back in in action.

BIA.

BIA. Alright. Well Everybody of m I a, but nobody says b I a. That's true. Everybody goes b I m I a. But who's back in action? Backstreet's back. That's about the only one that comes back.

Yeah. Who? Shady's back. Oh, yeah. Shady's back.

Baby's got back. Okay. There's there's quite a few back. Yeah. Okay. Yeah. Well, so we both have rid Been doing like, when did we do our 1st TypeScript episode? I feel like we've both I've been writing TypeScript for I was looking back on it for about 2 years now. Rid. I think you've been doing it even longer than that. And I feel like we've got a pretty good handle on all the tooling as well as, like, there's been a lot of movement in rid Tooling around TypeScript lately, so I thought we'd we'd just go through all of that.

So let's get into the first one here. We've got tooling, rid Which is type checkers and compilers. So there's 2 different sort of like, if you need to, turn your rid Or your TypeScript into JavaScript so that it can run, because at the end of the day, you write TypeScript, and TypeScript is an author time environment. By the time it actually runs, it gets converted into JavaScript. And there's kind of 2 things around that. 1st, we have type checkers, And then we have compilers or transpilers. So a type checker is something that will check that your types are correct. So It will not allow you to go on to the next step, which is compile it into JavaScript unless your types are are rid. They have no errors. So if you are passing in an object into a function that is not the right type or you have rid. Broken one of your rules like you have an implicit any and you've turned on the option to have no implicit any or or, you are trying to do math with a string ring or any of the TypeScript rules, that is where the type checker is going to fail you or give you information. Now, those errors that you see pop up in your Versus code, that is because Versus code or whatever editor you're using is constantly running the official TypeScript checker, which is called TSC TypeScript Checker, is constantly rerunning it against your current file.

And every time you make a change, it will try to rerun it and tell you of any possible issues. Now when you when you compile your entire project, TypeScript will go ahead and run it on

all of your files instead of just the current one. Yeah. And you could even get Versus Code to run it on all of your files and all the time, but it is not re Great for your CPU, your battery, or any of that stuff.

Hey. And, actually, Wes, you know what? Not that I say that. You know, I was just Talking about my woes of battery life, I have that setting turned on. I'm wondering Oh, I was just wondering if that was it. If that is part of my problem.

So rid. That is a really good example of why developers still need a strong machine. Because you think about, like, rid. What what do we need? A text file and a browser? Like, why do we need these, like, like, extremely expensive high horsepower machines? Rid. And the TypeScript checker itself is very resource intensive, and that's why it only has it on the current file. But there is a setting in Versus Code that will allow you to turn it on for the entire project and it will continually check your entire project.

I wonder if that's it. But rid. It doesn't necessarily matter when you're plugged in, but I guess when you are mobile, rid. It is an issue, so that it could be I'm curious. And I was mobile. That was my big beef. Yeah. I was just looking for what the actual experimental, rid. Flag was it's typescript.tserver.experimental.enableprojectdiagnostics rid. True. Mhmm. Now we'll turn it on, and the top comment under it is, this will kill you, Ram.

So

it will

Which is fine.

Yeah. Yeah. If you have lots of people, I got, like, I got lots of RAM. 10,000 gigabytes of RAM in this thing. So

so that's the, rid. But okay. So there there's that. And TSC, it will also do the next thing, which is compile or transpile.

Rid. I think people use those interchangeably.

I generally think of compiling as one language to another language. Like, Babble was a compiler where you compile.

We didn't know. Yes. Yes. 5.

Yeah, that's true. What's the difference then?

I I think they are just straight up used interchangeably.

I, I don't know the difference. I I I don't know if there is. There's probably a technical difference, but rid. People called 1 thing, 1 thing, and 1 thing, another thing. So I I don't know if it really matters. Okay. So TypeScript We'll do that. However, it is, I believe, is written in JavaScript.

And for resource intensive things like that, a lot of people start to move out to lower level languages, like a lot of Node is written in C plus plus.

And now we are starting to see a bunch of these tools written in Rust. And what's the other big rid. Another popular one that a lot of people are writing yeah. Go. So a lot of these tools are written in Rust and Go because they are much faster. And then you simply Get a JavaScript API to interact with it. So, instead of using TSC for rid. Transpiling. People generally just use that for type checking.

And then when it comes to turning into JavaScript, they will reach for Either TSC, it will do it just fine.

Or the big 2 right now are ESBuild and SWC.

Rid. So ESBuild is written in Rust, I believe? ESBuild is written in Go. Okay. SWC is written in Rust.

So these are 2 major projects going on right now that try to are implementing the entire TypeScript rid. Transpiler, compiler,

in their native language so that it is extremely fast. Yeah. What I think It's a big, point of confusion for a lot of developers getting into this stuff. So I think we should emphasize that that when you use things like Babble or, esbuild to compile your Your TypeScript down to JavaScript. It's not doing the checking for you at all. It's completely ignoring any of that step and and therefore it's Just turning your your TypeScript into JavaScript so that the browser can read it. So that says, You know, a lot of people would say then, well, why why would I ever even need something like that if that, like, kind of goes against What the purpose of TypeScript is. Right? Isn't TypeScript there to check my stuff? But like you mentioned, people end up just running t, rid. TSC to then type their checks. In fact, the way that we do it is that we have a process called, I think it's just NPM run check or something like that and it just runs TypeScript and you could have it a TSC. You can have it in a watch mode. We actually have it In a what I would think might be a little bit better of a way because I'm I'm usually not too willy nilly with the types.

So so we're we're constantly Making sure everything's up to date but we have ours run-in a GitHub action on PRs and deploys so therefore any PR that we want to do gets blocked rid. If it is in fact, you know, the types are not correct in that PR. So, that's a big thing to to be cognizant of is that it is, rid you end up having kind of 2 different ways to do it. You're no longer just using one thing to compile your code. You're using something to compile your code and something else to rid Check it in a completely different process.

Yeah. It feels like that's a lot of extra overhead. But in in practice, yeah, it can be, I guess.

But but I think the look you might be saying, like, why? Why do you care? Like, who cares if your build takes an extra rid. 10 seconds or 30 seconds.

And the benefit comes in your development environment. So you're writing typescript And you want live reloading, you want fast turnaround, you want your node script to restart immediately.

That's where it becomes where, okay, this thing went down from one a second to 10 milliseconds and it is much faster. And that immediate feedback loop is extremely nice when you are writing like rid. Again, we talk about we talk about the olden days before we had when, Sass used to take sometimes 10 seconds to compile a CSS file.

And that that really, really kills you. Even like even just like like if it takes longer for your eyes to switch back to the browser.

Yes. It's like it's not annoying but when you go to the really fast version, like, oh,

This is really nice. And if you have ADHD, that can be just enough to get you thinking about something else completely. I know me. Like, I would save it. I'd wait for that refresh to happen, and then I'd be like, let me just check Twitter real quick.

And next thing you know, you're, like, totally thrown off your game. Yeah. So there are also

initiatives right now to add type checking to these fast ones.

Specifically, rid WC is trying to implement type checking as well.

I don't know if esbuild I would assume so. Rid. And then also TypeScript, the project themselves, are looking at options on how do we make TSC itself faster? Can we use these things? So I bet In the next year or 2, we're going to start to see, some of these Rust or Go based platforms be able to,

to type check as well as transpile, and then you'll be you'll be flying. I don't know if that's a goal of v s build, to be honest. No? I Okay. I think They well, I don't I'm I'm gonna check their their GitHub just to see if anything's been popping off there or anything people are talking about. I couldn't find anything when I was searching for it. My understanding is that when people were talking about it before the, Evan's, answer basically is always that's not the goal of this project. Rid. Yeah. The goal of this project is just to be a really fast

builder bundler. That's true. And honestly, between just type checking as an author and using the transpiler to get my live reloads.

It's fine because you can do 1 big type check at the end of everything to make sure that you are in good shape. But generally you catch your type checking errors as you author the file because that One file is is constantly being reevaluated.

Yeah. And if you if you have a type issue that's come up because of a file that you're editing in another Like, you added a like, file a and then file f over there has a a type problem, then that's that's a good a good use case for the TypeScript Checkr to find that and alert you, but it's also a good indication that, you know, there might be a potential issue in the code, that TypeScript is actually there to help solve for you. So, you know, at the end of the day, these things rid.

Maybe just running it once before you deploy ends up being the the nice way to have it.

One more tool we talked about is bun.sh.

This seems to be something that does it all. It's written in Zig. I think we should have Very pink question. Maybe we'll have the Author of this on the podcast. Yes. This is pretty interesting. So there are I think there's probably even a couple more efforts. Those are the 3 big ones that I'm aware of, at the moment rid.

To transpile

and compile all of your code. So kind of cool. We could have him on to talk about Bun, but also Zig. I want to learn about Zig. What is yeah. I mean, sounds so cool. You see their website? Why pick Zig? What's the what's the reason for being like, yeah, Zig? That's what I'm going to hitch my my wagon to.

Ziglearnorg.

Rid. It kind of looks like JavaScript and Python together rid And a little bit of PHP with their

concatenation with dots. Pub phone main.

Rid. Yeah. Yeah. There is some JavaScript stuff. There is some rusty stuff. There's intense types. So you're having to define like What type of string and numbers things are? I don't know. Interesting.

Sounds sounds cool. Coolest name of a It's got a cool name, kind of. Yeah. Oh, all all these things are the Go, Rust, Zig.

So much cooler than JavaScript,

you know? We gotta get we gotta have a JavaScript brain and glow up here. We gotta do something about that.

Cold brew script.

Well, if you are trying out a language like rid Zig to compile to your code. You might end up having some bugs in your code because you don't know how to write Zig like me.

And that might lead to some stuff where you're pushing some bugs to production. And you know what a great tool to solve production bugs is, Wes, is LogRocket. LogRocket is one of those services that you have to see to believe. That's my fake tagline for them. LogRocket is so good because, rid You know what? We often debug in in the dark. Right? You're trying to figure out what the user is seeing. You're trying to push piece together breadcrumbs and clues to figure out what the heck is actually happening on the site, but no more Guessing because now you can see what's actually happening with LogRocket. It gives you a scrubbable video replay along with the network request, error logs, and more. All that stuff that you need when you're actually debugging things without having to ask the user for that information.

And not only that but they've started To improve upon LogRocket, they've added some converted gauge and retain customers as well as, conversion rate Different tools to proactively surface issues that impact conversion rates. So a lot of neat stuff coming from LogRocket beyond just solving bugs. It's all around Making your users experience better on your site. So check it out at logrocket.comforward/syntax.

Sign up and you'll get rid. Fourteen days for free. Thank you so much for LogRocket

for sponsoring. Yes. Some cool stuff. We had a call with them a couple couple of months ago, and they're showing us some of the Stuff they're working on and whatnot. And it's it's amazing. It's gonna be huge for if you are trying to figure out, like, why aren't customers Buying or why aren't they as engaged as possible. Right? Like, you can Yeah. You can take all that steps further.

Yeah. I'm a big fan. Rid. Let's get into the next section. I'm gonna call the sections server side or like node ish running JavaScript that's not just for the browser, but like if you want to run a node process with that.

So the first one is we've talked about this many times is Deno.

Deno is the effort to, it's a runtime for JavaScript and TypeScript built on v eight.

Rid. So what that means is that they took the engine out of Chrome, much like Node. Js did, and then they use it to run it on the server side, as well as giving us a set of additional APIs for common server side things like writing files and network stuff.

Rid. So we're big fans of Deno here, and one kind of cool thing is they have firsthand support for TypeScript. Yeah. So Deno uses SWC ready. See under the hood. And what it does is it doesn't do type checking. It just converts it from TypeScript to JavaScript at runtime for you. So that is all built in, which is really cool. There are other lots of other tools available for Node if you wanna If you want to author your application in TypeScript and just have a really nice experience, one thing I do so for my TypeScript course that I'm working on, I just want to have a quick little scripts where you run a you have a ts script and just like you use node Hello.

Js. I want to be able to do exactly that for for things. So I found I tried them all out, and the one that I use is called Yes. No. E s n o.

And that there's another one, I think it's e s m o.

Rid. They're both by the same author and therefore running e s m modules and common JS modules, and it works great. It just compiles them very quickly. It uses esbuild under the hood, so a lot of these tools will be using either swc or esbuild, and just converts it and runs it in a super quick. Big fan of how quick that is

and believe me I tried them all. There's no config or anything like that. Yeah. And you you should know that Yes. Build is extremely fast. If you've never used it, it's shockingly fast. So just a a shout out there because You might be thinking, oh, I gotta run this compiler before, you know, every single file or whatever. But it's it's really you can't even notice. It's it's Faster than you could possibly imagine if you've never used it. So, I haven't used any of these tools myself. Actually, Wes, it's very funny because we you were just saying, like, I just Wanna get up and running in TypeScript. You know, with SvelteKit, you can kind of do that. You just need to install TypeScript into your package dot JSON and then just change the lang to t s in the in the Type in the template. And even that was so much of a barrier to entry for me that I, like, avoided doing it on a project. And I was, like, hit this bug that was so stupid. And then I I was just like, you know what? Screw it. I'm I'm putting TypeScript into this project. And they did it and it found the bug in, like, 3 seconds flat. And I was just thinking And I'm dumb for not not turning this on earlier or just making this this effort. I spent I wasted so much more time, you know, with the not not in initializing the tooling. So, rid. You know, that can definitely be a thing is barrier to entry here. It is. And I I tweeted about

using ES. No. The one of the Authors of Node was like, should we add something like this to Node? And I was like, like, I think I would love that. Rid. Is it the place for it? I don't know. It's kind of like back in the day we we were like, we're like, yeah, add jQuery to the browser. We're trying to say, like, everybody uses this anyway.

Just add it to the browser so it's easy for everybody. And I don't know if it's necessarily like the spot for it because there are a lot of tools around it, But it certainly would be really handy. And I do think that's one of the better features of Deno too is is just being able to write types without any any startup. And a lot of people always challenge me on this, and I think it's because I build hundreds and hundreds of little things every year And that out of the box to it running is very important to me, whereas other people have like, oh, of course, if you have a larger project, rid. Spend a day setting it up and getting it really working really, really well. But when I just want to fetch some JSON, Loop over it and console log the results or save some files to it. I write lots and lots of little scripts and being able to have a barrier free entry to that, But still have the benefits of using TypeScript is huge for me. Totally huge. Yeah.

So there are also this idea of like register scripts. So back rid. When we had ESM before Node had ES modules, there was this register script, which is the idea with a register script in Node is that if you run this code first, You'll be able to use modified code in the future without having to set up any config. So, CoffeeScript was a really good example where, You could use the CoffeeScript register script and then you could just import coffee files like like like they were normal files.

Rid.

Was there is a really good example. Still really good example. It makes it really easy. You just run this register script before and usually it's just like node dash r and then you you you say swc forward slash register and then you say index. Js and then it will run the register script first and then you can go ahead and willy nilly use any type script or anything that you you want after the fact.

So both SWC and Esbuild use the they both have a register available for you.

So if you are building a node app that is written in TypeScript, these are probably ones that you want to take a good look at. If it's a quick script, Just use ESNo.

But in fact, esbuildregister is what ESNo uses under the hood. So Again, these tools all come back to either using SWC or ESBuild, to run the code through. Did you see who made

Yes. No? Yeah. It's,

Anthony. What's his name? Ant Fu. Yeah. Ant Fu. Is his name Anthony? I always yeah. Anthony Fu. Yep. Rid. His name comes up, like, constantly. It's like almost like, every time I open up a project Pretty sure we talked about him on the last podcast. We should have him on podcast.

How are you? So prolific.

Yeah, seriously.

It's just great stuff. Vtest and this and all sorts of stuff. Vtest

esbuild.

Okey doodle. Unreal. Just look at this work contribution graph. Yeah. Wow. Unreal. Rid. What else do we have? Tsnode.

Tsnode uses tsc, so it uses the TypeScript compiler under the hood.

Rid. They are now adding a dash dash swc flag so that it will be faster. Okay.

And then they also so Part of the reason why people moved away from ts node is because it was slow, because it always did a type check.

That is no longer the case. So ts node is also a very good option there.

Deno has NodeCompat now. This is kind of cool. So if you have a node script and you're importing from, like, import whatever from Lodash.

You can now run those scripts in Node. And the Compatibility for Node is very, very good in Deno, but it does not support TypeScript node scripts.

So someone's like, Just use Deno! And I was like, I tried and they have a whole page on the Deno docs about using TypeScript with Node or sorry with using Node,

Compat, but it doesn't work with TypeScript. So that's getting into the weeds. That's a whole thing for me because It's like that's the reason why I'm not picking Deno for any of this stuff because there is a little bit of a a wall there between Deno and Node itself. Right? I mean it's not as Plain as just picking up something like ES Node to run it or even TS Node. Yeah,

eventually it will be because almost all of the node APIs have read Replicated in Deno APIs, but they're still

smoothing out that process if you're using TypeScript. But even then, you have to learn some Deno stuff like the you have to learn the the whole permissions model in Deno. You have to learn the whole imports,

rid. Business and and Deno. They're they're it's not like What I'm reading is that you can use node imports and Oh. It will map them, rid. To like the URLs or to your nodemodules folder.

So like I don't know why you would I'm sure there are are some situations for that. I just can't think of of a good use case right off the top of my head here. Okay. So the last one that you have here is,

w d s? I have not I have not seen of or heard of this thing before, but it says it's a reloading dev server side for TypeScript projects. That seems like something that I want. I you know what? I had to I kinda have this thing for for ES build where I I have, like, a Auto reloading sort of thing for ESBuild, but it you know, I had to write the script myself. I had to get it all set up. It wasn't super turnkey or anything like that. Rid. This seems like it's a layer on top of SWC

or ESBuild. Yeah. This seems like Nodeemon for TypeScript.

So, like, if you let's say you have a good traditional node app that you want to restart every time you make a change.

If that's the case, Then you have to like compile and then pipe that into node mon and then node mon will have to see the change, which is not a bad

Way to do it. It's pretty quick. But It just looks like it does have a watch mode. It Oh, does it? Yeah. It does have a watch mode. So you can definitely just tell it to watch Watch, a directory. And that that was added not somewhat recently, maybe about a year ago, but, it's fine. Yeah. I I I I just know that, like, any time you're getting into more intense build stuff, you're writing your own script file kind of. Yeah. This one says

Using required out extensions.

So this probably figures out which ones to recompile because it can rid. It can scaffold out the required tree.

I'm assuming that's what it is. It uses again, like we said with all of this, It will use either SAVC or ES build under the hood. So again, those 2 tools are

the heart of everything we're doing. And again, we said BUN is going to be that rid That third one, I bet. Yeah. ESBuild sort of rocked the web dev world from usage in Vite, which has kind of also rocked the web dev world to Yeah. This kind of stuff. I mean, it's it's amazing how much, how shockingly fast in just what kind of a difference that can make in your world.

Let's actually take a quick break to talk about one of our sponsor today.

This is the the sponsor with the Magic Bell, also known as Magic Bell. West, do you want to talk about magic bell?

Yes. Magic Bell is a notification inbox for your project.

If you are building an app and you need to notify your users, what do you got to do? Well, you might think, I'll just I'll just have an array of notifications that I'll push to that, and then I'll email them and I'll send a notification to their phone, and then we'll do it in the little rid. Notification belt inside their app. And, oh, before you know it, that's it's pretty complex. So people are saying, I'm getting too many emails from you, and, rid. I want to I only want to get emails about this certain thing. Like, oh my goodness. Like, this is a whole app in itself just sending notifications to your actual user. So What Magic Bell does is they have a whole API that you can integrate it right into your application.

You can do smart notifications. So, like, let's see somebody sees a notification in the app, then don't email them about it as well. They're using your app at the current time. Right? You can send push notifications in app. They have preferences. You can batch them, which is really smart. So I don't know. Somebody gets 8 likes on a rid. On one of their items in it, you don't wanna send them 8 different notifications. Maybe you should batch those together. They they honestly have it all. The docs and the API integration into your app looks fantastic, which is pretty pretty cool. They have a 100 rid. Maus monthly active users, so try it out in your application. Use coupon code syntax f m. That's gonna get you 10% off 1st 12 months. Rich. Again, that's magicbell.com.

Thank you, Magic Bell, for sponsoring. Sick. Okay. So we've talked a little bit about type checkers, compilers. We talked about server side stuff. Let's get into Build tools. Now for me, it's funny because, like, I I always run into, like, what is the difference here between a compiler and a build tool.

I would say, like, at a higher level, what a build tool just does more. It it utilizes compilers to, rid. Take control to run maybe a development server to build, to reload those types of things. Is that what you would say as well, Wes? Yeah. Yeah. Generally,

rid. What these tools do are sort of blurring blurring the boundaries between them, and sometimes they do a lot more than they or they do everything for you. But generally, I like to think of a build tool as or I don't even know if it's a build tool, a dev tool.

They have a local server. They do hot reloading.

Rid. They handle more than just JavaScript, so they'll they'll handle images and CSS and, all kinds of things like that.

Rid. And, there's kind of 2 big ones out there right now or or 2 that I'm pretty fond of.

And I still I keep going back between them both for my TypeScript Of course, I haven't made a decision yet. There's Vite and there's Parcel. And guess what they use?

Vite uses ESP

rid. And Parcel uses SWC. Yeah. So, they are both smoking fast. Parcel 2 specifically, rid. Implemented SWC.

So sometimes you'll see graphs of people saying, like, this is a 1000 times faster than partial. It's not the case anymore.

And they both do like local servers.

They both do like if you want to do a local tunnel. Actually, I don't know if Vite does this, but Parcel does really well. If you like You want to send somebody a URL to something you're working on locally?

Like sometimes I'll send. Oh, yeah, it does. Yeah. It's just like a easy config option. Yeah. It's so good.

These tools are fantastic. I honestly don't.

In my experience, Vite has just worked more often And Parcel has a few more little edge casey features. 1 is which I use a lot, which is multiple inputs.

So for my course, I have 17 different index HTML files. And in those HTML files, you could just use script source equals whatever ts and it will say, ah, that ts you say, let me compile rid. For you or or, dot SCSS or whatever.

If you just import them normally like you were in HTML, We'll compile them and do live reloading and all that good stuff for you. And one thing Parcel does that does not do is multiple ready. Entry points right now where I can just I could just say start at HTML and it will serve all of the HTML files up, rid which is, like, not a use case for most people, but for somebody building tutorials, it is.

Yeah. That's, like, specifically, like, when you would use that. You know what, Tony? These are the best These tools have ever been. You know, they're straight up the best it's ever been. And and a lot of times now when people are talking about getting rid of compilers, rid. I I wonder. It's like, man, the compiler, or even the build tool step that we're we're we're so used to is now become so nice and fast and streamlined it's like do we actually need to get rid of these things? I don't you know I don't know if I'm ever going to want to get rid of these things because they're so helpful all of time. Yeah.

And they're fast. They're easy. There will always be a place for these types of tools. And we should also say, like, If you are using a framework like Next. Js, Next. Js has their own build tool built into Next. Js, and Under the hood, it uses SWC to compile your TypeScript, and it uses Webpack to do all your loaders. And That's not really anything you need to know because in I would I would put next year's on the same level as beaten parcel because it It just works. And then what does, what does Svelte use? Svelte uses v? SvelteKit

uses v. Yeah. SvelteKit. Sorry. Yes. Yeah. And Svelte has its own compiler. Yeah. Awesome.

Rid. Other tools. So BUN is we talked about BUN being like a a compiler transpiler, but it also aims to be rid.

A development tool local server with live reloading. And then there's also Rome,

that has been being worked on for a little while now. So Those are 2 to watch out for. Yeah it'll be interesting to see what becomes of Roam and Bun. Like where do those end up fitting in? Because it it is right now, like, kinda feels like a lot of people have, you know, chosen their their build tool, you know, in terms of these Really popular stacks so are these tools gonna be able to have get gain market share when big projects are already kind of rid. Cemented into Oh, I you do. You do?

Like, I've changed my dev tooling like a 1000 times since I've started my have to. And, like, Honestly, if something is faster and I think it's getting easier and easier because we're not writing I'm not writing Vite specific code or parts. It's getting easier to change. We're writing as close to standards JavaScript as we possibly can, with the exception of JSX, is yeah. It's like its own thing. But most of these, like, TypeScript itself supports rid. Right. And all of these compilers support JSX as well, which is pretty cool.

Right. So those are the build tools.

Rid. Let's talk about configs.

So if you are writing a TypeScript project, you've got a lot of configs that you canwe specifically have Two main ones there's tsconfig and typescript eslint.

Let's talk about tsconfig.

What do you what is The tsconfig file Scott. Tsconfig is basically the source of truth for whatever TypeScript is doing it tells TypeScript What kind of features from TypeScript you wanna be using? How strict to make a TypeScript? Whether or not it's, checking your innies or implicit innies. But it's also, checking your imports so that you don't have to do that import asterisk from sort of business so you can import things as a default import rid. There's there's a a ton of different config.

In fact, maybe even less, that might be a good hasty treat if we haven't already done that would be to just, like, go line by line of all the different Config options in the ts config file because there's a lot of stuff in there from your entry points to where you're you're exiting, maybe some Things to ignore, things to remember, or things to sorry. Not to remember. Things to ignore, things to include.

Yeah. Yeah. There's a whole lot of stuff in there.

Ready. Yeah. I was I'm just going through my notes of my my TypeScript course here. And I have, like you don't need to know all of these, but there are rid. Maybe 10 or so that are really handy whether to include JS or to check JS.

Mhmm.

Rid. The strict ones are are kind of important. I have a whole video in my TypeScript course coming up that explains each of these strict options.

And generally you want to turn on. I turn on all the strict options. Do you as well?

Yeah. Yeah, I do too. Yeah. Pretty.

Then there's like no implicit any, which is another good one to put in because I could get you in some hot water. And so many of these feel like they're A pain in the butt when you turn them on. Like, no implicit any. Right? You're gonna start getting more errors, but,

that's TypeScript doing work for you. That's like it Solving potential or finding potential issues or or making sure that your code is type safe. So So, yeah, there's there's lots of rules in that file. And then there's also, like, things like, How should we output your JavaScript? Should it be common JS or should it be, ESM? Or should it just be straight bundled like JavaScript.

There is a whole bunch of stuff in there. And generally, you only need, I don't know, in my in my Examples. I generally only have, like, 5, 10 different things which files to include.

And then as you hit possible issues or as you hit like I generally like to turn on as strict as you can. And then as you hit things, you understand what they do. You can turn them on or off or tweak them However, it is you want them. Yeah. Yeah. Totally. And and and maybe even, like, you can get,

no like, get your type Code running with some of these options turned off, making it a little less strict to get it all type checked and then turn them on.

It did then Weep as you now have 200 additional errors or whatever. But that that to me was a good strategy, especially if I was converting a JavaScript project to TypeScript, Was that if you turn it all on at once, it can feel super overwhelming. And if you do kind of a little bit make it stricter over time, then you could you could approach some of this in a little bit more measured way. Ready. Next, we have typescript dash eslint.

This is the winner. There used to be one called tslint that was deprecated in favor of typescript eslint, Which is great because, your ESLint config that you use for your JavaScript can just be extended and include all of the types of rules. That's what I did with my westbosseslint config.

I just took it, extended it, rid and added all my TypeScript specific errors. So I always like to tell people that TS config has some rules in it that I call deal breakers, rid. Meaning that if you break any of the rules in your TSLint, the thing will not compile.

Whereas, TypeScript ESLint, you can set up your project to fail the build if you don't if you break one of these lending rules. But these are generally just opinions about how you should structure your code. And if you break one of those opinions, generally, teams will fail the build or fail the pull request.

But those those are things that are sometimes I have little in my tips, of course, I have little red squigglies. I have to explain, This is not going to stop your JavaScript from compiling or your TypeScript for compiling, but it is breaking one of the rules that I put in my a TypeScript thing. And it's up to you to decide.

Is that something I care about or not? Like one of the ones that I just finally turned off after having it on for years, which is no use before define.

So I would have rid. I would have functions at the bottom of my file and I would use them up top.

And I like that because I always like to think, like, my files are you open up a file and say, what rid of it. Do at the top and below it is how does it do it? And that's the definition of the function. And I always got really annoyed and I understand how hoisting works in JavaScript, So I've never actually run into an issue. So I finally turned that off and says, yeah. I can use functions before they're defined. I understand how hoisting works, and It's never bit me in the butt. I you know, it's so funny. I don't run into that anymore because with Svelte, you have your script up top, then you have your HTML, then you have your CSS.

And yeah. I it's just always kind of feels like I'm defining my stuff in in a very specific order nowadays because of how this is set up and it's like the single Single file thing. But I'm with you that, like, I do like my files organized in a very specific way. So that way you kind of know where things are At any given point. Right? Even when I was writing React, and it was a little bit more free from them. I always had, like, a very

distinct way of of organizing everything. Let's talk about our last Sponsor, which is FreshBooks.

FreshBooks is cloud accounting for your business. So if you have a small business, a large business. You're a freelancer. You're just somebody earning a little bit of extra money.

And you need to log your expenses. You need to send out invoices. You need to paid online. You want to get set up automatic reminders.

FreshBooks is that software that you need.

I personally have used it for, I think, Thirteen or 14 years of my business. I I it's kind of cool because you can go back and, like, I can look at how much I made in my 1st year of freelancing and go all the way back to to now see what I'm earning now or see how much I'm spending on a specific category. And it does all of your rid. Local taxes, all that good stuff. Automatic in expense importing right from your credit card does good stuff. So check it out. Freshbooks.com Forward slash syntax.

You're gonna get a 30 day free trial. Thank you, FreshBooks, for sponsoring.

Sick. Alright. Let's talk about, Editors, for actually writing Versus Code or for writing TypeScript is very tightly bound rid People who write TypeScript, I would say a large portion of them use Versus Code because they both come from Microsoft.

TypeScript is built into Versus Code. So if you want TypeScript to work, it just works out of the box. The only thing you might need to do is I hit one little issue, and I needed to upgrade the version of TypeScript that was running in Versus code.

And that's simply just a setting. I think there's even a bunch of rid. The UI menus to to turn it on. Yeah. It doesn't I I can't really speak to any other editor and how it works with TypeScript. But I've heard, you know, good things about web Webstorm or Webstorm.

These other ones. But to me honestly, yeah, Versus Code's integration with TypeScript is so stinking fantastic.

Rid. It works so well.

It gives you so many tools to go to your type definitions to find your type definitions.

The only thing I really dislike about it is when you hover rid over, like, a Type Aire, and it gives you this little tiny box and a giant wall of text that you you can't solve sometimes. Like, it would be really great to have a little bit, like better formatted errors and Yeah. The UI of that is tricky, especially when it's, like, nested, like, a a 1000 levels deep. Yeah. And sometimes Versus Code's constantly popping up with boxes, and I'm, like, trying to swat them away like mosquitoes. Get out of here.

But, you know, it It it's really great overall. And and one of those things that I love is, just being able to quickly jump around your code, check for for errors, and, you know see everything as you're typing it I almost never have to wait for the typescript compiler in Versus code and sometimes there are some Like, if files are deleted behind the scenes, you need to restart the language server. But other than that, like, that that's actually a big thing for those of you who who use Versus Code. Maybe you've had an issue where you're like, I know this rid typed correctly. TSC is not showing an error, but v s code is showing an error. If you fire up your command palette in v s code and just do restart language server, It will restart the language server and hopefully squash any of that stuff. Yeah. I know I know the WebStorm has really good integration as well because rid. WebStorm is an IDE from the ground up, meaning that, like, the difference between a text editor and an IDE is And, IDE is very smart about understanding how your code relates to each other. So you write a function in 1 file and you import it into another file.

Rid. Your editor, your IDE is it knows exactly where that is, and that makes, clicking through to definitions and whatnot very, very good. Now, Versus Code, I'm gonna rid. Say it's a full blown IDE for TypeScript and for a lot of other languages as well. And it does a great job at you can peek through definitions.

Or One really neat thing is that TypeScript itself has a whole set of refactoring tools rid built in. So whether you want to rename a function across 18 different files or rename a variable or move a function from 1 file to another, TypeScript itself has a set of APIs for doing that.

In both WebStorm and Versus Code, and I'm assuming other editors, resurface those APIs via GUI menus, which is really, really cool. And that is extremely handy to if you're refactoring a TypeScript project. You're not doing any any time you do like a find and replace on your code base or find or replace in a file rid. And you're either even in JavaScript, you should say, okay, this is probably not the best way to do it because it's simply just based on text where your editor knows better

about where you're using these. They called symbols in JavaScript, whether it's a CSS selector or A function name or a variable name, it's way smarter than find or replace, so you should look into using those tools. Although sometimes it does get a little obnoxious when you Do to rename a symbol, and then it just renames it at the import. And you're like, you. Well, you you couldn't you couldn't have gone further than that. You couldn't have renamed it in the source file. Yeah. I don't I rid I don't think I've ever hit that. But Oh, man. It doesn't happen every time, but there are times when it happens that I'm just like, I don't know what the hiccup was here. Like, I don't know what I did wrong that made you do this.

Why are you doing this to me? But here I am, and I have to fix your problem now.

It might be The difference between Change All Occurrences and Rename Symbl, but it will also update imports if you rename a file, rid. Which is so cool as well.

Choice. Yes. Good stuff. Good stuff. So I believe that's the end of the list we've got here with all of the TypeScript tooling. There's Quite a bit of stuff surrounding it makes your life a lot easier. If you've got something that we didn't cover here or some tool that you love to use or Some reason why you don't specifically use something, tweet us at Syntax FM. We'll retweet it. We love hearing those things.

Let's move into the next section, which is some sick picks. This is where we pick things that are sick.

I got a sick pick something.

The burst toothbrush.

Well, yeah, it's there was somebody I think it was Zach Eaton, somebody on Twitter was like, sick. Pick this toothbrush because he used I think it was like the new Phillips Sonicare or something like that.

And he's like, This toothbrush is awesome. Like, you should you should try it out and pick it. And I was like, All right.

And he tagged Phillips Sonicare to send us 1, and they didn't they didn't reply. But this other company, Burst, was like, we'll hook you up. Rid.

So I previously had sick pick the fairy will toothbrush, which is like an awesome one on Amazon.

Rid. Use the lithium battery. You charge the thing like once a month or once every 2 months, something like that, which is great. So you don't have to have a dock for it on your thing. You just plug it in every couple months and you're good to go.

So I've been a big fan of that ferry will one, but, this other one, the burst, This thing has been awesome so far.

It's got 3 different modes.

It will stop when you need to switch, switch parts of your mouth. It's pretty, pretty cool. I'm a big fan of it.

Burstoracare.com.

So they did send it to me for free. I have to tell you that, but I've been pretty happy about it. We have, I have a toothbrush upstairs where our bedroom is, but then I also have 1 downstairs where, like, in our, like, rid. In in the morning, I'll use the downstairs one, and at night, I use the one upstairs. So it's nice to have, electronic toothbrushes on both spots so I don't have to use the old toothbrushes.

Yeah, man. That is some ritzy stuff. You got 2

toothbrushes. Toothbrushes.

Rid. My my dentist does not like that I use an off brand toothbrush because they are like, you have to get the Oral B one. Like, go to Costco, get the get the Oral B one. And I was like, those things suck. Like, you got to charge it every every week And, like, you got to have this, like, discussing dock on your end plugged in all the time and it falls over. And and, like, I'm like, there's better there's better versions of it. And then rid. So I told them, yeah, I got this one on Amazon and then they put it in my file. And the last time I went to the, the dentist, They're like, so you're using an Amazon toothbrush. Hey. And, like, shaming me. So

so rid Let's talk about that toothbrush. I I love how those all those conversations with the dentist always come up. That's pretty funny. I'm going to Sick pick. Something that I've sick pick before, but this thing, is really fantastic in our household, and I I cannot stop talking about how great it is.

Rid. It's this TONI box, t o n I t o n I e. I lost my voice. It's a TONI box. Rid. It's this box that is so cool. I mean, this has gotta be one of the coolest little little thing for kids in the entire world here. What this is, It's a speaker that kids can can have and it can tell them stories and you buy these little little figurines for the top of it and they have Tons and tons of stories baked into each of these figurines, and you you the the child will put the the figurine that they want, and they can Smack the side of the box to change the next track. And let me tell you, not all like, both of our kids love this thing, but It has made Landon into some sort of, like, fact monster. It is it is so insane. We we bought him some, like, We we have some, like, fun story ones, but we have some nature ones too for him. So he he'll be like, rid Dad, did you like, did you know that this is this this animal does this and this and this? And we'll just be like, that's not true. And then we'll look it up, and he's, like, a rid percent dead on every single time. He's, like, telling us animal facts nonstop now, and he'll listen to this thing to fall asleep. We got it for him because he had a hard time, being away from us, he, like, kind of wanted, what mom or dad, like, with him when he was going to bed and we, you know, we we gotta have some, rid time away from the kids occasionally. So we we we we put on this Tony box, and they would just read him a story.

And this thing is just incredible. The quality is is amazing. The app is amazing.

There's a huge variety. He get he gets all his either his Paw Patrols and whatever we like this thing so much we're buying a second one for Brooklyn and so that she'll be able to have some Peppa Pig in her room now so

Oh, man. She's going to lose her mind when she gets it. And so I'm very excited about that. So as soon as you as soon as you explain what this was, You're like, you buy these like little classic characters and you put them on top of the box and they play different songs.

And I was like, stories. Oh, yeah. Stories. Yeah. I was like, there's no way that the songs are in the person. They're like, they're probably just streaming from the Internet. Right? Right. I was trying to see that out. I was like, How do you hack it? And so there's already a I just link to I'll link to it in the show notes. Somebody figured out how to hack the NFC So you can get all of the all of the Tony's? Oh, no.

No. No. Don't do that. Support this company. They make good stuff. That's funny.

Hacking an NFC toy with Chameleon Mini.

Chameleon Mini looks like a

a little

board. Yeah. All that stuff. It's funny. Yeah, I obviously buy it, but I just whenever I have kids toys that do things, I'm always just like, how does this work and how can I hack it? Rid. Alright.

I will shamelessly plug my upcoming TypeScript course.

Go to westboss.comforward/courses.

It should Probably out in the next month or 2. Cool. So it probably it won't be out by the time you listen to this, but, get ready for it. If you are saying, oh, I'd like to Get really good at TypeScript, or I've been meaning to check it out, or I've I've tried a couple of things here or there. I'm not totally comfortable with it. This is gonna be the course for you. Check it out.

Westboss.comforward/courses.

Get ready for it. Strap yourself in. Yeah. Check it out. Strap.

Level up tutorials .com, And you can sign up and save 25% on the annual subscription. We're we're doing a huge redesign, which is gonna include a lot of new features, rid A big reorganization of everything and, just a a clear path to, like, learning paths and all sorts of stuff. I have a lot of fun stuff that we'll be showing off about that. So sign up today, and you'll save 25%.

Get in before the rate goes up when we launch our our new new features and redesign.

And you can get access to every single course that we have, which is a new course every single month, from many courses from myself, like the latest one on, rid exploring browser APIs as well as a lot of courses from industry experts on various topics From accessibility to GitHub actions and so much more. So check it out. Level up tutorials dot com. We would love to have you as a member. Thank you. Rid. Awesome.

That's it. Thanks, everybody, for tuning in. We'll catch you on Friday. Peace. Peace.

Rid Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.

Rid.