Let's Learn TypeScript! (with Orta Therox) — Learn With Jason

hello everyone and welcome to learn with jason the first show of 2021 welcome back i hope you had a great holiday season today on the show we're bringing orta the rocks to the show or to thank you so much for joining us today thanks it's totally a pleasure to be here first of 2021 yeah so we uh we've we've known each other for a while we've we've kind of run in the same circles but we we haven't had a lot of opportunity to really collaborate so i'm super excited today to uh to dig in and learn with you so for those of us who are not familiar with your work do you want to give us a bit of a background on on who you are what you're up to yeah sure um i am a very old hat uh open source person um i've been doing this for about 10 years almost daily uh i used to be involved in sort of the version of npm for ios projects cocoapods um oh wow started doing react native uh and so started learning the underlying tools of how javascript works um and then from that sort of realized that hey this javascript space is very interesting uh i i felt like it's a bit like the primordial soup of interesting programming concepts and after spending just a few years i realized you know i wanted to spend a bit more time digging into even harder javascript projects and that sort of led me to working on like the typescript project itself like the compiler or trying to um you know trying to rethink documentation and how people learn typescript you could see that this this thing was growing massively and was like set to explode which i think it basically has at this point um but at the time the team was struggling with documentation issues trying to help people sort of see a migration path into typescript um and to some extent also out like you know the amount level of typescript you need it kind of depends on your project so sometimes being able to say like okay maybe this project doesn't need the tooling of typescript but i would still like some of the tightness of it all these things are like what really make me sort of feel good about like the programming environments i work in so i i do a lot uh is maybe one answer there um but some of the other stuff that your sort of audience may know me from is i designed the websites for jest for prettier for react native um and did all the you know the design and implementation of the typescript website for example too nice yeah that's i actually didn't know that you had done all that stuff that's very cool um so yeah i uh i am really excited to dig into typescript i have done an episode on typescript before uh with ben elegbadu but yes we that was kind of a um it wasn't like an introduction to typescript it was it was sort of let's dive in and and just kind of mess with it a little bit uh so i'm really excited to kind of go further here and and get people introduced to the idea of typescript and kind of what it's what it's capable of right because i feel like what ben managed to do was uh he he wet my appetite he like showed me how much easier my life could be if i were to go all in on typescript yeah but i will say i have yet to convert anything so i'm wondering if you can be the one to push me over the edge here yeah exactly well here i am saying it only takes one line of code to convert a file to be type scriptified um and like that's that's generally my my take on it right like typescript is this amazing tool but it actually was built for sort of two angles okay um it was originally built to sort of provide a rich type version of javascript but then it turned out that you know inside microsoft they just like there was just a lot of javascript not just new code being created and so typescript after about a year or two started morphing into sort of two underlying let's call it like compiler passes on the inside it's a simplification but so is everything um one that runs javascript and then one that runs typescript so that you could run the typescript compiler over existing javascript code and get auto completion right like any time you've used something like visual studio and you press a dot and you see something today that's typescript yeah yeah and so regardless of how much like uh you know however how much you have used typescript it's almost guaranteed that you are using typescript it's just that you're not using it you know stricter modes you you might not be writing drop like typescript but you are using typescript yeah yeah exactly yeah that's i mean and it's it's really interesting because like so one of the big complaints that you'll hear when you when you talk about something like typescript right is that you're you're adding complexity but you can still do something like shoot yourself in the foot by declaring everything isn't any type sure and so and the other thing that you hear too is like you you see these things kind of come in and out of fashion you you've got like flow typing and before that there was stuff like coffeescript and and people and i know people still use both of those things so that's not to say that they're like dead and gone however what i will say is that we're not seeing them in mainstream usage the way that they were in their heyday so how like when you're talking about typescript obviously typescript is is gaining momentum in a way that to me feels unique i don't think i ever saw flow or coffeescript or other kind of compile the javascript languages um gaining the same traction that typescript has gained how what like what would you say to somebody whose main fear is that that that eventually typescript will go the way of coffee will go away yeah um so the simplest argument i have for that uh is that typescript's job is to get rid of itself so if you decided to you know move from typescript to javascript you would run typescript on your codebase and the emitted javascript would actually be the javascript equivalent of your typescript so you can actually so like typescript's very trivially ported away from because um and you just end up then with you know a less strict code base but i think the underlying tension really is like the the divergence of javascript and typescript right like javascript back back when all of these languages were first created like coffeescript flow uh typescript like they were created in a time period where like javascript wasn't evolving and in order to get some of the features that people wanted from javascript you really had to like enhance the runtime so that is like adding classes like classes didn't exist um adding things like enoms like uh shortcuts for public successors and stuff like that all of this stuff is in javascript today um and so there's this sort of initial tension of typescript trying to like create a language on top of javascript which you know some of those features do still exist in typescript but they're you know typescript pitches itself today as javascript with types and the idea here is like if javascript evolves typescript evolves in the exact same direction and never tries to diverge okay so i think that's what's going to give typescript a longer staying power than something like um then like uh coffeescript for example because javascript was a full language in order to truly understand coffeescript you really had to understand coffeescript and then the underlying javascript that will come from it whereas you know if you're typescript you know then you just know javascript and then types lives on top of that like don't get me wrong typescript can give you compiler errors that wouldn't exist at runtime in your javascript but um that you have this sort of alignment that says typescript team doesn't want to make decisions about javascript wants to make decisions about um you know the whether a thing is going to be a string at runtime or uh you know an object type or something like that yeah so nate dunn actually just asked a really good question what what happens if javascript natively adds types is that is that in like would that be things working as intended i guess or is that like a big problem for typescript no i think there's there's always like ruby's a really good example ruby free just came out last week um and ruby3 adds uh the same sort of typing system that typescript adds to javascript um i think realistically the creators of javascript the language do not want a full typing system in there full static typing system in there right like static is key um the the closest that uh the the discussions have got nowadays is that maybe we can find a syntax black hole where type can information can live in real javascript syntax so think of it as like you know we have comments comments uh black holes where you can write whatever you want and you can put any sort of syntax in it right pastors know exactly to ignore that and what if there is like a known place where you can do the same thing but for types and maybe that could be if you put a colon after an identifier until it equals that space is just dead space it's not i got you signaled in the same way but that allows not just typescript but other type systems to flourish in that same space um and like you know there's there's discussions about that in the sort of back rooms of tc39 like you know these sort of discussions usually ebb for a year or two before they start bubbling up into the public sense um but people are thinking about it like yeah a lot of tc39 uses typescript and you know there are typescript is tc39 members we we helped push the question mark dot operator to be in javascript properly um because so many people requested it into typescript eventually we the team felt that the best way to get into typescript would be through javascript and yeah yeah pushed it for a few years to get through that's that's actually really cool i didn't realize that that was a product of the the typescript team um and that's one of my favorite features of that has been recently introduced to javascript so that's uh that's that's i love i love seeing how the sausage is made i know some people don't like to see how the sausage gets made but that's like i feel like that's my my hobby is i i love it it's my warm fuzzy place is to see like the story behind why we do things the way that we do them um yeah but with that being said i feel like we could talk about this all day but uh what might actually be really fun is to to dive in and start writing some typescript so i'm going to switch us over into pairing mode oh my god i just thank you okay so here's here's what was supposed to happen we were supposed to bounce over to here right there we go oh no what's what's going on oh we got chaos absolute chaos okay so what i did over the break everybody is i rewrote there we go that's better um i rewrote the the learn with jason overlays so they are now a toast site which i'm pretty excited about um but did that just work yes you see that did you see that work how clear in the background was that the subscriber that well so that's a that's a sound effect so the um the sound effects work i've got custom overlays working now i also uh i also brought back the stampede with music so subscribers um you can do terrible things now um so anyways all that being said and and uh destruction aside uh today usually i would i would be showing you the learn with jason live page i broke that with the new version of learn with jason i just found out so instead we're gonna look at the actual just direct link to the live captions and i'm dropping it in chat because it is too long to say out loud but what this will do is we've got rachel today from white coat captioning live captioning the entire show you can see that happening on screen right now cool i love it it makes me so so happy um and that is in an effort to make the show accessible to everyone not just to people who can uh hear or who you know is or like if you're a non-native speaker and the way that i chatter at a million miles an hour is unintelligible to you this is potentially helpful i don't envy you rachel yeah thank you so much rachel for your help and what this also gives us is uh this this is made possible through our sponsors we've got netlify fauna hasura and auth0 all kicking in to make this show as uh as accessible as possible to as many people as we can um but yeah so in next week that will all actually be working on the learn with jason site that is currently uh it's busted i did something wrong i'll figure it out later make sure you go and follow orta on twitter um he has the enviable position of having his first name as his twitter handle so make sure you go get that follow in um and we are talking about typescript today so this is let's grab the typescript homepage site um i see where we're going are you gonna get right there you go rainbow beard way to go [Laughter] um yeah i know prince that you also have the first name twitter handle not all of us can be as cool as the two of you yeah i think i'm like i think i started twitter in like 12 years ago or something like year one i got i have alternatives here we go oh stampede it's back um so yeah this is just just a lot of joy in my life that that has has re-entered the stage um is that stampede gonna disappear it sure did okay all right i'm really excited about this like i i i just kind of shipped this and was like we're just gonna hope for the best here and see what it'll work out it'll work out live um but yeah so uh so oh man i'm so i'm so excited all right then now we have we we've we've gotten through all the the will indeed we will do it live okay i think we're ready to write some code like it's it's code time right like just yes okay cool pick a javascript project so our goal will be to get as much power from tooling as possible to a javascript project right so like um i don't think i explained i i briefly mentioned it earlier that you know typescript runs on javascript projects um but roughly how it works is that there is like a sliding scale of typescript support that you could get in any project for example i was doing some work on npm um and i was doing you know one of the original packages like the that reads the package.json i was working on that so that's javascript package written you know node's inception um and even that had working typescript support just out of the box i did not i added one line of code to make the entire thing be 100 code completion everywhere that's really cool yeah after i rebased it as well someone got rid of that even and it was like a hundred percent typed uh just without any effort at all and so ideally we could pick up it yeah i was just gonna say i think i have a package that we can work with here so this is um did i is that right just double checking that i didn't already do type i already did typescript on this one all right fine um okay so i'm trying to think of one that we can use here uh i think maybe get share image doesn't have does this one have types in it let's see i don't see any blue all my libraries i always i'm always like okay so apparently i do write typescript apparently you do yeah you know i've heard about this thing called typescript it's getting pretty big who knows i'd uh maybe this one does this one have this one that was blue wasn't it dang it killing me okay who's got who's got a library that we can that we can convert over here um because apparently i already did all the ones that i thought uh were not typescript everyone is asking for hunkify in chat this one has no yeah no okay so let's do it let's do this we've got honkify so i'm going to open this in vs code yeah let's get over to uh my own qsdk that's also probably an interesting one which one uh brad garoppolo mentioned that he's got a sdk which i think oh nice yeah so we are going to open this up um now i haven't used this in a minute so uh we're just gonna have to hope for the best here and see what happens we have no dependencies okay that's a good sign we've got a use honk hook okay off we go we got type of window so it's definitely uh web browsery it is definitely web browsery we might actually find that this will be impossible to type because it will be fully typed automatically out of the box will it really yeah it's like you know if you know if you wrote window.navigator in there then that will just that should just work right like that's that's part of part of the tension of this is just straight up like typescript configures so much of this contextually ah no it hasn't so we're in a pretty good spot here we might be able to add um the dom to this right so all of these so think about it as you know typescript has support for um all of all of the web uh dom browser apis built inside the uh inside the different browsers actually this is a project i maintain um and it's it's very confusing because you know something chrome might support might be not in safari something oh yeah might have been firefox and we have to like try and figure out every time whether it should be added in there or not um so i think i think the first thing here is actually an interesting challenge which is how to get um oh yeah isoven that's a pretty good idea we might not have node modules set up you might just need to do yarn install or you probably use npm uh it doesn't matter at this point either yeah either one will work so let's just do uh wait it had no dependencies right so there was no there's no npm install it created a lock file so would that i wonder if that made it maybe probably not though um okay so we just need to include it uh inside the at the top of this file um okay so the in typescript has existed for eight years in that in those eight years there has been many different module loaders right you know common js is one that people are very familiar with now uh and uh everybody is moving to import export correctly um typescript's original module loader uh is what we'll use to import the dom okay so do i know do a triple triple comment and we're gonna write some xml so open open the triangle um open triangle brackets and do i think it's reference um let me get the ducks up for this so what we're going to do is basically tell it you know the dom types need to be included in here and it will take the typescript dom types from vs code and put them in there so you don't need them locally this code has them embedded and we'll put them inside it um and so we do have an advantage here in that i'm using vs code and vs code is a microsoft product typescript is like a microsoft maintained open source library so we have the benefit of like there's some amount of working in concert between tools here uh because you're able to kind of build these things in and work internally to make sure that people are lined up right yeah exactly now that's not to say that i'm pretty sure a lot of the same things we're going to see here will also work in things like atom or sublime or whatever your your preferred uh thing is i just haven't used this part of the argument of typescript as well like typescript is typeset support in vs code and uh okay wait i'll i'll finish this up so yeah sorry this is the problem right there's so many rabbit holes okay so type the word reference and then put a space and then do types uh equals uh one line yep types equals uh dom so just quotes dom and then close it up and uh do that that is it self-posing or uh no it's it needs to self-close i think it's xml not uh like xml needs self-closing see how it's actually changed the the the the colors code just recognized it yeah as like something uh you've got a red underline there so i'm a little interested in what that means a little squiggly it could be cannot find type definition file for dom is it try uppercase or anything no i doubt it try dom.d.t.s maybe it's libsome i don't memorize all these things so i also just guess sometimes yes uh let's see cannot find definition is there a quick fix for this uh maybe no oh that's my spell checker get that out of here none of these are none of these look like i have reference oh i think it's lib not types reference lib equals equals dom there's three different ones now it's happy okay let's see if you get window dot now oh there you go you see on the side there you actually wait what you actually you got a ton more information uh when you typed it like that it's of the type window and of type global list but then suddenly it didn't give you anything useful in there oh look at this yeah we're in the wrong place look contextually sorry everyone i i see that line line number four yes if window is undefined so it's smart enough to know that in the context of that thought at there that window can't exist so it has to be undefined oh my goodness that is actually so okay so that is both very cool and very confusing because it's it's extremely cool that it's aware of like what context we're in and doesn't try to tell us that code exists it doesn't exist yes however like yeah however we're still not necessarily seeing it out here but but look at this now we've got the full everything that's the full dom api right there that is wild this is also really handy because like so if i'm trying to remember um like what something is you know i'm like oh i want it to be query oh yeah i want query selector all and so then yeah you know as i as i start looking through these um starts to fill up oh that's that's window that is dot and then i do like query and then i can see query selector all and you know on doing that i can see all of those and what then i hit one of these now i actually get oh this is super cool yeah and all we have to do again was add a single thing of that thing at the top that said the thing we're playing with in here is the dom like you know typescript can't sit there and just say every single javascript file will definitely interact with the dom so it can't make that assumption um and so what we've done is tell it at the top hey typescope we could reference the dom in this file uh so nikki is asking how often is this info updated um so the specifically the dom um see wait ah here we go you are on vs code uh oh i've got an extension it tells me which version of typescript vs code is running um but if you do know command shift p and then type typescript uh select typescript version at the bottom okay so you're using vs code's version of typescript 4.1.2 which is the latest production build okay um so typescript itself gets an update every three months so that's a rolling schedule so that always happens and the dom apis are usually updated every single version and that tends to just grow so so at worst you're three months out of date with your your dom apis with your dom apis yeah and given given that like if the dom doesn't mutate that fast you're probably in pretty good shape yeah the dump new things are added but most no one's not that no one's using new things but i tell you if you're using something that was added to the dom three months ago like to some extent typescript support is probably not going to be the biggest priority to you because there are ways of using bleeding edge features in typescript right right yeah it's always being updated as long as the specs are being updated and you know it's on it's it the specs are being updated and that's and now that's true across like everything so uh i7 is asking about like does that apply to node definitions it's just everything is kind of on this this rolling three month uh schedule no it's only the dom actually um you'll have heard of app types yes uh and definitely typed so definitely typed his is a completely separate yeah um yeah github.com definitely typed oh good beachballin my poor computer i'm like at the point where google chrome is too much for it and i'm i'm really sad about that definitely typed or i guess i could have gone to the dot org but this is true so definitely typed is used by 5.4 million projects that is cutting edge look at that it's one of the most active repos on all of github you know 5000 plus contributors is no no joke yeah that's just really no joke at all um so a change to that is automatically roughly deployed to npm instantly so something like you know the types of react all the types for node those are you know leading edge whatever we think is there is exactly there um but the advantage of this is also that you can get back versions right if you want to be on note 12 only you can go and use the definitely typed things for node 12. yeah you're not stuck at the highest latest build yeah no no yeah you need to be an npm for those like got it gotta get it yeah yeah at 12. there's like 100 you know 25 000 npm packages we do not want to be making tags for them but so this is actually really slick like here we go we're at here's the node types and so these this is published through definitely typed yes here it is um and so then if we were to go and look these so these are the nodes and these are locked to node yeah these tie to node versions that's really it's like semantic versioning is applied to the types in there basically that's that's really slick like i'm i'm super excited that that anything like this even you know exists because it's it's such a like what a what a daunting task right to try to tackle just keeping everything compatible like that without that website websites the website is terrible i've got a redesign of this i still have i haven't shipped it but i tell you what i have shipped though um if you go to typescriptlang.org dt search okay my type search uh did get shipped by a community contributor called josh killed it dt search yeah nice and this will let you like search for sort of anything across both like types that are embedded inside uh the project because it's typescript that's really cool and so like this would be yeah here's like community stuff right so this is the go true or like nullify identity widget which is not written in typescript and yep that's slick i like that a lot is there stuff yeah look at this this must be detected it's automatic yeah uh algolia search engine and uh i worked with them a little bit on adding typescript support into their algolia npm search engine um and so that's the yarn website also uses the same data to sort of give you type information while you search that is really cool like i i love i love that and like okay you're you're moving to typescript as a team you you want to make sure that something that you're using is gonna support typescript you can just come here and put in the name of the package and you'll know immediately like does this come with types or is this going to be an investment on your part to add the types um that's that's really nice yeah so some of the statistics that we keep in typescript is like the percent of random package.jsons that we find off the internet that are covered entirely by definitely types and its own types and we sort of measure this over time to get a sense of like if i randomly download something will it be completely typed just by by sheer luck effectively yeah and generally speaking that most are now at this point like nearly every major dependency is either in definitely typed or in uh ships its own you know dts's files like we saw with your example that's so cool so i what i wanted to do um just to to help for especially for people who are like brand new to typescript yes is i thought it would be kind of interesting to walk through some of the core concepts like what is different between regular javascript and and typescript so i thought we could do that just by like writing a few things and then we can we can commit this up so people can can use it as a reference um so let me do this i'll just npm init um and then what what would be a good thing to add i guess we can just kind of write some code right so let's let's start by just writing some code we'll we'll create a source directory and an index.js okay cool so in this we have um oh so we would need to add code that's right that's right and thank you for the sub bobby tables i appreciate it um so we can do like a function that we'll call make an exported function on something um yeah and yeah so we'll export that maybe it can you know multiply some numbers or something like it doesn't need to be clever it just needs to like the stuff that we can do from here is probably pretty interesting yeah so parameter one parameter two right and so then if we return num1 times num2 um that's you know that's pretty that's pretty usable that's right yeah let's make a second file that grabs it so again it's worth noting like typescript is doing all this stuff this is running tight on the typescript now um sales tax calculator globally you know we could put a programming language in there and a password to let you uh add your expressions so let's yeah we'll import um it was multiply from utils uh and then in here some more notes typescript is the one that provides all those dot completions and things like that too that's really slick yeah okay so i've got multiply and now it looked like i see this right yep that's pretty cool and we can already see now it's got the num one jenny num to any so unhappy let's tighten that up yeah this works the way that we would expect um and so let's have this let's just have this uh console.log result and then we can uh we can run it so we'll just like node so if you make them mjs files you should be able to just run that out of the box oh yeah that's right yeah we'll do that actually wait i think i learned something that will make this even easier if we do follow the type module yeah module are you gonna work this would be so cool if this just worked do it what not found utils is not found oh because we have to it needs to be js that's right so this is the esm way and what i i actually kind of prefer this now that i'm like getting used to it uh it still obviously takes a little bit of adjustment like i have to remember to add type module i have to remember that my imports need the dot js but this is so nice like i i'm running this natively in node i don't have to do anything magic but check this out okay so we got our we got our result but this is not bulletproof because i can also put in here a string potato and you cannot do you can two times potato like we get our we get yeah we get an n um but uh but so like if we wanted our we're not getting any warnings or anything like that that's telling us what's going on and so this is where javascript starts to fall down javascript is so flexible and that's a lot of the reason why it's so powerful as a language but it doesn't help me in this situation if i had imported this from somebody else's library i have no indication of what i just did wrong like if i'm thinking that multiply means i just get two potatoes like that's a you know i can logically make that assumption that's how this should work so i need my i need something to give me more information now what i would usually have to do is go to the docs or in this case i'd have to go look at the source code and if i don't know that this only works with numbers now i'm even more hosed because i'm like i have literally no idea why this is no idea yeah you have to go read the source code yeah yeah it's like that first you check the website then you check the readme and then you go read the source code and if you're not lucky then you go take the tests um so this is this is interesting right like i can think of at least a few incremental steps to get us to there that where people could easily just say this is enough for me sure um the first step is to consider what is the minimum amount of like typing we would need in this file to get like comprehensive typing and i think if we can tell that what the parameters are then we don't need to tell it what the return value is because typescript can infer that right like if it's a number times a number it's always going to be a number um you know there's a rule inside typescript that that says that that is true so to do that if you just make a new line yeah just start doing a a a js doc comment and it should offer uh yeah press enter now there you go wow holy crap okay so this is extremely cool because i did not know it was gonna do that for me so uh js stock is the it's a regular javascript block comment but you add two stars and that's the only difference and historically uh jsdoc was just for reference like i would i would write this and then it was useful if i looked at the source code to see that this function takes two parameters so like i can add a description and typescript picks that up and puts it into your editor so check this out now if i go over here and i you could just hover on multiply and it should get it yeah multiply two numbers and it says that i've got two parameters now it still says that they're whatever they want so it's not like magic here right um but so if i start going in and i go back to potato you said it'll work if i just uh hover uh oh yeah yeah nice okay i'm always in too impatient i'm like just whipping this cursor around like it's you say that yeah i have that bound to a key binding so i know where you're coming from um okay so we're close right like what we have done so far is declare that those two parameters exist which you know is only somewhat useful you already have that information we can just go in uh and if you go back to utils.js whereas those stars just change it to be string with a lowercase oh not string number i was like are we trying to break this on purpose who am i to question okay so we'll go to number and now you will not get an error that's also interesting you'll be told that they are numbers okay okay but like yeah this is what i mean by migration and like steps like what we've done so far is very similar to what definitely types does which is definitely type tells you these things exists right like uh just and so does the dom api we could have gone back to that file that we had the honkify and then start looking at errors but we didn't in fact i just let it just let it exist and then right it felt pretty tight this is what this is like step one step one is letting it the editor tell you this thing is right um step two is letting it tell you when it's wrong so on the top of this line make a new comment here the entire file yeah yeah and just do slash slash at ts hyphen enable oh ts check there it is yes check yeah never memorize that oh there's your arrow look at that okay so a couple important things to note here we now have typescript checking but i am not compiling to typescript i can still run my code without any compile step so this is something that i think is really like especially for me the the idea of having to go through and rewrite and rename all of my files and set up a typescript compiler and all that stuff it just it just kind of becomes so overwhelming of an idea that i i i end up just not doing it i'm like oh i'll get to that eventually i would love to have that feature but i'm just tired right but this is really interesting because nothing changed i didn't have to rewrite my build process i just had to add this comment yep that's super cool yeah and like roughly speaking 70 of the typescript type system is entirely available just in those comments so i was kind of hinting at that idea when you said you know what about would happen if typescript if javascript had it types and like to some extent like the way in which we use comments through js doc they do uh and the comments are a space where you can add like a type system yeah yeah yeah and so this is this is what we call you know js doc support in typescript and for a lot of projects like the chrome web tools um you know the web inspector yeah that was a huge javascript project and then they converted it into a js dock powered one just like what you've done here and then after that they migrated to typescript so it wasn't like this you know for them it was a trivial move to typescript because they'd already set up the type system they'd already gone through most of the errors that they'd done it you know file by file like this and then slowly and slowly got your way up okay so this is going to correct for me like and now now if i go in and i try to set this to like three it's like now that's still not good enough you gotta you gotta make it into an actual number and now it's happy again and we're back to getting useful results we get our actual result not not a number um so what happens when we do something more uh like here's here's a use case that i hit all the time right i'm gonna export a function called like validate input and i'm gonna get an input object and my input object i want to check like let's say uh if input dot name dot or actually let's do input dot address dot uh line one uh line one yeah return false um and otherwise we'll say this is just like you know very simplified but if we were doing like um and we'll name this something more useful so we'll say address and um now let's leave it at input because this would be like you know you've got your name you've got your address you've got your email address and all that stuff and you've got to validate these kind of like deeply nested features and so what i have historically had to do is i end up doing this yeah sure or i guess in this case it would be an ore yeah oh you could use the question equestria operator right yeah so yeah yeah yeah so we we can do a lot with this right and and try to make this a little bit simpler but like this this is what i have historically done um and you don't get any help here so if i'm out here trying to trying to validate this um let's let's give this a [Music] give that some info so that when we do this um and then i'm also going to validate validate input and we got that autocomplete thank you typescript under the hood um so then i'm going to get it is valid and that will be validate input and i have some input here um but let's say i put in like name jason and that's all the information i have so i'm gonna console.log is valid and if i run this now like it says that it's it's false but like now i have to go look at the source code to figure out what's valid and and i would love it if it would help me more um and so this is something like do i need to fully convert to typescript to get this it's a it's a it's an interesting question actually because like a lot of the stuff you're doing here is runtime behavior and to some extent typescript statically might not know all of the information that you care about for whether it's validated or not okay like kind of the way in which i would type this in types is like having an unvalidated object and then a validated object and you sort of can can switch between the two okay um [Music] but like talk me through a little bit more about what you want what what what what you're expecting to see so my my thought is is like i'm i deal with like not just a simple function that takes uh an input but something that takes something a little more complex like the the input that comes in um and so and maybe what we could do instead is we could say like get address and if we change this to the if i see exactly the address then we would want to like input address line one yeah perfect yep i know exactly what you're looking for exact same syntax as we had above more or less just through a different diff you need to import it oh yeah their import is yeah it's different now oh that's right yep right so instead of it calling it a string we just call it the type of object that it should be so okay so i'm going to add my js doc yep and presenter perfect okay okay now you might know the typescript syntax for this um simply because you might have done it before but this bit here allows jstoc syntax and typescript syntax and typescript syntax is significantly terser so we're going to do that um but there is a jstoc reference that will allow people to be able to do this themselves uh using like jsdoc specific stuff okay but generally js dock is mostly nowadays used for types through typescript and stuff like this so okay so just do a second curly um inside there second set of curlies okay so now it'll only be an object and if you do type the word address and then put a colon and then another set of curlies and then line one right that's it that's a string yeah and that is that is it like what you're doing here is telling the type system now that you know only an object that has an address and inside the address is something that has lined one um and that that is a string is something that will be accepted into this function but the question is like should you still validate it as much right because like you might be being consumed by a javascript user right not that completely it doesn't get that error because you had to opt into that error and so you have to make a decision about like the runtime behavior of whether you assume that people will be guaranteeing the typescript sort of right yeah but so what we what we get here though is i at least get a signal so i've put in this object and now i'm gonna i'm gonna try something i'm gonna say got my input and i'm going to move this out to there right and then i'm gonna put in my input and check that out it's still it's still smart enough to know that even though this comes from a variable it it isn't the right thing um and so that's really helpful now what i'm curious about is now what if i do like address line one uh already happy look at it go so now even though this has more fields to it this particular input only needs to satisfy this so this is not um it's not like exclusive comprehensive yeah yeah that's but that's actually really handy that takes a little bit of pressure off me because if i know that all this function needs is this i don't have to know the whole input object shape i just need to know what my function needs and that actually makes me feel a little bit better because you have to write less code yeah well and it requires a little bit less like context i'm not jumping around between like okay so i have to understand what the input looks like so that i can understand what the what this variable object is going to contain so that i can validate it in this function that only needs one piece of data yeah it might be overly specific right like that function get address could be useful in a user account an admin account yeah shipping separate object now it only cares about the underlying mechanics of how the object works not necessarily about the sort of exact instantiation of the object itself absolutely yeah and that's that i think is probably the the look that's just really exciting from a a you know if we want to adopt this in a way that's helpful and not just adding process for the sake of adding process then this feels good right um and so the other thing that's interesting about this is now you know as you said we probably still want to have some kind of of uh validation here because if somebody doesn't have typescript enabled or they just choose to ignore that they can still break this function um but what we can do here is we can adopt which i j you just told us came from typescript is we can you know simplify this up a little bit and now we've got um optional chaining and so this is going to check if if line one is set then it'll move on because we're negating it but if any of these are not set it won't throw an error it'll just return it'll just like make this condition pass yeah overturned false which is actually a kind of weird thing right like get address will ever return a false or a string yeah i mean honestly what we would probably want here is like throw a new error or yeah invalid address but what i was going to say is that like that will be respected in the type system if you'd have uh hovered over the result uh in the other file when there was still return false you'd have seen that the response would have either been a string or a false line one would have been that so like typescript is you know trying to understand your code as much as possible uh and to try and provide us you know oh look at that that's really cool and so you know in javascript mode typescript is not strict so they're all false could get like all false won't be checked so you would be able to do you know string dot character split the line.split on the spaces sure that could make sense but if you're in a stricter type sit type mode then you would be forced to get rid of that false so you'd have to check that it exists before you could use it oh that's really cool yeah so this i mean this is like this is just so pleasant that we're able to kind of write this code and then we get information here about what's happening because again like if you know if i'm using this from a third-party package and they don't have great docs but they have typescripts or types then i'm able to get information about what these do just by hovering over them and that is that is the kind of thing that's like we're not going to write docs like we we all should and when we're having good days and we're not under pressure we will but there's always going to come that time where you've just got to get something across the line where you just need to ship something and taking the time to write this this is light and this will decrease the amount of errors this this is not like okay we'll create a new docs page and then you got to write an explanation and all that stuff this is code is communication um and that i think is is such a fascinating way to go about this so i i think that this can be you know you absolutely should still write docs when you've got complex things like a utility function it can be self-documenting a really esoteric thing that's merging a bunch of stuff together and combining three different services like please document that but you know what i like about this is it lets you focus your efforts on documenting the parts that are tricky and let the code provide the guidance for the parts that are less tricky things that like this that are like you're trying to validate something you need to make sure that a piece of an object exists for this function to not fail i don't need you to write me a story about that i just need you to tell me what's going to happen if i use it wrong yeah yeah exactly and you know typescript's goal here is to help you migrate from you know the the most javascripty stuff that you have all the way to as most statically annihilable analyzable typescript as you could get and you know it you get some z lots on both sides but realistically every project is somewhere in between the middles even like you know even typescripts doesn't turn on every single esoteric flag on the typescript compiler and like sometimes we argue we should but like you know the the level of strictness depends on your exactness of what you want from the project and how pedantic you want typescript to be and you know this is the least pedantic it could be if you get rid of that ts check you'd still get all the developer tools you just won't get the warnings right you know you don't see those warnings when you do node index when you run node on that file uh everything just works um but those are there in your editor telling you they exist yeah and and so um if we want to get let's say you were you were talking a little bit about like the um like if you want to get pedantic with this um another another thing that i found that's really interesting is when you start getting into name types um and this can be really interesting when you when you've got complex input so if you know if we were going to try to build this out to have our our our more complex address type sure what if we had i don't know let's let's do a function called deno it would just work uh yeah call it just you call it just you know user or something yeah sure let's go city state zip right this is only u.s right so uh so this is a um but here so now we've got our our oh wait i need my excel function function there we go that's that's less unhappy and then what we're gonna do is we're gonna return an object that has all of those things um and then we'll do our address and our line one city state city you got your boston accent on [Laughter] uh but so yeah so here we go with uh so now we've got this store address and the store address will be compatible with our get address which actually means we could have a type that gets saved that gets like passed around like yeah this is this is a bit this is this is even too easy like we can just do the parameters and it will fill everything in and the return value will be the object um i think so like you know name is a string line there's just like lines string if that's all of them are strings you can make all of these are going to be multi-line edit that um and then the return object of of that will be in the third it's a strong object this okay um and then the return of stone address star address if you mouse over that you don't even need to include that oh really yeah no that's that that will be that will be what you want there it is oh nice okay but now if i want to share this around though don't i need to name this or something right well you could that's this is like where do you want to do this sort of work so we could we should we we will do that so to do that uh we have to create a type definition yes so you create a comment that lives that isn't attached to anything okay so my recommendation is yeah put it there yeah so uh open a new js.com and uh delete all those textures um and let me get that syntax so it is at type def i believe is the first line there you go and i think it's curly's and you give it the name um oop there we go do you need do you need curlies on these yes okay so the typedef is and inside where you've wrote address you write object oh oh oh i get it yeah now you give it a name uh if i can write yeah exactly you can write a comment after it which will get attached to it uh as well so you use the word property to define everything that would be on that um yeah exactly everything that would be on that so if you do a new line and do at property uh space curlies and then the type of it so you could you could copy if you could do that and just do name okay and then this one is actually gonna be different because this one is going to be an object okay yes and that's going to give us our address so that's yeah why can't i spell that today so this is where it gets a little bit complicated right because how do you do the sub sub thing inside that now i think this is a syntax uh which is it would be no no actually that's not the syntax you would make two types for this it won't let you do uh well not using official js doctypes so the way that i would do this is actually if you see where we wrote objects if you change that to use the typescript type definitions we we go back to uh what we saw earlier so change the word object that you have highlighted okay down one actually the one below and now we're just describing an object like you would in typescript so that would be line one colon string comma etc etc etc so again like there's two syntaxes for this and you you intermix them basically to get the sort of the full uh typescript type system because jsdoc doesn't support some of these features so we have to support the official jstoc syntax right like at typedef and that property is but then we also allow typescript syntax in there for the terseness remember that was actually the first thing i said about this right and so if we allow this actually i guess this would be like did you see when you hovered yeah if you actually hover over user info again you get the full object that's the object you just described yes and so now here i could do something like return returns so now there you go it shows us that it returns user info that's great and then here the input could actually be user info yeah and so now we've got it's pretty slick there you go pretty slick okay you get all your autocomplete in there too obviously um and look now now address isn't correct because it's invalid because we don't have the right thing so let's uh let's get our what is it do we call it create address no what was that uh validate store store address star address yeah okay so let's store an address and i want to we'll we'll make that our input so store address and i'm going to put in a name uh line one and this is like the worst function ever so you know obviously i i wouldn't write this like this but we're we're trying to prove a point right um so we'll say portland um i'll answer that question from little bobby tables down there so i described that js dock is a subset of typescript support almost everything that you would want to do with sort of normal syntax like is in js doc it's only when you start to get quite complicated types that you would use need to use typescript to some extent you can get away with it by using the typescript support in jsdoc like uh like we did there for the the user object um but if you're not in a complicated script uh it could is it returns it okay we have it returned i think we might have forgotten no it returns no it it's both actually it's both both returns and return is allowed by the js doc oh interesting okay yeah i know it's because the best reference is like the one on the typescript webpage that i built so i just have that up on the side so like yeah it would be very hard to describe a conditional type inside uh inside uh jsdoc because you just don't have the syntax primitives to pull it off but you could just put it in a dts file and then refer it inside your js doc so in theory everything is feasible can we actually look at how you would do that because this is this is like the next step right it's like sure so if if step one is we do js doc then step two is we would have uh like a d a dts so let's let's have a new i'm gonna put a new function in here and we'll put we'll make this one like um you know uh like ad album or something like this and this is gonna take an artist and a name and a year something like that or we'll say title yeah right and then that is going to return um i don't know we'll just we'll have it go straight up like why not yeah but i mean that's what it will be under the hood right yeah so this would theoretically this would do stuff um but what we what we want then is i don't want to have to write the the type of js we have typed yeah yeah so let's let's add our type somewhere else so how would i go about doing that create a new dot ts file anywhere you want so you know it could just be types.d.t.s we're doing nothing special it's just a dot dot ts file anywhere okay uh describe it like you would in typescript so interface uh is it like this or no it's like yes yeah you use interface album yep and this starts to look a little bit like uh like any schema like a graphql schema or a type there's differences but they feel similar yep they're all trying to map the same thing like a dumb object right json versus javascript objects and then is it comma or no that's actually no no commas this is totally fine you've got it just right uh artist title name okay quite remember yeah i think i said artist title year what if can i do something like the number has to have four digits you could but that's very it's kind of that looks super weird yeah it's feasible with a language feature that came out with like last on the last version where we can sort of design well it could be a string that is four digits i think today i think the version that's gonna go in beta on typescript 4.2 will allow it like to be very like you could say a six a six a six number or a number above a certain thing like it like maps inside your type inside your types is somewhat feasible nowadays but let's just say for simplicity's sake you don't want to do this gotcha um but yeah so so when i saved uh vs auto expandable export okay so i'm exporting it okay perfect we're going to use one of my favorite features of typescript like this is i use this everywhere so if you go back to your utils and we need to make a jstoc thing again because we're we're adding some types so they have to have the jstock thing okay and um you know you could just you know you could fill in your your params if you want but the thing we care about is the returns right um so let's just do at returns okay and we need our curlies the curlies indicate that we're gonna be you know some sort of thing and in here we're going to write import and we can import types so import curly a round brace round bracing like an import statement like a require okay and quote uh dot yeah no you need quotes in it there you go types.d.t.s it might just accept types either now if you put a dot after the end of that curly uh yeah in between those two just one back oh i got you so so in between the round boy and the curly boy uh-huh and hopefully we should see album in there but maybe we just don't need the dot dot ts then is it yeah oh there it is oh look and it's even got like the the special thingy it shows the interface album okay that's slick all right so then i'm going to remove these and is it is it smart enough to infer it well it might be i don't think that's that i don't think i think i mean it looks backwards to to that level because it just that's just computationally very expensive fair um but it shows us that it returns an album album uh and everything else is any so you can make all the mistakes you want okay you're totally fine actually this is an interesting i mean it's legal right because we've not even to the spectacular of that function it does just say that anything can go there even though you and i know that it has to be a particular shape yeah yeah yeah very easily call this a flaw with typescript and to some extent it is yeah okay so now if i wanted to define my function from here uh can i do that as well and and like apply it to this function maybe but i can't think of the syntax to do that um so in the case of that normally you would have like utils.d.t.s and that would describe the entire shape of it okay well let's let's do that let's let's try it so utils.d.t.s i spell the yeah utils dot come on there all right so i have my utils.d.t.s yes and if so would i like export today well at this point now you're describing the entire f the entire file of utils.js right okay so uh if you can split maybe do a vertical split a horizontal split with like the dts and the js underneath i can do that um we so you'd need to do multiply you need to describe so it would be export function multiply let's okay so let's maybe to just save ourselves some some stress here let's uh split utils and then we'll instead do uh album album joe and just do the one in part because like the typescript resolver is prioritizing looking at the dot ts file above the js file when it's looking to see like what what things are in there because that's how the system works uh that's how dt works definitely typed it it'll try and figure that one out okay so i've got my album js and my album.d.t.s they are side by side and then should i drop this one entirely uh yeah yeah you could yeah yeah that would yeah yeah yeah that would be fine and so you'd in your album.ts now you'd have export function uh add album okay and now you're just basically writing typescript so you could do your uh curly's like this string yep exactly uh title uh string year number okay and then here it would be like oh this is colon album yeah now you don't have album but uh maybe it was offering to auto import it so if you delete it really delete the m yeah that's fascinating wait get out of here go away oh maybe not yeah whoa so do you see this is one of my favorite features of vs code recently like if it auto imports above it will not jump your code down it will actually shift your window up at the same time as importing it so that you stay in the exact same context that's yeah okay so that's that's taken the type leave a place and we've designed the function now and the function will have the add album description okay and so if i look at this now well you're in javascript so in java and inside that file that is the source of truth outside of that file the source of truth now should look a little different uh you've got that ads now comes from a different import add album from uh what was it album.js yeah okay look at it go there you go and now it's yelling at us which is what we want um so yeah we could do like uh of course i'm gonna draw a blank on like like an artist and an album like i'm done jimmy world futures there we go uh yes jonathan la i can't see the rest of your name there is a bit of a difference between export function and declare function um declare function generally speaking declares something globally uh export function in this case is saying this is an exportable function here i just made up a year i maybe uh now i'd say it was more like 2004. yes oh all right fact check us chat how'd we do [Laughter] the price is right rule so it's whoever's closest without going over [Laughter] love it um yeah so so this now has everything that we would expect it's got checking it's telling us if we're if we're right or wrong so if i try to make this a string it's going to yell at me um it's and that's all happening without any import we just have the ts check and even if i remove that ts check it's still like your documentation will be out of sync yeah that's so cool but so hit one of the trade-offs we've just made is the lack of co-location right true the same the same problem we use the same advantage we used to have uh of like um you know the docs are right next to the code it it's less likely to go outside of it and now it's a separate file by the way you chat verified you were exactly right with the year of this album uh jimmy world uh doing a bunch of uh live shows pretty soon uh i'm really excited to see them uh well not see them not live you know yeah yeah yeah yeah that's that's really awesome um okay so jonathan has a good question is there a difference between export function and declare function yeah relatively speaking one is about a global and one is more about like an explorable function okay um so like the type the d dot ts is actually a third sort of compiler parser thing that i mentioned earlier you know javascript typescript dot dot ts each one is a different angle on the typescript compiler right the dfts has different rules um because they have to describe any possible module system and any possible runtime environment that javascript could run in uh which is very complicated because as you you wouldn't be surprised to know that javascript literally runs everywhere and you know node isn't the only brow like radar run javascript and there was a browser so a dts has to represent everything so yeah it supports a lot well and so you know we were talking you i cut you off when you started talking about trade-offs but this is actually something interesting to discuss is like we did give up this clarity here if i go inspect the source i don't get that insight anymore um so the the benefit is that we can be very like typescript specific and and ters yeah but and so then the next evolution of this if we wanted to go like full-blown typescript would be that we would write this as a dot ts file and then we would just actually write our function in here is that correct yeah effectively like i mean that is the main difference there between a dot d ts and a ts file obviously that won't work then without uh compilation right right but that is again that's that's the discussion like you know if there's a dead zone after a colon to a comma or a new line or stuff like that then yeah could be something that could run inside javascript sure um but no no so one one more question um we've got about 15 minutes left if i want to turn just this album.js into a typescript file can we do it inside of 15 minutes uh trivially yeah we could probably do it in 60 odd seconds let's do it all right let's let's learn how to make this happen so if i want to compile typescript and and to do that what i'm expecting will happen i'm going to copy this over to here yeah now i expect this to be my typescript so that means that i'm going to rename this one yep delete that album.ts2 okay so we'll delete that okay so now i have a typescript file and i don't have i'm just gonna i'm just gonna pull this over i think joe it could reference it if you wanted um there's some nice specific syntax for this that's like import type that's separate from importing uh modules oh interesting okay so how would i just import so you try import space type uh and then you do your curlies because it's a curly import yeah from uh dot dot yeah right okay so i've got that all right so we're we're ready to make this into typescript but if i try to run this right now it's going to it's going to blow up um oops yeah yes actually try to run that what am i doing here oh trailing it all right so this then um cannot find module album.js so if i switch this over to be album.ts that's just immediately going to explode it's going to immediately explode okay so i don't wanna do that so instead i we're gonna use typestrip to compile ts2js yeah yeah it's like realistically c only uh there's sort of two ways to do it effectively at this point there is i've uh used something like ts node which instead of writing node you would write ts hyphen node just try and figure it out uh the other is to run the typescript compiler and generate the js file um let's generate because that feels like more what we would deploy right um i don't know the npm install save uh typescript it actually did auto save yes build register's a good one too i i've been using es build in uh some of my personal projects so typescript is a single dependency which is quite unique inside the ecosystem it is just one massive single dependency okay and it adds a command tsc to your uh which i think you might have to add the scripts otherwise you have to use npx uh yes yep and then is it just like source no no well yeah because we because we wanted to put it somewhere right yeah uh well typescript uses a sort of like package.json equivalent called the ts config okay um my gut says if you run it like this and just run npm run build it might just work with the default settings what does it look like does it not it says uh i bet it's not happy because there's no project yeah okay we'll do ts do npm run npm build dash dash init i think npm that we i just want to run tsc dash in it okay just like just like when you did you know npm in it same thing so uh it'll use the local one like this which is nice dash oh whoops successfully created a ts config file so now i'm looking at my ts config we've got a target of es5 we've got a module of of common js which is not necessarily accurate for our system right we're using imports correctly so you could call it es2020 es2020 um and in theory you could do the same for the above so remember typescript will try and reduce it to the oldest possible browser but you're running in most modern node possible es2020 okay uh it should accept both uh it's pretty flexible on that because some people like to write dom in lower case so then i want an out directory of here uh well if you don't set one it'll put it next to it so any ts file will have a javascript next to it in the file system so okay okay um and so that then should do it i think oh straight true might be a bit excessive in this case turn it off there we go that that should be everything yes module interrupts pretty useful and both of those are pretty okay too all right let's try it so i'm going to npm run build runs typescript and we get album.js which looks exactly like our original album.js however now we still get all of our our information right we get everything that we expected um yes sorry we get everything that we expected we've got our like what's coming in what's coming out and if we go over to the actual code that we're writing with album.ts we get all that information here as well um and that i think is really really slick in the the sense that it like tell you know it tells us what's going on which i i really appreciate um in this case you only have one source of truth now right yeah which is in and like as you said you know it's a little tricky if you're looking at it like we've got our album.js this has no information so if i if i have to look at this and then i have to open it.d.t.s like i can see how you know you have to discuss the trade-offs right because the speed of getting up and running with with utils like this this is incredible the you know the the speed with which we were able to just quickly say we want type checking we want autocomplete add this js stock like 100 this is where i'm going to start yeah that's how you should stop and and then it kind of seems like as you get deeper into this as things get more complex as you find yourself like passing types around then it makes more sense to start looking into more like a deeper integration and you know if it's really really like everything's going to be typed you you're starting green field then maybe it makes sense to go like from from fully compiled typescript from the get-go sure yeah that's the thing like this is this is not a binary switch you're not like all typescript you can be just javascript so you could be just javascript with a few js doc parameters then you can turn on the you know the checker uh and then you can turn on individual flags or make it a bit harder each time harder like you know to make it a little bit more difficult for you in order to make it a bit easier for your users sure but yeah i mean this is late and this is really slick like i i'm i'm a big fan of of the the incremental approach here i'm a big fan of this not being something that's like all right we're switching to typescript everybody drop everything and let's rebuild the whole app it's it's something that's like okay what are the most critical pieces of our app what are the things that are most shared and least documented can we convert those to typescript so that we at least get some hints um and and stop tripping people up that to me is really really valuable yeah you find your leafs right the small bits of code that are on the edges and then you move them in and you slowly get to a point where you've got good enough tooling yeah now i love that i think that's really really exciting um and so all right we got a couple minutes left chat if you've got questions pop them in now um uh so nikki i'm not gonna run it with dino because i don't have dino set up and i literally never used it so uh that is that is probably not going to happen today um that code would probably run though like it's all just import exports javascript and data runs that just as well too uh a couple a couple things in here token 808 says uh you know my issue is that it feels a little bit like a draw the rest of the owl problem uh meaning that it starts out really easy and then gets really hard we're trying to combine typescript react uh i think that's fair but i i also here's my suspicion my suspicion is that this is not an issue of any particular tool but an issue of lots of tools that weren't built to be aware of each other all trying to be combined together because like if you greenfield the react project and you build it with typescript and you're not importing third-party tools that weren't built with typescript it's it's all great like everything's wonderful but then you kind of import a tool or a package and that package has a third-party type definition and it's only 65 percent complete and then you're like you're trying to do something else and suddenly you're getting these weird errors and you have no idea where to even look for the issue that's that's a real thing right and and that's maybe one of the trade-offs to to consider when when looking at something like this a little bit like dealing with a webpack config right like right sometimes you just have to really do the research go really deep to find your eventual answer and it's like a one-liner somewhere in a way you never expected and that fixed it for everyone but you know i think there's a good uh there's a good argument to be made here for like it doesn't have to be one or the other you don't have to go all in on typescript you can go you can go in on typescript for internal tooling and don't don't fight it when it's not compatible with your project if you're if you're working on a react code base that's largely built with third-party modules that weren't written in typescript maybe that's not the right thing right but your internal tools your new utilities the components you're writing now that are are shared between your your different ui pieces write those with typescript definitions and maybe just use jsdoc so that you get the autocomplete you get the warnings um and then you can add that that ts check at the top and you know be made aware like oh we're trying to add the wrong props to this component yeah perfect how great is that a little bit of documentation here and there just makes you your life a little bit better yeah yeah absolutely full strict typescript mode you know like the the jump from typescript javascript to typescript is about as far as the jump from typescript to strict mode on a large code base and like you know you can really feel the churn sometimes you feel from javascript to typescript from typescript to strict typescript that's a you know i read a migration story only yesterday that was like it took us two months of a single engineer to move to typescript and i'm like you could have oh it much more incrementally and not not blocked stuff um that would have worked just that would have people would have felt good about it quicker yeah if it might have taken you longer overall yeah um here's a question looking to the future what do you think is next after typescript like like what are you paying attention to right now um i'm very interested right now in snowpack um snowpack so you know we've we've actually been talking a lot about sort of complex build tools that have to cover a huge array of things right like i've mentioned multiple times no matter what types of environments typescript runs in um you know that that ts config file we saw there you just you saw how many entries there were in that config there's over 100 entries in a ts config option to configure a perfect typescript setup because there's just so much going on absolutely thanks to like javascript being good enough um thanks to most people agreeing on what javascript looks like and for a lot of people that's just straight up typescript so whatever version of typescript is that's the version of javascript they use okay and we're seeing import export uh simplifying the module system to the point where it's in the spec so what all that means is that we're in a new environment for people making new tools like deno like rome and like snowpack that don't have all the legacy baggage that the rest of these tools have to have in order to be continually useful at the scale they're at a games engine for snowpack that like i press save and it hot reloads it was the game engine that's that's why i think took me two hours like that would be infeasible in webpack to me yeah and and that i think actually points to something interesting which is that it does feel like we we had tools like webpack to pave the way to get us to here and now on the like on the backs of of that work through the through the efforts of the webpack team we've now opened the door to like a next generation of tooling that's going to take that work and go even further and i am really really excited to see things like rome like snowpack uh all coming out because it it and like there's really cool stuff coming in from the the rust community as well that is starting to look at like how can we make this faster how can we make this more like let the browser do what the browser does don't fight against it so much in the name of uniformity um really really really interesting stuff um unfortunately we are out of time so if somebody wants to learn more where should they go next uh let me i'm gonna throw the the typescript docs back in the chat and i'm going to make sure to point to uh your twitter again oh come on don't beachball me now it's not the time so for this topic specifically um there is an entire section of documentation just on javascript support inside typescript um which you can see if you go to the docs page and sort of uh maybe scroll down is it the virginia's programmers that's that's sort of like onboarding to typescript oh my god um yeah this javascript section far left here that far right yeah that that is the reference that i've been using when we've been talking about what the things look like it also talks through that entire pro like process that i've talked about you know like start with jstoc add js uh ts check et cetera et cetera it will take you to guide you through adding typescript incrementally to a project excellent instead of trying to do it as a binary move cool well so thank you all so much for hanging out with today or to thank you so much for for giving us your time and and walking us through this i think this was absolutely fascinating uh make sure you go and check out the schedule we've got some really good stuff coming up this is going to be a really really fun uh like this year's starting out so good on thursday emma's coming back we're going to mercilessly ridicule her for her taste in tacos uh then ali spittle's coming on we're gonna learn react then scott moss is coming on we're going to learn next js that's going to be a killer week like that's going to be so so much fun ben hong's coming back we're going to learn the view composition api sarah drasner is coming on that one's going to be a little interesting we're doing more of an ama and not a code along but it's a it's for something that i think is really interesting and really important uh there are a lot of people trying to get a job right now and the industry is is super competitive because there's so many people coming in we're gonna talk about how to stand out how to get that first job um we've got wordpress and next we're building our own babel plugin it uh it's it's gonna be so much fun y'all i i cannot wait so uh make sure you go check out the schedule thanks again to rachel and wyco captioning who have been providing live captioning for this entire show we really really appreciate that that is made possible through the generous sponsorship of uh let me actually show the logos why not right um through the generous sponsorship of netlify fauna auth0 and hasura all of whom are pitching in to make this show more accessible to more people or to thank you again for hanging out with us today chat stay tuned we are going to raid we will see you next time bye you

Channel: Learn With Jason

Views: 9,355

Keywords: Learn With Jason, TypeScript, Orta Therox, Code Autocomple, JavaScript, JS

Id: BHYgpbPC4wM

Length: 91min 8sec (5468 seconds)

Published: Wed Jan 06 2021