Types in JS?

it works really well. And a lot of things can be coursed, and you you don't run into that many issues. But as you learn to build bigger stuff, You'll start to see the benefits of being able to type your JS. Yeah. It is interesting. And I I feel like my code specifically like, we had it with

and let in cons and backticks and, Actually hooks on to that. Like the it's not going to be in your dev tools being like, oh, you passed a number when you should have passed a string. Right? Like, it's still There are no enums really exciting that they could possibly add it.

viewpoint of this all because I I believe when I would have started with TypeScript, I really didn't want to like TypeScript because I thought it looked ugly to look at, but now

And

Now that I understand TypeScript and how it all works, I much rather write it all right in line of authoring your code without having to convert the entire application over. So erasable

and they take up a lot of space. I don't know what it is about me in in code that takes up a lot of space. I know some people really like that or even prefer it. And For some reason, I just don't

above your functions and things like that. And it is really handy. Like, I have a bunch of projects that are just straight JavaScript, Yeah. Yeah. One other interesting thing in here is there's a question, why not define a type system in t c 39 instead? So t c 39 is the committee

You're just like, okay, there's right away. Just learn regular JavaScript because And that would that's not doable in time. So that's a nice little benefit. But the downside is that you have to write it all type syntax to JavaScript. It's kinda interesting. They it. They say this is types as comments, and that was kinda interesting to me. It's like like, isn't that what JS doc is? Like, what Yeah. What do you do in here? But we'll explain what they mean by types comments. But so this is a proposal to actually add types to it. So maybe we should start off really quickly and explain what types are.

flat. Right? And

JSOC is great, but I think I'm on on board with Scott's idea here is that it's just a little bit more verbose. It's a little bit more fumbly.

and then you can do at type at arguments, and you can it's actually really nice because you can also one thing that Yes. So the TypeScript doesn't do is you can describe Like, I've I know JavaScript. And now, like, what is this? Like, I just look at it, and there's dot dot dot everywhere and hello to someone's name. And you say you pass it in their name, and their name is going to be a string. Right? Some text. And if you pass in a number, Thank you, Linode, for sponsoring.

comments,

as I'm typing the code. It. Literally typing it. Yeah. It's actually came out with a new proposal,

and There's, like, 8 arguments, and all of those arguments are typed right in line. It's just like, oh my and it and it's an arrow function, and there's export default fonts in front of in this is that 40 things here. Like, what are these things? You know? So that's that's definitely valid criticism. And that's why I like that it is Opt in. Like, I think even if you were this comes to JavaScript. I'm going to say don't learn typed JavaScript destructuring.

To write plain old JavaScript, but still type your JavaScript very confusing. It's kind of weird because the if you look at the example code that they've given you, it looks exactly like TypeScript, where you define a variable or an argument or whatever, a function, and then you type it. The arguments to those functions are you you type a an object,

being like, I wish this was typed or if there's a library that's really tricky and it keeps screwing up. What I'll do is I'll write the JS dot comments above it, and you can import any types that are published for that library. And then you get the at least some of the nice parts of TypeScript,

I I can read it very well. So it It doesn't feel the same way where it felt overwhelming and too verbose and too cluttered and all those things that TypeScript could feel like when you're first starting. And then I do I look at the JSDoc

like, especially all the Laravel devs seem to have, like, really high, The type information

And that's really frustrating to a lot of people because they look at it and they stressed out and say, I don't know what those are doing. Right?

And that's a valid criticism because if you are brand new to JavaScript,

I wonder if that's something that's changed in my

if your application is not complex, TypeScript is really not saving you that much.

And on Stack Overflow's Overflow's annual design survey. It was listed in both the top 4 most loved languages since 2017 and the top ten it. Most used languages.

we dropped we talked about this. We had no No inside knowledge that this existed here. Did we predict that? We did. And, well, you you might have. I don't think I did because I I don't think I believed that And don't forget to subscribe in your podcast player

types as comments, which,

you can see that the idea of having types in JavaScript has now reached a point where

Keep it dialed into Syntax. FM because we will keep you updated on any changes to this, and parse it. Like, I'm assuming, like, the TypeScript compiler would be able to read that data as well

So if you're out there on the sidelines at this point with TypeScript,

and 2021.

a 100%.

for 2022,

or interface or a type or anything like that, just like you normally do in TypeScript. So, Like, what does that mean when they say types of comments? I'm not seeing comments anywhere. Yeah. From what I gather, ECMAScript modules, and we everybody was using Common JS or Require JS or

that could possibly be added to JavaScript is, a, as first class citizens in node Ignored types or

It would it would come so soon. It would come so soon. I mean, it's still stage 0, meaning,

But these types that you then can add what arguments are. So if you're hovering over top of an argument, it will you be you could say, like,

Additionally, TypeScript is listed as the 4th most used language in GitHub's state of the Octoverse.

it seems like it it it's like most developers would really want this to exist inside of JavaScript. Yes. So the proposal says it this proposal is literally called,

It's funny that they had in their blog post that Static typing was the most requested language feature in the state of JS survey in both 2020 I think some of that that

Yeah. I I I'll I'll I'll also say I am also on board for this. I think it's, between TypeScript It makes sense. That That happens with literally everything. Here we are. We've been saying for for years, we should add TypeScript to the browser. People were saying we should add jQuery to the browser. Right? Mhmm. And and That's what people say we need this in the browser. And what I think what they really are saying is that

spec. Yeah. I think we should talk about it if it hits stage 1, stage 2, stage GitHub actions to control your release process and things like that. So

as it moves along because this this will be a big transformative shift in JavaScript.

This is this is one of those things that I felt like it feels like,

JavaScript, has never had a strong type interface.

fine for most developers for a long time. It was almost like no one really talked about types or strongly typed JavaScript

until TypeScript came along and Flow came along, it. And people were all of a sudden seeing the benefits of what it could be, especially as we build more and more complex applications with JavaScript is really what it comes down to, it. Is that the work has become more complex than it ever has before,

It's been felt just so much better Moving in that direction, but I do believe that

the the benefits really start to appear.

It is funny. We'll we'll get into the types as comments thing because I don't necessarily understand that myself. I I'm interested to hear what you have to say. It.

And sure enough, after our predictions or drop a review if you like this show.

TypeScript really ends up saving you a ton of time. And, therefore, so that's probably why nobody was dying for types in JavaScript in the days of jQuery.

Yeah. And I we've linked both the proposal as well as the sort of introductory blog post that was making the rounds on this, it. So you can check it out yourself.

The autocomplete is amazing. All that good stuff. And now there's a proposal for

we've been saying for quite a while that this is going to be Well, TypeScript is you know? I mean, it's an in a language owned by a company, Microsoft.

You know, it's amazing how many things that you've lived without that other developers in other languages are just very used to. So,

But, basically, yeah, types are are existing to improve your life as a developer. And the fact that, You know,

yeah. Give me this, because I I like typing code that is strongly typed. As a as a a person who learned code primarily through JavaScript.

Boss and Scott

Alright. So, the other day, this is, I don't know, a couple we had all this new syntax that was added to JavaScript, and that stress a lot of people out because they said, which makes sense. Yeah. JSX is not.

Use the coupon code tasty treat, and you'll get 2 months for free. We're also sponsored by Linode, which is a cloud computing,

a solution on there. We you know that we talk about their Linux. Probably most of you use them for their Linux hosting solutions, but they have all kinds of different

that developers trust. They do curly brackets, and we had rest and spread This types in JavaScript,

a an application or a personal website or anything and you need cloud solutions, check us. Out at Linode because they are gonna give you a $100 They call generics type arguments, There's too many opinions. There's too many,

The proposal is it. Existing. It exists now, and we're going to be talking about what it is, why it exists, why you might be interested in this, and just overall,

the craziest,

solutions out there. So if you're building

Open wide dev fans, get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest,

CSD.

really keep a track of them. This is the type of thing that if you're a developer and you have a product that people use, it's important to have a good visibility into it. How the site's working, but also the general experience that your users are having on your site. And Sentry allows you to not only get keep track of it. The errors and bugs and, things that come up, exceptions on your site, and allows you to attach them to releases and fix them at your own, it. Timeline, but it also gives you the tools to do some really neat stuff like performance metrics tracking, where you can see just it. How miserable some of your users are based on the speed of certain pages. So head on over to century.i0.

It. Pretty cool, and there's a lot of opinions on either side of it. So let's dig on in.

Monday. Monday. Monday.

Pretty much anything you can imagine. Load balancers, Kubernetes, cloud GPUs, dedicated GPUs. They do video streaming. They have an entire video streaming Up And in the real world Being like, okay, well, there's there's TypeScript, there's JSTOC, and then there is there was Flow. Right. And TypeScript is a very clear winner. And like even

That's sentry.i0.

at Sentry dot I o is the perfect place to see your errors and exceptions and, having strong types in JavaScript would have been maybe confusing or overwhelming or not necessarily worth it. And now I'm of the opinion of Yeah.

Yeah. Let's dig on. And this episode is sponsored by 2 it. Incredible companies, Linode and Sentry.

Welcome to Syntax on this Monday. Hey, St. Treat. We're gonna be talking about it. The new proposal that's taken the JavaScript world by storm, that is types in JavaScript.

the tastiest web development treats coming again hot. Here is Wes Barracuda

Sentry

they should call it like There probably will be some, again, some proposal to add But And I find myself

type sprinkles or something. Type sprinkles.

which is also something

I don't know, 10 years to actually come to the thing. And They say no. We need to have an external body. We've done the work in TypeScript. It's TypeScript is 10 years old now. We figured it all out. We are going to now propose that we are adding that to the language.

so that's fine. What's up with people asking for JSX in the browser? You know, I like Let's I I like JSX everything. And it's fine. I don't I I think j s JSX needs it like a j x JSX 2 or 3 before they put it in the browser because I don't think it's Yeah. We need to have statements before I'm gonna get on that podcast.

that their line height is, like, a wicked vanilla JavaScript API right now is because everyone said, let's add jQuery. And they're like, no. But But we can do something Well, it's kind of. Something just as good. Yeah. Yeah.

Yeah.

in your JavaScript code Don't affect how your JavaScript runs at all. So that's entirely for you, the developer, and other tools that are built on top of it. That's a good way to describe it because they don't look like comments.

a difference.

coming and proposing

in t c 39 and just design it from the ground up? Kind of like how ECMAScript modules was done. Right? Mhmm. And basically, the answer to that is it will never get done.

controls And the idea here is, like, why are you and not real data, there are no enums.

All kinds of like you like job. Yes. Six took, Which is a proposal to bring optional and Any of the tooling could be able to read that data because enums are a weird thing in TypeScript. They're like the only part of So it's it's kinda cool that now we have TypeScript, And a lot of people use TypeScript. My myself, it's got included because it

Versus prop types and how prop types run-in the browser. Mhmm. I I as far from what I gather like this, that won't be a thing unless there's, like, a browser extension that

a full type system that is already done

spin off a committee in comments. So there is a special way. Yeah. Yeah. Like, you can write s forward slash star star, and now it's all been standardized on e s m. Right? Like, can we also So do that for as long as we get it right. And I think we've got it right. We've already done the, like, dogfooding this is a listing of 3 different postage types, like, personal letter or, Angle bracket and arrows, and these people are using these fancy fonts that are making them arrows.

JSX like something to the language at some point, There's just like that's a whole bunch more stuff to learn, especially if you're just like looking at some code

This is

doesn't look like much.

Like, where your head's at? Yeah.

So let's wrap it up with the last thing, which is like, what's the difference

be able to,

Either way,

It. Once you I think once you see the benefits, you're gonna you're gonna feel good about having those there.

Next is that it's it's also ignored it. The the JS runtime rate is just straight up going to be ignored. So

We kinda mentioned this a little bit. It is it is it. Adds a little bit of clutter to your code, so it probably is a little bit harder to learn than just straight up JavaScript. And I would say if you were learning JavaScript for the very first time, then Probably staying away from the types for a little bit is is a good plan there. So it very well may make,

learning just a little bit more difficult JavaScript in the beginning.

correctly check those on on what would be still build time, I guess, or would you just have, like, a validation step?

that difficulty of getting from a TS file into the browser. Yeah. Like, that's the really interesting part is that It's not like your dev tools are going to yell at you. Like, remember a couple of episodes we go, we talked about not important, meaning that they're not trying to add types to the low level JavaScript engines. They're just trying to add types to the JavaScript parser be added to the language. So we'll we'll keep you updated here on syntax.

you're going to if you want that kind of type checking, you're still going to have to use some kind of tool to do the type checking.

people have been talking. It's like, oh, this is the end of build tools or something like that, and I don't think build tools They're going anywhere. I hate to to break it to you all, but I think build tools are going to be here for a long time. This is just going to reduce some of that.

And that whether that's on build time or what, so that becomes a whole thing in itself. So the the types, sure, they'll they'll exist in the browser, but you're gonna still need tooling around it to Me, personally, I went from being the type of person that felt like

are what you call typed languages, meaning that when

I'm gonna say I'm gonna make a function that says hello I do see that there are a couple concerns Are seen by the JavaScript engine as

string. Right? And that's the very basics of what what types CSR obviously is a lot more complicated than that, and, specifically around learning JavaScript, and we'll talk about that in a second. But I'm I'm on board. 100%. I think that this should should go ahead and, TypeScript that actually gets compiled into JavaScript code. Everything else is, Like like we said, stripped out. Right? So because this proposal only covers, we need the ability to quickly template like JSX in the browser, and that's how we get standards. That's how we have

and JavaScript doesn't have that. JavaScript's the Wild West. They call it loosely typed. Sorry. Yeah. JavaScript is typed, Just meaning the browser, Those things are still stripped out, which is why that makes more sense that it says types as comments, right? Your comments

there's no way to say, okay, when somebody runs this function or Flow to TypeScript in a weekend,

not strongly typed as you were just you're getting. Yeah. JavaScript has types. Right? Like, we have numbers and strings and objects. And In those objects, you can put numbers and strings and billions and all that stuff.

most programming languages, not maybe not most, but many programming languages

then that thing will yell at you and say, hey. Why'd you pass me a number, you silly goose? It should have been a should have been a a entirely opt in. Meaning that regular JavaScript without any types will work

when you merge, these are the possible options, 3 strings and a number.

converted their entire code base over from You don't have to have some sort of tool to to make it work. So I think that would be awesome. And and also, like, it also just standardizes it into, in free credit. Go to Linode, l I n o d e, .comforward/ syntax to get that $100.

just because you can you can automatically do it. There's lots of tools out there, and they had to basically, like, shut her down on Friday, Tell her do a code freeze, It's probably top 3 things for me. And this is that there's no build step or thing in between.

It. So that's why they say, hey.

There's all kinds of different, Yeah. Yeah. It's, you declare a function and that takes in an argument, it. You declare the type of the thing that would be passed in. So, While we're talking about what it looks like, it's that is a valid criticism because this also happened when e s 6 came out. When e x e s 6 hit, We had arrow functions

But 2,

The JavaScript or it's parsing out the JavaScript before it's running it either way. And that can be very fast using things like esbuild, But it's still a build tool. Right? You can't just pop these files, a TS file, into the browser and have it work. So having something in the browser is going to Save you a bunch of time in compilation. It's gonna save you that annoyance of how do I get types into my thing without having a builds it it hasn't really been picked up or anything like that. Prayer right now. Yeah. Yeah.

There was a really good blog post about how Stripe

and then change it all over to TypeScript. And then everybody came in on Monday morning and started writing TypeScript, whereas they left off writing flow module loaders back in the day,

like, I think that TypeScript is a clear winner. And line height in all their editors. And it's that I'm just I could do that. Yeah. Too much space. I don't know what it is. That that's not valid. It's not like a super valid criticism, but Not at all. Not at all.

Build step or Yeah. You know, 18 different, Glad to see that they're not going that direction. Yeah. Let let's and let's go into that. So JSDoc requires a build tool. You have to compile your code no matter what. Right? Even those things that do t s node or any of that stuff, it's it's running

think that you don't need to type your JavaScript, and that's fine. And that that use case is covered. Just don't use it. Right? So I think that those

Having things in the platform, especially like this, ends up becoming just a huge productivity boost. Yeah. I think types

the day before, which is kind of interesting. So

And so why not use just use TypeScript? Like, what's what are the reasons for not just saying, hey. We we want types. Just use TypeScript.

The it's it's funny. They actually cite that, Basically, JSDoc is more verbose and not fully TypeScript featured as in it doesn't have all the same features as TypeScript.

JSDoc isn't necessarily the solution here. We we want something in the language.

The only argument against TypeScript that I hear is just people that Yeah. Yeah.

they or they meet, and they may have proposals about adding things to JavaScript.

as your your code base gets more complex or you become a better developer, I think you'll understand the needs And the wants a little bit more than having just sort of basic code. Okay. So why not just use JSDoc?

So, like, it it's the type of thing that where a thing.

and then like a browser or a bunch of ESLint tooling or a prettier tooling or and

For that stuff, they know if it's a number or a string. That's that's what I gather from from reading all of the information about this. It's interesting because, verbiage that we use in TypeScript world as well. So I'm not sure if that's 50 times one line. I always see people posting,

is the ability

when I first saw that link that it was types as comments, my brain went directly to JSDoc. And I wasn't thinking that it would be it. Basically, the TypeScript syntax. But even though it says as comments like you mentioned, it is basically the TypeScript syntax. It's just not, I mean, it's parsed out. Yeah. Exactly. Yeah. I honestly prefer that. Because when I first saw this pop up and saw that it was types as comments, I was like, I don't it. Think I like the JSDoc

And then parse it and then use that information whole bunch of reasons. It makes development much easier. It catches bugs ahead of time.

as as you have there. So what they mean by as comments is that

ergonomics as much as I like the TypeScript are those already dealt with. We've TypeScript is a clear winner. And let's Let's move ahead and add to language. I might be wrong about this, but that's how I feel, I think. Yeah. I I agree. Yeah. So okay. So what else? It. Possible downsides they have listed. What are what are some possible downsides that you could think of to having this type of thing?

syntax, so, But now that we're writing full on applications,

That is stripped out by the JavaScript parser, like, metadata now that you're, Yeah. Yeah. Listen. They're maybe about a month or so ago.

they are already optimized for There's no JSX, Microsoft, the folks that work on TypeScript before it is actually sent to the JavaScript engine.

So it's not like your your VA will know that it is a number or something like that because To t c 39, which is how a lot of features get. Like, why don't we instead of having to write TypeScript and compile to JavaScript, there's a proposal to add types directly to JavaScript.

Head on over to syntax.fm

for a full archive of all of our shows,

shout out to everyone who put this proposal together. Beautiful. Alright. Thanks for tuning it. Catch you on Wednesday. Peace. Peace.

a lot more there. It's a little bit It's a little bit, deep, but we thought we would try to distill it down to us us regular people. Hopefully, you did a good job with that. Yeah. Yeah. I think so. It. Either way, keep a lookout on some of these links that we posted. Follow this. If you wanna keep track of where this proposal is, you can go to GitHub and subscribe to it. Check it out. Read the blog post. Either way,

I am here for our types in JavaScript.

Awesome.

I I was here for it, when once I started diving in TypeScript, I'm especially here for it now, And I very much hope this thing moves along. So,

So I think that's that's all the differences I got here. You can read through the spec. There's a lot more know. All those PHP devs always So in