Types in JS?

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 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, just the sort of four one one on this type of thing. My name is Scott Talinski. I'm a developer from Denver, Colorado. And with me today, And as always, is the West boss. Hey. Excited to be here. Excited to talk about this possible addition to JavaScript.

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

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

Sentry at Sentry dot I o is the perfect place to see your errors and exceptions and, 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.

That's sentry.i0.

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,

that developers trust. They do Pretty much anything you can imagine. Load balancers, Kubernetes, cloud GPUs, dedicated GPUs. They do video streaming. They have an entire video streaming 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 solutions out there. So if you're building 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 in free credit. Go to Linode, l I n o d e, .comforward/ syntax to get that $100.

Thank you, Linode, for sponsoring.

Alright. So, the other day, this is, I don't know, a couple now that you're, Yeah. Yeah. Listen. They're maybe about a month or so ago.

Microsoft, the folks that work on TypeScript came out with a new proposal, Which is a proposal to bring optional and erasable 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.

So in most programming languages, not maybe not most, but many programming languages are what you call typed languages, meaning that when you declare a function and that takes in an argument, it. You declare the type of the thing that would be passed in. So, I'm gonna say I'm gonna make a function that says hello 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, 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 string. Right? And that's the very basics of what what types CSR obviously is a lot more complicated than that, and JavaScript doesn't have that. JavaScript's the Wild West. They call it loosely typed. Sorry. Yeah. JavaScript is typed, Just 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.

But there's no way to say, okay, when somebody runs this function or when you merge, these are the possible options, 3 strings and a number.

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 whole bunch of reasons. It makes development much easier. It catches bugs ahead of time.

The autocomplete is amazing. All that good stuff. And now there's a proposal for instead of having to write TypeScript and compile to JavaScript, there's a proposal to add types directly to JavaScript.

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.

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.

But, basically, yeah, types are are existing to improve your life as a developer. And the fact that, You know, JavaScript, has never had a strong type interface.

It's been 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, so that's probably why nobody was dying for types in JavaScript in the days of jQuery.

But now that we're writing full on applications, the the benefits really start to appear.

TypeScript really ends up saving you a ton of time. And, therefore, Me, personally, I went from being the type of person that felt like 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. 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.

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

This is this is one of those things that I felt like it feels like, we've been saying for quite a while that this is going to be a thing.

And sure enough, after our predictions for 2022, 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 It would it would come so soon. It would come so soon. I mean, it's still stage 0, meaning, it it hasn't really been picked up or anything like that. Prayer right now. Yeah. Yeah.

Yeah. I I I'll I'll I'll also say I am also on board for this. I think it's, really exciting that they could possibly add it.

I do see that there are a couple concerns 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, be added to the language. So we'll we'll keep you updated here on syntax.

Keep it dialed into Syntax. FM because we will keep you updated on any changes to this,

spec. Yeah. I think we should talk about it if it hits stage 1, stage 2, stage as it moves along because this this will be a big transformative shift in JavaScript.

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

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

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.

So if you're out there on the sidelines at this point with TypeScript, you can see that the idea of having types in JavaScript has now reached a point where 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,

types as comments, which, 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, 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, in this is that The type information that could possibly be added to JavaScript is, a, entirely opt in. Meaning that regular JavaScript without any types will work a 100%.

But these types that you then can add Are seen by the JavaScript engine as 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 and then like a browser or a bunch of ESLint tooling or a prettier tooling or Any of the tooling could be able to read that data and parse it. Like, I'm assuming, like, the TypeScript compiler would be able to read that data as well And then parse it and then use that information as as you have there. So what they mean by as comments is that That is stripped out by the JavaScript parser, meaning the browser, 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 they are already optimized for 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,

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 ergonomics as much as I like the TypeScript syntax, so, Glad to see that they're not going that direction. Yeah. Let let's and let's go into that. So JSDoc

is the ability To write plain old JavaScript, but still type your JavaScript in comments. So there is a special way. Yeah. Yeah. Like, you can write s forward slash star star, 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 what arguments are. So if you're hovering over top of an argument, it will you be you could say, like, this is a listing of 3 different postage types, like, personal letter or, flat. Right? And 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 Up above your functions and things like that. And it is really handy. Like, I have a bunch of projects that are just straight JavaScript, And I find myself 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, of authoring your code without having to convert the entire application over. So 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 Now that I understand TypeScript and how it all works, I much rather write it all right in line as I'm typing the code. It. Literally typing it. Yeah. It's actually

I wonder if that's something that's changed in my 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 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 comments, 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

know. All those PHP devs always their line height is, like, 50 times one line. I always see people posting, like, especially all the Laravel devs seem to have, like, really high, 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.

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 and let in cons and backticks and, curly brackets, and we had rest and spread and, destructuring.

And we had all this new syntax that was added to JavaScript, and that stress a lot of people out because they said, 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 Angle bracket and arrows, and these people are using these fancy fonts that are making them arrows.

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, There's just like that's a whole bunch more stuff to learn, especially if you're just like looking at some code 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 You're just like, okay, there's 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 right away. Just learn regular JavaScript because 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

felt just so much better Moving in that direction, but I do believe that if your application is not complex, TypeScript is really not saving you that much.

So, like, it it's the type of thing that where 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? 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.

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

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

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.

Well, TypeScript is you know? I mean, it's an in a language owned by a company, Microsoft.

But 2, 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 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 Build step or Yeah. You know, 18 different, GitHub actions to control your release process and things like that. So Having things in the platform, especially like this, ends up becoming just a huge productivity boost. Yeah. I think types

as first class citizens in node It's probably top 3 things for me. And this is that there's no build step or thing in between.

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, like, we had it with ECMAScript modules, and we everybody was using Common JS or Require JS or There's all kinds of different, module loaders back in the day, 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 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 There was a really good blog post about how Stripe they converted their entire code base over from Flow to TypeScript in a weekend, 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, 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 the day before, which is kind of interesting. So like, I think that TypeScript is a clear winner. And The only argument against TypeScript that I hear is just people that 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

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

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

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 be able to, correctly check those on on what would be still build time, I guess, or would you just have, like, a validation step? Either way, 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.

I think some of that that

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 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 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 Those things are still stripped out, which is why that makes more sense that it says types as comments, right? Your comments 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.

This is

Yeah. Yeah.

Yeah. Yeah. It's, they should call it like Ignored types or type sprinkles or something. Type sprinkles.

Like, where your head's at? Yeah.

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 that controls or they meet, and they may have proposals about adding things to JavaScript.

And the idea here is, like, why are you coming and proposing a full type system that is already done To t c 39, which is how a lot of features get. Like, why don't we spin off a committee 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.

There's too many opinions. There's too many, All kinds of like you like job. Yes. Six took, 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 let's wrap it up with the last thing, which is like, what's the difference between TypeScript and This types in JavaScript, doesn't look like much.

They call generics type arguments, which is also something verbiage that we use in TypeScript world as well. So I'm not sure if that's a difference.

There are no enums because enums are a weird thing in TypeScript. They're like the only part of TypeScript that actually gets compiled into JavaScript code. Everything else is, Like like we said, stripped out. Right? So because this proposal only covers, like, metadata and not real data, there are no enums.

There's no JSX, which makes sense. Yeah. JSX is not.

There probably will be some, again, some proposal to add JSX like something to the language at some point,

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.

Yeah.

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 we need the ability to quickly template like JSX in the browser, and that's how we get standards. That's how we have 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.

Awesome.

So I think that's that's all the differences I got here. You can read through the spec. There's a lot more

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.

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,

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

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.