GitHub Open Source Friday, 15 Aug 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Understand Typescript Errors with a VS Code Extension - Open Source Friday

Description

TypeScript errors can be difficult to understand. Luckily, Matt Pocock developed a Typescript Error Translator that you can install in your editor as a VS Code Extension. Learn more about how it works and how you can contribute to the project by watching this video!

0:00 - Introductions
4:11 - Demo
13:46 - GitHub.dev vs. Codespaces
14:39 - How the VS Code Extension is built
17:41 - How to contribute
19:12 - How do you get started with Typescript
25:12 - Fun Chit Chat

Join @blackgirlbytes live for Open Source Fridays at https://www.meetup.com/github/.

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

Hey everyone um you're watching open source friday from github. um My name is rizzelle scarlett or black girl bites and I'm joined by kadasha who's. My co-host today and also matt um I'll. Let them go ahead and introduce themselves if you're, ready, uh kadesha want to go ahead and introduce yourself yeah.

B

Sure, hey everybody, my name is kadesha or it's that lady dev and I am new to github. A new developer advocate here so so happy to be here.

C

Awesome and I'm matt pocock. uh I am mattpocket uk on twitter on twitch on youtube, et cetera, and uh I'm also extremely excited to be here. I am I'm a guest right, I'm an intruder into github sacred space. So thank you for inviting me.

A

No thank you for for being here and I'm so excited to see that, like already 22 people are viewing. um I would I'd love to hear where y'all are calling in from just because I know people from all over the world are should would be watching and I'm just curious um cool. Thank you for joining us matt. When I saw um that you were like this typescript wizard on twitter and that you had created a typescript translator. I was like this is so cool. I have to have on that on because it's it's super useful.

A

Like I use type yeah yeah, um why don't you um tell us a little bit about the typescript translator and then we can go into a demo.

C

Sure sounds good. um Well, my background is personally like I've been uh fiddling around with typescript for about three years now I worked at a company called stately until a couple of weeks ago and um fact, until last friday, actually and what I did was um at stately.

C

I worked on a library called xstate, which is an open source library where you, basically it was a very, very complicated, typescript library and we did a uh did a lot of sort of hardcore typescript stuff, and that put me in a position where I sort of seemed to be doing a lot of advanced sort of crazy wizardry, with typescript or learning from a lot of people who were doing that, and I started posting tips on twitter and um I'm now like the typescript wizard, I guess, or the rodney mullin of typescript from where's boss or blah blah blah, and so it's it's been a crazy crazy few months and um I've now finished it stately.

C

In order to be a typescripted full-time, I guess either sure was. I don't know what the metaphor is, um but uh yeah I'm now releasing a typescript course. So you can have a look at totaltypescript.com, which is uh it's going to be extremely cool, and I've got my first typescript workshop that I'm teaching next friday. So if you want to kind of come along and join the type of journey, I can see a few people in in chat that I recognize from from my discord from twitter, so hello, folks and the ts era.

C

Translator came out because or kim came along because I'm really frustrated with typescript.

C

Like you know, you know when you have like a brother or sister, that you love a lot and you're really really close to them, and you know you spend maybe a bit too much time with them and you think, okay, uh yeah, that thing that you do that's really starting to annoy me now and I like typescript, is an incredible tool and but the thing that it doesn't do well, it doesn't do error messages very well, it's kind of famous for it like um so rizzo. Your background is like you've used typescript a bit right.

A

Yes, yeah and I agree when the first time I saw like this, is it any type or inferring there's any type? I was like what are you talking about, but yeah? I used it a little bit.

C

Yeah! Sorry with that kadesh.

B

No, I primarily used javascript. I've never had a reason to use typescript, so I've never used it honestly, but I have seen the um grueling error messages, um though they're not as bad as javascript, but still um pretty pretty uninformative yeah. Some.

C

Of them are extremely hairy, um so yeah, the that's kind of where I, the transcriptary, translating kind of came from is I wanted a way to improve these error messages and uh I've did a bit of vs code extension dev before so. I thought. Okay, that's probably probably an idea here, so we could jump into the demo. Typescript couldn't just be really really tough, sometimes, and um let's imagine that you have um I'll keep things relatively simple for now. This is a typescript file, I'm just inside a project here.

C

This is kind of like where I do all my sort of playground stuff. So we just got a sort of pretty basic typescript config got a package.json, and we got this little file here and it's just saying hello world at the minute and kind of for the fundamental stuff like I might cover a little bit of beginner typescripty stuff in this stream. If that's all right, if people are kind of into that, um there's like um so this. The idea here is that you think of typescript and you think of type annotations right.

C

You think, okay, I need to like annotate everything and tell typescript exactly what all my stuff is here like we're getting this light. Let me turn this into a. Let actually we're getting this hello thing here and it's if I hover over it, it's telling me that it's a string which is kind of useful. If I change this to a number here, then it's going to tell me it's a number, pretty nice and as soon as I like add a type annotation here, that's wrong.

C

For instance, it's going to, let me know, type number is not assignable to type string now, if you're, not using the typescript error translator, in fact, let me just disable it for a second, of course, a reload is required. How dare you even suggest that I can change my settings without a massive reload um then here what you would get is just this little thing below type number is not assignable to type string, but what the ts error translator does is it offers you a translation?

C

It says I was expecting a type matching a, but instead you passed b interesting, so that just puts it in a friendlier phrasing and there's a few things to note here. I, like typescript, has like thousands of error messages. Thousands and thousands of them um we've covered, like I don't know, maybe 50 of the most common, because the most common ones are the ones you're going to see most often right, and we decided to do uh things a little bit differently here. So here it phrases it in the first person.

C

So it says I was expecting a type matching a, but instead you pass b that frames it so that typescript is kind of like a person that you're interacting with I often think of typescript, as kind of like a teacher. You know, they're kind of like a teacher they've got the red pen and they're going to mark you wrong when you do bad stuff, you know. So this is like a mark against you.

C

You know what I mean you shouldn't be able to do this, because we're saying this slot is a string but you're passing it this like, and so what you get here. Is you get? You still get the original stuff here, but you just get this little translation there and we'll look at the full translation in a minute, so pretty cool right.

A

Very I love. I love that you made sure it was first perfect as well, because I I often don't know what exactly it's referring to. I'm like what type is not assignable.

C

Exactly yeah, who knows what this means? There's one error that you get really really often when you're working, especially when you're working in um card where's where's it gone here.

C

Okay, upstream there, it is, um there's an error that you get enormously often when you're working in typescript, especially if you just change over a file from javascript to typescript, which is, if I say, const myfunc, equals. Let's say, we've got a subtract and we've got a and b here and we return a minus b.

C

So this is all perfectly valid. Javascript javascript isn't like a teacher. It's not going to tell us when we're going wrong. It's just going to uh fail us when we put this into production. Probably you know, but this here I mean there's nothing wrong with this whatsoever in javascript, but in typescript typescript's a little bit harsher. If I turn this into a ts file, I'm getting some red lines, the teacher isn't happy.

C

Why isn't the teacher happy well, there's like there's no type there right so, but the error message you get is so cruel and wanton and mean it's like parameter a implicitly hasn't any type.

B

C

What does this mean, whereas if you get, if you get the translation uh kadesha, does this make more sense than the one below.

B

A lot more sense, uh it's like I can. I can deduce what it means, but I'm just like just tell me what you're saying exactly.

C

So I don't know what type a is supposed to be so I've defaulted it to any your tears config file says I should throw an arrow here. Okay, so if you see the full translation, then of course it's thrown up in the wrong window over we go um so I'll. Stick it up here, um then you actually get a more detailed explanation here. So what we get is. This is one of my most commonly delivered other errors.

C

You've likely declared a function, for instance, blah blah blah blah blah, which is, I don't know what type a is supposed to be. So I've defaulted to any. So you get this sort of extra stuff in here too, which is really nice, and what this means, then, is what we should be doing, is adding number and number here. So it just gives you the chance to be um a bit cleaner and like understand your code, a lot more and get more out of it. So that's that's the whole idea of the extension. Really.

C

We cover a lot of different errors and we just show them kind of alongside the errors that you usually.

B

A

B

A

Didn't notice, you had a front end for it as well, like it looks like you have the the vs code extension, but what you did the page you just went to you can like copy and paste snippets of code in there exactly.

C

Yeah you, the kind of idea of it is that you can share it with people. So if you're going- oh, my god, I don't know what this error is supposed to do. Then, for instance, I can just sort of share it with twitch chat. I can just say you know, let's have a look at this error together and I have no idea why it's working so I'll, just post it in once. I've accepted the chat rules and it's just uh it's just there.

C

A

Nice, oh my gosh, I'm impressed.

C

And then like it gets crazier. You know like these are relatively simple time bearers, but if you start doing something nuts like imagine, if we have like a like, let's say we have a cons to get users function which, like returns, promise.resolve. Imagine that we have like uh id uh is one and name is rizzell and sorry. Okay, can we bother to type out your name, but um that's fine, but imagine that we have like get users and we give this a type. So if we do this in a funny way, we'll say get.

C

Users is a function that returns a promise with, like, let's say we just have id string and uh name string here and now. If I try to assign this here, get users- oh our teacher's yelling at me, oh god, okay! This is a pretty big one.

C

This is a huge error like if you look at all of this, the issue with ts errors. Is they stack? So it's like a stack trace in javascript, but the issue is that it's upside down, so the most important stuff is actually at the bottom. What it's.

B

Telling us here.

C

Is that id name string and an array of those is missing the following properties from type id name, string, id and name? That's because I declared this incorrectly. What I should have this actually returns an array of users, but I've got it so it only returns a promise that contains a single user.

C

So the way I would fix this is to go like this and it's done. But if I really like can't work that out, then I can go and see the full translation and oh, for god's sake, it's gone over to the other window.

C

Here he comes yeah, so here it is, and this one I decided to show it actually in reverse order. So you get the bottom error first and you get in fact it's missing a translation here missing the following properties from type and this one. It's saying: okay, this is not assignable to type this, which gives you a better hint um and then this is not a sample to type get users. So you get the stack trace sort of in the proper order.

A

Wow I okay, I also didn't know I just learned that they're being shown in an upside down order. I always just read those errors and I'm just like okay. What is it telling me? Okay, I think I understand that one.

C

You gotta scroll to the bottom. It's such a stupid system, um but yeah that's that's kind of what it does.

B

Tell us how you really feel mad.

C

It's such a uh yeah, it's it's a sub-optim, let's say, um but no it's it's. I mean that that's kind of exactly how you print it like you've. Just.

A

Oh no you're frozen again.

C

That was crazy because I actually heard you say: oh no he's frozen again, I'm like no. I haven't I'm probably fine, kids, oh it's, um but that but that's the idea. You should always walk your errors down to the bottom, so you can actually see what's going on.

A

I love it. Okay, I have a question: it's like irrelevant to the actual translation, but more to how you made it. So I've made a vs code extension before, but I I um the only way I was able to show messages was in like a little window at the bottom or a little um post. How did you get it within the.

C

Yeah within the thing: well, let's, let's dive in some code, shall we let's go, have a look at it? uh Why don't we use uh so it's on github, matt pocock, yes, error, translator! Why don't we use github's fabulous kind of like um what do you call this we're like when I press right full stop here, code.

B

Space github.dev yeah.

C

Github.Dev code, spaces.

A

That's not code spaces, there's a no, no yeah code spaces. It hasn't been released yet to every single person and it's way cooler than this. It's like this, but on steroids, dev, containers and stuff like I've been using it and it's it's cool.

C

That's extremely cool yeah. This is this. I mean I love, I love even this, which is just the ability to be able to open up a vs code editor and just like, be able to ping pr's around. It's just.

B

Amazing, it's nice.

C

I've got um so the way this is structured. um I don't know how can you guys see this okay, the size looking.

B

Looks good to me, what about you kadesha? It's a little tiny, but you know I need to go for the eye doctor.

C

All right, so we got our basically, this is like a mono repo and we've got our apps. You've got two apps in here, which is one for the vs code extension and then one for the web and the vs code. Extension is the one you want to look at.

C

We've got a source file in here which of course, is written in typescript, and we've got our extension in here and so kind of what you were asking about was how do you like, like for those who've, never seen a vs code extension before this will look pretty scary, but the main thing that's going on is that we've got two functions: we've got a function called activate wow. That's that's such a british reference, like you, you guys probably wouldn't get that that's like a robot wars.

C

Reference shout out to any robot fans in the chat, um so there is activate and deactivate, and what this does is it's called whenever the um whenever the vs code extension starts and this one is called when it stops. So it's a pretty simple setup really. What I do, then, is I say: whenever okay, it's pretty hard to read, bye, bye, bye, you can provide a vs code, hover provider, which is when you hover over different bits of the code. It will, um it will work.

C

Basically, it will give you some stuff and what are we even doing here? Items in uri store, blah, blah, blah blah blah and oh yeah, and then the way this works, then is we have this on. Did change diagnostics, so, when typescript gives you information about your code, when your teacher marks your code for you, it gives you like this array of messages about your code and what we do is we take those diagnostics we humanize them, and then we store them in a store.

C

So when the user hovers over the correct bit of code, they see the typescript translator.

A

Wow, thank you and this made me realize I didn't um dig further enough into the vs codes api you're, a wonderful teacher. I learned a lot like in just these. I think it's only been about like 10 15.

B

C

I was, I was a singing teacher and like a voice coach for a long time before I was a um so I've been a teacher for a lot longer than I've been at dev.

A

Wow, okay and not to be creepy. I did look up your youtube because I was like. Oh, let me see what subscript stuff he had. um You were doing like boston, accents.

C

Yeah man so I've. This is really weird because, like I've got this old youtube channel, which is myself and then I've got um uh and then I've got a new youtube channel, which is like typescript and stuff, and so I'm having to compete on seo against myself. You know what I mean so when people search matt poco, I don't want to see the accent stuff anymore. I want to see my new stuff come on, so I'm having to work against the algorithm here.

A

Awesome loved it um I'm happy to so so. um If people just joined in I see, b, dougie in here, hey um matt, just did a really awesome demo of how the typescript translator works and then just using um it as well. If anyone has any questions um feel free to put them in the chat I'll, look through them really quickly, um but one question for you on matt: how can people contribute to the typescript translator.

C

Great question: I wanted to make this as easy as possible um when you hover over one of these errors. um Usually the feeling is like okay, yeah, I'm getting my error. This is this is great, I'm getting my translation awesome, but for this one this one actually doesn't have a translation in the system. So there's actually a button here where you can just press it and contribute a translation.

C

So what this does is yeah. It went to the right page. Is it says? How do I contribute, and so it just takes you to the contributing document. So this was wasn't written by me actually was written by uh what's his name, jesse naldib um who's, a lovely contributor to this repo.

A

B

So somebody in the chat asked or said um I wish I could contribute more to open source. So if you really want to contribute to open source, a great place to start is looking up good first issues. Typically, that's tagged on github, in open source project and also open source is a great place to take a look at as well. If you want to get started, it started in open source projects.

A

Perfect, I love that you shouted that out because after you said that I was like oh, we could shout out one project right now and open source. It's a it's, the one that I did my first contribution to um and it's a really good project with a good supportive community.

B

Yeah absolutely, and somebody else asked um I guess how to get started with typescript or learn more about typescript um udemy.

B

Maybe when matt comes back, we can ask him. um What's the name of his course, so you can take a look at that.

A

Yeah, I think yeah I would say I would say you to me also. What has strangely been helping me with learning new languages has been github co-pilot. If people have access to that, that would be cool too. I didn't know python and I had to write something in it very quickly um and I used to go pilot and it was like. Oh that's,.

B

B

I've been trying to get co-pilot to solve elite code hard this week and it's just been giving me wrong answers.

A

Do you suggest this to like how we can show all suggestions? Oh.

B

I should look, I should read the docs um yeah don't be like me,.

A

I just realized that when I talked to a product manager, he was like oh hi, matt, sorry about that. Welcome back.

C

I think I should be sorry shouldn't, I I mean, or my broadband provider should be sorry. How far did we get because.

B

C

Kept on talking, you know I just wanted to stream with consciousness. I realized my thing. Wasn't loading.

B

um You were telling us how people can contribute to your project.

C

Got you that's right, uh but um I wha what conversations do you want to ask me? Because uh let me just quickly set up my stuff again.

A

Oh people were asking: how can people get started with learning typescript.

C

Oh great question, so all right, let me let me show some stuff then so sorry, let me move your faces away. um So let me share my screen. I'll show you some stuff. uh Basically, the typescript docs are like extremely good. um I think people tend to like have a love-hate relationship with basically any doc site that they come up with, but the typescript handbook is like extremely good, so it teaches you the basics.

C

It even gives you kind of like onboarding, from different, um like if you're coming from oob or functional programming or you're like a brand new programmer, then you it gives you a history of javascript and gives you like all of this stuff to like onboard you, which is amazing. um So the handbook, I think, is the best place for it like if you're a brand new person learning typescript.

C

If you there's also some resources um like learning typescript from address goldberg, which is a really cool book. That kind of just came out- and this is I I got the chance to read this actually like before it came out and it's real real good guys like it's, it's pretty nice, and so, if you want something that you can read through in a more kind of linear way and give you a sense of like what typescript is supposed to do, then this is pretty great um other than that.

C

uh When my course comes out, then you can use that which is total typescript.com, um but uh I'm sort of focusing more on the more advanced use cases of typescript first, so, oh, and also I did a stream with uh with kelvin. I can't remember his last name, sorry, um which is real real good too. So if anyone in chat wants to wants to link that I did like an hour long stream with him, I think on monday, um so that was really really nice for beginners.

A

Love it. I also like that um nod to the the book that josh wrote, because I remember him talking about I'm working on it, so I was really excited about that. I have one interesting question here: um curry kappa says any plans to add localization and translate errors to other languages other than english for people like me who struggle a bit with english. That's.

B

A good one, that's a great question totally.

C

Yeah there's like an open issue for it and I think someone has made a pr for it. um It's totally possible, um it's just like an enormous amount of work. You know because there's 19 000 errors to translate in english like and then we've got to go to a thing. You think thing and it's something that I can't contribute to, because you know being a typical kind of xenophobic englishman. I only like know my own language, which is, uh I know which is lame.

C

um My wife speaks like fluent german and I just like stumbling along in english. So yeah. Definitely it's definitely on my to-do list and there's also another one of the contributors called um called eddie he's like a collaborator on the project, and so he's been kind of thinking about that and working on a way to do it too.

B

Awesome, that's awesome. I'm happy that it's on your to-do list. uh Razell. Do you think that's something that co-pilot could possibly help with in the future.

A

Maybe I don't know.

A

That is like. Maybe that is something that we should like that github should do. You know like also translating it into other.

B

Right that'd be pretty cool if we could click a button, and it's just like whatever language you want. Yeah.

A

That's a great idea, someone said well, you can translate in scottish with audio accent.

C

Yeah, that would be fun doing audio snippets of each of the uh typescript types and different accents that'll be extremely cool, get siri to do it.

A

And I also think that I mean, as you as you and eddie, um build out how you're going to do that translation. I think that's like a good opportunity for kari, kappa and anybody else who who speaks um other languages than english to to go ahead and contribute to your project. Absolutely definitely.

C

I think one thing I really like is: um is it's it's so hard to like to answer the question that I wasn't asked about: co-pilot contributing it's like. So much of the project is about the human touch you know and actually explaining things in a way and and it's about teaching you know and it's like and I I I would be sort of like worried about the quality, because I wouldn't be able to oversee it in other languages.

C

But if I can find someone who really gets the project and like um knows what we're trying to aim for and is able to oversee that then sounds perfect.

A

Awesome yeah. I agree. I agree all right. I guess we're done with the technical portion of this um and we can transition to the the non-technical questions. I always ask um and if you want to do those kadasha, you can't.

B

Yeah sure so max tell us what is your favorite food.

C

Oh, I didn't think about this at all. I didn't think that's a tool um all right uh so I'll just say something that I've been making recently that I really like, um which is this. It's like a lentil dumpling stew, basically and.

B

C

Make and it's like just carrots and celery and like lentils and good stuff and like um these dumplings and things and like you, just cook it in there and it's just like that, and it's so good and caramelized onions on the top as well. It's like it's real nice. My wife is vegetarian. So, like uh we a lot of sort of veggie food, uh so I tend to cook a lot of veggie food too. So that's that's the thing I'm kind of into making about.

B

Me delicious, I was just going to say as two vegetarians: that's delicious.

C

Yeah, let me send you the recipe actually, because my my wife used to work for a um tesco magazine or like a big food magazine in the uk, and so her friend is like a huge. um It's like a recipe editor there and she's like huge into that. So there's there's the recipe for it right. There.

A

Thank you, oh wait. I think I think twitch puts it as um any links it. It blurs them out. So we'll just be.

A

Thank you and one person asks do we know the most errors that get logged by the typescript error, translation, translator,.

C

So no we don't it doesn't do any like uh analytics or any um any tracking whatsoever. um It. I'm really curious to know if typescript does have that sort of telemetry to know whether it does like track the errors that you could have, because I think that would be really cool, because that would give you a sense of what errors you should focus on first and what what the biggest differences you can make.

A

That would be that would be dope to have that. That.

B

Cool cool, oh and our last nonsense. Technical question, for you is: what is your favorite beyonce song, so.

C

I don't listen to a lot of beyonce like I know it's there and I know it's like I it's it's like in the culture. You know what I mean but, like I don't know, I'm just like so beyond beyonce. You know what I mean like beyonce is so like come on man. I.

A

Think that's just religion.

C

So I'm just going to cut my hands down myself, so there are two albums that I really like by this artist called no name. No name is so good.

A

From chicago yeah and.

B

It was so good man and, like that's.

C

That's yeah like it's, it's just the um just the sort of jazzy feeling with like her weird voice. On top of it and like the word she's saying, and it just sounds great.

A

Nice I, like no name too b dougie, said um hold up his favorite song and I think yeah. That is a good one. I think the guest from last week said the same song. So yeah and someone said start matt on hamilton. I thought would are you? Are you obsessed or something.

C

I can do every word of hamilton every single one.

B

C

Do every word like easily I've tested myself.

B

A

Yeah I'd like to launch.

C

That's exciting.

A

Yeah that's good and have a small sample size of typescript errors to extrapolate on. That's an interesting idea: yep yeah nice!

A

Well, um this is a shorter stream today, which I actually like I like when they're like in little bite-sized bits. um So thanks everyone for joining in I'm really um happy that so many people wanted to learn about typescript.

A

The chat was so lively. Do any of you have any like last question, I mean last comments or things you want to promote.

C

I think I'm good other than you can sign up to my um uh you know my time. Scripts workshop. That's next friday! uh No I'm good! I said I'm good and then I proceeded to just promote myself.

B

No promote it, yes, I just remember: do it man.

C

I can feel the weekend coming. You know it's like 5 30 p.m. Here it's like I've got two minutes left, probably before I just like crack open a beer downstairs like oh man,.

A

All right, let me let you get to your to your weekend, but yes, y'all, sign up for matt's um workshop, see you next friday.