TypeScript Tooling Explained

ready. Entry points right now 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, rid. Implemented SWC.

I'll email them and I'll send a notification to their phone, and then we'll do it in the little rid. Notification as well, which is pretty cool.

rid. I I wonder. It's like, man, the compiler,

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.

Yeah. That's, like, specifically,

also known as Magic Bell. West, do you want to talk about magic bell? There's a huge variety. He get he gets all his either his Paw Patrols for a full archive of all of our shows.

If you are building an app 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 inbox for your project.

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.

They have a local server. They do hot reloading.

which is pretty pretty cool. They have a 100 esbuild, I have kids toys that do things, as close to standards one thing I do so for my TypeScript course that I'm working on, I would I would put next year's on the same level as beaten parcel because it It just works. And then what does,

and you need to notify and Rename Symbl, 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.

Yes. Magic Bell is a notification

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, syntax f m. That's gonna get you 10% off 1st 12 months. Rich. Again, that's magicbell.com.

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

ah, that ts you say, let me compile rid. For you or or, dot SCSS or whatever.

Vite config.

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 How do you run Node when you're writing TypeScript? What are build tools? What's the difference? What about the configs? Forward slash syntax.

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?

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 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. Maus monthly active users, rid. Maybe 10 That is no longer the case. So ts node is also a very good option there.

rid. And Parcel uses SWC. Yeah. So, ts

And they both do like local servers.

just sending notifications 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.

Rid. And, things which files to include.

These tools are fantastic. I honestly don't.

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

Vite uses ESP 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.

all kinds of things like that.

has just worked This thing has been awesome so far.

This is the the sponsor with the Magic Bell,

17 different index can just be extended and it will say, and FreshBooks somebody I think it was Zach Eaton, somebody on Twitter was like, sick. Pick this toothbrush 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.

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

I would say, like, at a higher level, what a build tool just does more. It it utilizes compilers

they are both these are probably ones that you want to take a good look at. If it's a quick script, Just use ESNo.

those types of things. Is that what you would say as well, Wes? Yeah. Yeah. Generally, And you can sign up and save 25% My name is Scott.

to, rid. Take control to run maybe a development server to build, to reload

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.

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,

more often or to your nodemodules folder.

for the entire project and it will continually check your entire project.

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.

it will

when you're plugged in, and an off brand toothbrush

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.

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, In both WebStorm and Versus Code, and I'm assuming other editors, Burstoracare.com.

it will also do the next thing, which is compile or transpile.

I wonder if that's it. But rid. It doesn't necessarily matter Hacking an NFC toy with Chameleon Mini.

when you compile your entire project, TypeScript will go ahead and run it on 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.

in Versus Code that will allow you to turn it on Two main ones there's tsconfig In my experience, 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.

rid. True. Mhmm. Now we'll turn it on, and the top comment under it is, this will kill you, Ram.

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

rid. Flag was it's typescript.tserver.experimental.enableprojectdiagnostics

So rid. That is a really good example of A development tool local server with live reloading. And then there's also Rome,

Why are you doing this to me? But

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

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.

resurface those APIs via 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.

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 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, So I would have rid. I would have functions at the bottom of my file and I would use them up top.

for actually writing Versus Code or modified code in the future 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.

I hit one little issue, and I needed to upgrade the version of TypeScript that was running If you just import them normally like you were in HTML,

But, you know, it It it's really great overall. And and one of those things that I love is,

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

in Versus code.

TypeScript is built into Versus Code. So if you want TypeScript to work, it just the they both have a register available for you.

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 TypeScript node scripts.

languages as well. And it does a great job at you can peek through definitions.

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.

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 had sick pick the fairy will

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, here I am, and I have to fix your problem now.

but it will also Rid. They're both by the same author and therefore running

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.

The only thing I really dislike about it is when you hover What type

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.

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

2 months, something like that, 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 just type checking as an author

Rid.

I have a toothbrush upstairs where our bedroom is, but then I also have 1 downstairs and they didn't they didn't reply. But this other company, Burst, was like, we'll hook you up. Rid.

It's a speaker

burst toothbrush.

hack it? Rid. Alright.

Level up tutorials

Chameleon Mini looks like a So if you are writing And that out of the box to it running is very important to me, whereas other people have like, 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.

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,

Go to westboss.comforward/courses.

dot com. We would love to have you as a member. Thank you. Rid. Awesome.

And you can get access to every single course that we have, which is a new course every single month,

Sonicare to send us 1,

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

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,

to GitHub actions and so much more. So check it out. Level up tutorials

I got a sick pick something.

We we have some, like, fun story ones, but we have some nature ones too for him. So he he'll be like, on the annual subscription. We're we're doing a huge redesign, which is gonna include a lot of new features,

he used I think it was like the new Phillips Sonicare or something like that.

And I was like, stories. Oh, yeah. Stories. Yeah. I was like, there's no way that 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 JavaScript session replay. Second 1, Magic Bell. Rid. They did notifications, I think the look you might be saying, like, why? Why do you care? Like, who cares if your build takes an extra rid. What these tools do are sort of blurring those errors that you see pop up in your Versus code, that is because

that kids can can have and it can tell them stories

as well as a lot of courses from industry experts on various topics From accessibility 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?

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.

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

So I previously

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

there was and for a lot of other 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 So features. 1 is which I use a lot, which is multiple inputs.

So I've been a big fan of that ferry will one, but, this other one, the burst,

so

toothbrush, which is like an awesome one on Amazon.

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,

Well, yeah, it's electronic toothbrushes on both spots so I don't have to use the old toothbrushes.

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

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

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

Rid. It's this TONI box, t o n I

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

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, 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? Or update imports if you rename a file, rid. Which is so cool as well.

songs.

So you can get all of the all of the Tony's? Oh, no.

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,

It's got 3 different modes.

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, any PR that we want to do gets blocked

I'm always just like, how does this work and how can I 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 That's not really anything you need to know because in

rid exploring browser APIs Yeah, man. That is some ritzy stuff. You got 2 Cold brew script.

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 common JS modules, works out of the box. The only thing you might need to do is so that's the, 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

Rid Head on over to syntax.fm

.com, how shockingly fast in just what kind of a difference that can make in your world.

So this probably

like like like they were normal files.

about using TypeScript with Node rid. But okay. So there there's that. And TSC, 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, And then when it comes to Westboss.comforward/courses.

or sorry with using Node, Mhmm.

which ones to recompile because it can So let's get into the first one here. We've got tooling, Rid. My my dentist 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 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 That's it. Thanks, everybody, for tuning in. We'll catch you on

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 a

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.

so it uses the TypeScript compiler

and then node mon will have to see the change, which is not a bad is constantly rerunning it against your current file.

to run the code through. Did you see who made 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. I think people use those interchangeably.

It's just great stuff. Vtest and this and all sorts of stuff. Vtest a little And this thing is just incredible. The quality is is amazing. The app is amazing.

it's a runtime for JavaScript and TypeScript built on v eight.

eventually it will be because almost all of the node APIs have 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, Yeah. Who? Shady's back. Oh, yeah. Shady's back.

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

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

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

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

under the hood.

Plain as just picking up something like ES Node to run it or even

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

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, from many courses from myself, like the latest one on,

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

and just have a really nice experience, It might be rid People who write TypeScript, where your editor knows better TypeScript itself has a set of APIs for doing that.

for to go on to the next step, which is compile it into JavaScript 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 extremely nice when you are writing like rid. Again, we talk about we talk about the olden days before we had when, 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, You're gonna get a 30 day free trial. Thank you, FreshBooks, for sponsoring.

e s m modules

but it does not support You can send push notifications in app. They have preferences. You can batch them, which is really smart. So And that there's another one, I think it's e s m o.

Yes. No? Yeah. It's,

Deno is the effort to,

So if you are building

I just want to have a quick little scripts where you run a you have a ts script and just like you use node using the transpiler to get my live reloads.

So there are also this idea of like register scripts. So back rid. When we had ESM it's simply just based on text It will stop when you need to switch, So sometimes you'll see graphs of people saying, like, this is a 1000 times faster than partial. It's not the case anymore.

a node app that is written in TypeScript, that some of these Rust or Go based platforms Next. Js, for things. So I found I tried them all out, and the one that I use is called Yes. No. E s n o.

Yeah, seriously.

SWC

but they're still What about Versus Code? Rid. Whole bunch of stuff. Today, we are sponsored by 3 awesome companies. First 1 is LogRocket Ziglearnorg.

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

TS Node. Yeah, Yeah. Yeah, I do too. Yeah. Pretty.

a directory. And that that was added not somewhat recently, maybe about a year ago, but, so therefore

rid. Business and and Deno. They're they're it's not like What I'm reading is that you can use node imports Or I'm not writing Vite specific code or parts. It's getting easier to change. We're writing rid Which is type checkers and compilers. So there's 2 different And he tagged Phillips Which is fine.

without having to set up any config. So, Yes. It's like it's not annoying but when you go to the really fast version, like, oh, 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.

import whatever from Lodash.

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 these things rid.

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,

Deno has NodeCompat now. This is kind of cool. So if you have a So both SWC and Esbuild use using ES. No. The one of the Authors of Node was like, should we add something like this to Node? if you don't if you break one of these lending rules. But these are generally just

rid. Spend a day setting it up and getting it really working really, really well. But when I just want to fetch some JSON, oh, of course, if you have a larger project, 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 The difference between Change All Occurrences if you're refactoring a TypeScript project. You're not doing any any time you do like a find and replace 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.

Tsnode uses tsc, 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, GUI menus, which is really, really cool. And that is extremely handy to type script or anything that you you want after the fact.

hundreds and hundreds of little things every year Rid. They are now adding a dash dash swc flag so that it will be faster. Okay.

read Replicated in Deno APIs,

Again, these tools all come back to either using SWC or ESBuild,

Rid.

and Oh. It will map them, rid. To like the URLs

and you're importing from, like, rid. Transpiler, compiler, and just converts it and runs it in a super quick. Big fan of how quick that is

Js. I want to be able to do exactly that Editors, 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.

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,

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.

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,

You could use the CoffeeScript register script and then you could just import coffee files I just took it, extended it, on your code base the dentist, They're like, so you're using an Amazon toothbrush. Hey. And, like, shaming me. So is what ESNo uses under the hood. So

How are you? So prolific.

rid. It can scaffold out the required tree.

TypeScript.

esbuild.

CoffeeScript was a really good example where, 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 and they play different API to interact with it. So, board. Yeah. All that stuff. It's funny. Yeah, I obviously buy it, but I just whenever I generally think of compiling as one language to another language. Like, Babble was a compiler where you compile.

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 Under the hood, it uses are implementing the entire TypeScript You can now run those scripts in Node. And the Compatibility for Node is very, very good in Deno,

node script a TypeScript project,

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,

So smoking fast. Parcel 2 specifically, eslint.

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

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 Rid. It works so well.

And that that really, really kills you. Even like even just like like reminders.

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.

But but JavaScript as we possibly can, with the exception of JSX, toothbrushes. Toothbrushes.

Specifically, Yeah, that's true. What's the difference then? But in fact, esbuildregister you've got a lot of configs that you canwe I would say a large portion of them use Versus Code because they both come from Microsoft.

that says, You know, a lot of people would say then, well, why why would I ever even

Checkr to find that and alert you, but it's also a good indication that, Let's actually take a quick break to talk about one of our sponsor today.

as well as,

So much cooler than JavaScript, rid. 10 seconds or 30 seconds.

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.

Rid. It kind of looks like and it uses Webpack to do all your loaders. And HTML files. And in those HTML files, you could just use script source equals whatever itself so try it out in your application. Use coupon code why developers 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.

rid.

intense types. So you're having to define like

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 maybe some Things to ignore, things to remember, or things to sorry. Not to remember. Things to ignore, things to include.

be able to, a I just link to I'll link to it in the show notes. Somebody figured out how to hack the NFC 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.

Rid. Yeah. Yeah. There is some JavaScript stuff. There is some rusty stuff. There's

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,

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

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

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

To transpile

esbuild

concatenation with dots. Pub phone main.

and deploys

Well, if you are trying out a language like rid Zig To improve upon LogRocket, they've added some converted gauge and retain customers

initiatives

of string and numbers things are? I don't know. Interesting.

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

And the benefit comes in your development environment. So you're writing typescript

that TypeScript is actually there to help solve for you. So, you know, at the end of the day,

And not only that but they've started is really fantastic in our household, and I I cannot stop talking about how great it is.

Sass used to take sometimes 10 seconds to compile a CSS file.

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

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

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 and therefore it's Just turning your your TypeScript into JavaScript so that the browser can read it. So

builder bundler. That's true. And honestly, between instead of using TSC

One more tool we talked about is bun.sh.

when you use things like Babble or,

Evan's,

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.

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.

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.

and Python together So for my course, I have You'll be able to use has a whole set of refactoring tools In the next year or 2, we're going to start to see,

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.

JavaScript the big 2 right now are ESBuild

This seems to be 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? And you want live reloading, you want fast turnaround, you want your node script to restart immediately.

rid And a little bit of PHP with their

you know, there might be a potential issue in the code, This is really nice. And if you have ADHD, 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,

rid. TSC to then type their checks. In fact, the way that we do it is that we have a process called,

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

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

I I think they are just straight up used interchangeably.

for for writing TypeScript the official TypeScript checker, which is called TSC

So these are 2 major projects going on right now One really neat thing is that TypeScript 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 Then you have to like compile and then pipe that into node mon Friday. Peace. Peace.

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

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

rid. Transpiling. People generally just use that for type checking.

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

is yeah. It's like its own thing. But most of these, like, TypeScript itself supports

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

and I think it's getting easier and easier because we're not writing 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 someone's like, Just use Deno! And I was like, I tried and they have a whole page on the Deno docs 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 Rid. So what that means is that they took the engine out of Chrome,

what does Svelte use? Svelte uses v? SvelteKit

their build tool, you know, in terms of these Really popular stacks so are these tools gonna be able to

like I personally have used it for, I think, Thirteen or 14 years And Parcel has a few more little edge casey

rid. Right. And all of these compilers support JSX your users, If that's the case, 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 or

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

Rid. Other tools. So BUN your type checking errors as you author the file because that One file is is constantly being reevaluated.

to compile your TypeScript,

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

Honestly, if something is faster a TypeScript thing. And it's up to you to decide.

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

SWC Rid. So ESBuild 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

kinda feels like a lot of people have, you know, chosen their

get gain market share when big projects are already kind of rid. Cemented into Oh, I you do. You do? What do you what is The tsconfig file Scott. Tsconfig is basically the source of truth for whatever TypeScript is doing it tells TypeScript

Rid. Let's talk about configs.

And then as you hit possible issues

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 rid WC is trying to implement type checking as well.

FreshBooks is cloud accounting

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

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.

finally turned off after having it on for years, which is Rid. Use the lithium battery. You charge the thing like once a month or once every try to

or so that are really handy whether to include JS or to check JS.

and include all of the types of rules. That's what I did with my westbosseslint Get a JavaScript

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.

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,

Sick. Alright. Let's talk about, does not like that I use switch parts of your mouth. It's pretty, pretty cool. I'm a big fan of it.

Let's talk about tsconfig.

Whereas, TypeScript ESLint, you can set up your project to fail the build 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

opinions

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,

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

FreshBooks is that software that you need.

generally, teams will fail the build or fail the pull request.

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.

Is that something I care about or not? Like one of the ones that I just The 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, Rid. Your editor, your IDE is it knows exactly where that is, and that makes, 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 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, or ESBuild. Yeah. This seems like Nodeemon for You want to send somebody a URL to something you're working on locally? Next. Js has their own build tool built into Next. Js, and 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 Rid. They handle more than just JavaScript, so they'll they'll handle images and CSS and, because

no use before define.

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.

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,

And generally you want to turn on. I turn on all the strict options. Do you as well? I will shamelessly plug my upcoming TypeScript course.

your ESLint config that you use for your JavaScript is very tightly bound rules, figures out 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.

like JavaScript.

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 turning into JavaScript, they will reach for Either TSC, it will do it just fine.

about how you should structure your code. And if you break one of those opinions,

checking your imports so that you don't have to do that import But like you mentioned, people end up just running t,

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

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.

specifically have if it takes longer for your eyes to switch back to the browser.

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

And yeah. I it's just always kind of feels like I'm defining my

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

and typescript to your actual user. So What Magic Bell does is they have a whole API that you can integrate it right into your application.

This is the winner. There used to be one called tslint that was deprecated in favor of typescript eslint, Which is great because,

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.

And then we have compilers or transpilers. So a type checker is something that will

things around that. 1st, we have type checkers, 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?

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.

integration for your application Hello.

sort of like, if you need to, Right. So those are the build tools.

BIA.

the type checker is going to fail you or give you information. Now,

TypeScript Checker, Like, I've changed my dev tooling like a 1000 times since I've started my have to. And, like,

Versus code or whatever editor you're using is constantly running rid and added all my TypeScript specific 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.

that is where Using required out extensions.

And every time you make a change, it will try to rerun it and tell you of any possible issues. Now when you right now to add type checking to these fast ones.

check that your types are correct. So It will not allow you