Power Up React With TypeScript (with Ben Ilegbodu) — Learn With Jason

hello everyone and welcome to another episode of learn with jason today on the show we have been elegant ben thank you so much for joining us of course thank you for having me i'm excited i am so pumped to have you on the show uh and and i really appreciate you know we were supposed to do this a couple weeks back and it was all smoky on the west coast and so i appreciate you being flexible uh chat i appreciate you all being flexible and and coming back um so ben for those of us who are not familiar with your work uh can you give us a little bit of a background sure so um like you said i'm been a leg purdue i work at stitch fix so i'm a principal front-end engineer there i am on our i guess you would call it our platform team so i don't work on direct user features i work on the stuff that enables my teammates to build the features for our users so that's our design system that i've been working on for about a year since i've been there the whole time that's in react it's also in typescript kind of the motivation for us hanging out today and then the other side of it is what i call devops which is like front-end infrastructure stuff so not devops oh interesting devops yes one of my friends coined that term and i just love it i'm into that okay so let's talk about that a little bit because i feel like sure so uh so like chris coyer put out this whole post about um you know the the evolution of front end development and how it's gotten so much bigger right and so what you just said touches on i think one of the most surprising parts of of front-end development which is there's no there's now like a back-end development for front-end development and is that is that what you're talking about with devops yeah basically so you know it's your webpack configurations making sure babel is transpiling correctly setting up es lint rules like all of those sorts of things that you know we don't want our teams to have to focus on each individual team to have to deal with so we're trying to consolidate how all of that works and you know quite frankly not everybody knows or wants to know how that stuff works so yeah those things are key though for your app to be performant to be optimized and to just work in general so uh it's a it's a core competency and i'm seeing some companies even like having roles just for that sort of thing for sure yeah to your point what i find myself is i'm working on this like back-end working on webpack configs but then i'm also working with our designers writing components to um for our design library so it's design component library so it's like this whole breadth of stuff not to mention you know the actual building of uis and things like that so yeah i think bigger and bigger and especially as we're moving into this world of like you can build entire applications in the front end with just apis in the back right um when you're looking at that like it's it's no longer something that you would take to like a java architect right or like if you're looking at at big old school enterprise companies that have a lot of software architects who kind of come from more traditional monolithic or just using like hardcore back-end languages it doesn't really make sense to have that type of architect designing these almost entirely front-end apps yeah there are some things you can borrow from those sorts of for sure setups and things and we have those architects at uh stitch fix and they help with you know setting up our apis because you know our apis are in-house so we still have to make sure those are correct and just how all of the systems are working together is important but like to your point not those people yet haven't understood what's going on in the front end so yeah a lot of it is just communication to figure out like this is how this stuff works absolutely understanding so that they can lend their expertise even in that area as well because yeah generally they have lots so we want to be able to make use of it yeah and a lot of what you're talking about here i think is is really interesting you know you just said like communicate how this stuff works and i think that it's it's important to communicate that cross-functionally but also just internally you know and and maybe your experience is going to mirror mine here but what i found is a lot of the the kind of foundational stuff that we do the the devops work is it's almost like a form of of internal communication it's trying to set up guardrails and guide people down the right path so they don't get themselves into into trouble um how how actually that kind of ties into what we're going to talk about today like what kind of tools are you using and what approaches do you take to to make sure that you're you're setting up people for success on your team yeah so i have this uh mentality i say i'll say that i i'm planning to blog about it but it's i like tooling over documentation so docs are great but the docs that are like here are the our best practices on how we do x or you should never do y or whatever it's like if i can create tooling to enforce that that's so much better than um trying to have documentation that goes out of date in three months six months or whatever so eslint is a perfect example of that some of it is preventing errors but some of it is styling things that we care about for whatever reason um and some of them are you might shoot yourself in the foot if you're doing this so we're going to have a eslint rule around it i find that better than trying to have documentation and things around it so typescript is another perfect example of those sorts of things like um you know using double equals versus triple equals in javascript well you know typescript is going to enforce a lot of these type things that we try to push in lint rules or even communication that i think is is really helpful so less things more things that uh automation can do and uh github checks can do the better absolutely yeah i mean and that makes sense right because like yeah in my job i get handed a million things that i'm supposed to know and pay attention to and like read and comprehend and i there's just no way i can do it all right so most of the time i'm making best guesses so if if we as engineers can kind of smooth the path and take away some of that thinking some of that cognitive overhead so that the software kind of writes itself the way that it's supposed to be written because i can't push it otherwise like that that's a great thing for me and so so how does uh how does typescript tie into that like how what are we able to do with typescript that makes it worth the the effort of switching well so first i want to kind of preface it that there is effort right so i don't want to like you know gloss over that or anything like that it's definitely effort but it's worthwhile in my opinion and hopefully we'll be able to jump into some of those examples but i think it helps prevent those times where we shoot ourselves in the foot because we're being too clever or we forget about a certain aspect or yeah you know i'm pretty sure this thing is never going to be undefined so i'm not going to check it or things like that and even even in react confusion things like this prop was never declared in the prop types but it's used in the code it's not marked as required but it's definitely used as if it's required well you know that's just a recipe for disaster coming up so if typescript can enforce that when i call this component i have to pass in a value like that saves you know just so much communication like we're saying and then potentials for gotchas as well for sure and so um so when we're talking about typescript like at a at a super high level what is the difference between just javascript and typescript kind of what's the the major value proposition of it yeah so the nice thing about typescript and javascript is that the delta has actually been shrinking since the beginning of typescript because at the beginning es6 hadn't even come out so things like classes and a lot of these new features that found their way into es6 were only in typescript so it was a big change but but now it's like um a lot of the new features um new proposals and things like that are finding their way in es6 or into typescript that are also in javascript okay so really what you'll find is the difference is declaring types basically and you declare that this type is a string this type is a number this type is an object of this shape and things like that and it enforces that that what you say it is you act on it how it is so you can't pass a number to something that expects a string if this thing is can be undefined or a string before you act on it you actually have to check to make sure that it exists things like that so that's what the typing really helps with okay but there are new things like interfaces that exist but um mostly it's all around being able to declare types awesome okay yeah um so chat as always thanks for hanging out with us uh before we jump into the code i want to take a quick minute to shout out our sponsors so let me switch over into this view um so first of all everybody go follow ben thank you so much again for being here today to teach us of course and remember the captions are available at lwj.dev live what's going on here why don't you think we're live oh that's no good um we definitely are we are live yeah i can see the twitch are you bugging out on me oh that's a bummer okay so i'm gonna have to um hey white coat can you send me the link to the uh the iframe that i usually embed here so that i can i can put that up somewhere we'll so we'll get the the link up in just a second but um that is made uh let's see i'm just gonna type this up it is at streamtext.net player and it is event learn with jason and so this if you want to watch the live captioning is going to be uh right there you can you can follow along in a browser of your choosing uh i will figure out why twitch has betrayed me today and we'll fix that for future episodes the live captioning is made possible by the generous sponsorship of netlify fauna sanity and off zero who have all kicked in to make this show more accessible to more people um and that is provided by white coat captioning thank you so much as always for being here um with that being said why don't we uh jump right into this so if i'm ready to start like i want to write a a typescript project but i haven't done it before yep how should i get started what's the first thing i should do well yeah so the first thing is if you don't have an app at all create react app is always the way to go and it supports typescript so okay i suggest that uh we do that um but the nice thing is even if you do have an app already that exists before if you're going from um trying to add typescript you have to switch over from babel to typescript because there's two parts of this there's the type checking and there is the transpilation to vanilla javascript so before the only way you could get typescript to transpile to vanilla javascript was using the typescript compiler but now with babel 7 there's a new plugin it's the typescript babel plugin or preset so now you can you can have babel do all the transpalation with the react plug-in and all of your other nice plug-ins and go from typescript to put in a javascript but then type checking still happens with the typescript compiler so you can stay still stay in your babel universe and all your nice plugins and things like that so it's pretty sweet but to start with you know don't worry about all those things that goes into devops land again we can just use uh create react app to create it you just pass in the typescript template it will find it here on the docs as we go alright so there's a whole bunch of stuff here maybe i want to look at they have the search at the top maybe just type typescript at the top there yeah they're using typescript with create react app how about oh look at that that is beautiful okay so we're right here nice npx call too sweet don't have to install any globals i'm always a fan of that yeah except you we need to name it we need to change the name of it we just created an app called my app so i created a folder if i do this does this work in create react app do you know i can't remember actually but we'll find out in a second let's let's roll the dice let's see what happens is they're going to yell at us [Music] see looks like it's working yeah creating a new react app and yep yep yeah so there we have it very cool okay so we are getting in it's installing whatever we need i see react scripts type script utils yup okay so let's so i i have to apologize chat the the boop overlay is broken i'm in the process of rebuilding the um the overlays for my stream and they will they will be much better soon i've been uh kind of pushing on the the jamstack conf which ended earlier this week uh and i can finally like breathe again so i have time for side projects nice uh let's go ahead and pop open this code and take a look at what we got so this is what we just what we just uh set up here we've got our git ignore and i think i might need to open this again yes i'm gonna get in it here i'm going to close this and then i'm just going to open it again so that vs code picks up the right uh picks up the right git ignore good yeah that's what we wanted so um so in here i can see we've got a ts config and this looks really similar to a create react app all the things that i would expect uh types that that feels very type scripty and then we've got javascript itself yep okay um i see tsx versus dot js or dot jsx yeah so in typescript your react components have to end in tsx okay like it's not uh either or like it is in javascript it needs to be tsx got it okay well i guess i guess being explicit is not the worst thing in the world yeah yeah okay so um what what should we look at first like do you want to walk through what's in here do you want to just start showing some code what's the what's the right way to onboard do you think well you know we can um start the app right so you're using yarn i'm assuming so you can yarn start and we can see the react logo spinning there that's just a nice uh getting started and if that i mean when that not if that's when that works there we go there wonderful we can take a look at the app.tsx like it says and you know even just see what basic typescript looks like yeah let's do it i'm going to take this over here and this over here let's open up nope that is definitely not the button i mean to push this one so here's our app.tsx yup and yes so do you get that all the time this this that that happened no i don't know what happened like something got updated and now everything's broken and i just like yeah okay that all the time in vs code it was some new version of vs code i have to accept eslant every time every time i'm just like just remember okay anyway so here is um our react component and typescript there aren't actually any types going on in here um because we just have the component and it's returning um jsx uh here but if we wanted to for instance let's say we wanted to make a link component and take out that a tag and put it in its own component that's when um things can can get interesting so yeah let's let's do it so we'll create a link component yeah and we'll pass in the url and the content how about that okay so do you have a preference like here this is defined as a function that seems to make sense to me i see people declare as constant um and then i also see like here it does the export default at the bottom i've also seen like this that's what i've started doing um uh-huh what's what do you what do you mean so just it's funny in reactors like there are so many different ways to do everything right so i prefer const arrow functions okay i'm not i can't really defend the reason why um but that's what i like doing uh maybe because you can have implicit returns but anyway that's the form i like and but the problem is with that form i can't do export default with the named of the arrow that's that is true yeah okay that's always the argument against it but you know so what i've just done here is i have written what i would have done as a regular react component so i just threw together it's it's got a name that's the name of the component it's going to take a url prop and a content prop and then it'll use the url as the the href and it'll use the content as whatever's being linked yep is there any yeah is there anything else that we want to do here so i'm seeing a squiggly under the link yes can you hover over that is that telling us anything interesting you know what i'm wondering if my let me open this in my non um i have a like a different vs code profile that is significantly uh muted it's got like everything turned off so yeah you definitely want um these helper things with typescript as we'll see definitely gives good insight yes i will allow it please all right let's try that again so i'm going to do a link and that is going to have url and i guess maybe we want children instead of content right so that we can just use it like a regular okay so then we'll return a href url and the children and then down here we would use that like link yeah let's go ahead and put those class names inside of the a tag we'll put the target inside of the a tag like those are the three props class name target rel let's just throw that into the tag okay we can make it configurable later if we choose so you just want to move these in yeah we'll just pass in the url that's the only part that will be configurable okay so i'm just gonna let there we go and then auto format should handle all that for me good nice all right so uh this one i think was because it wasn't being used yeah okay and then all right so here we're already getting some helpful information in typescript saying that the url is an implicit ini which is disallowed in our typescript uh configuration same thing for children and um i'll explain a little bit more what that is as we go like basically the default type is any that means you didn't add any types to your thing and that's basically that's basically what javascript is it's any everything could be anything and there's no restrictions no there are no rules yep there is my perception is if you're going to invest in typescript and learn it and all this stuff you should not uh support any like you should always have to have a type no implicit any there are other people who say hey you know typescript can do some things for you just you know don't be so strict and such but i don't i don't know i just don't see the value in in doing that and being a little bit loose so yeah i always stick to it so that's my perception okay so then if i want to make it is not any yeah how do we do that in typescript yes so what i wanted to also do i think if you go down below and you go to your link where you're calling it there should okay we don't have the error there yet um but let's go okay let's define the types for for for the link okay so what a um so the thing nice thing about a react component is that it's just a function it takes in some props and it returns some jsx right so we can type it just like we type anything in typescript so once again there are a couple of ways to do this sadly but what i'll do what i use is a uh it's called an interface in typescript so above here before the comment i guess you can say um interface props so capital p um and then curly braces okay so here's what where we're going to define the types of our props so url is a string so our url colon string yep just like that and once again you can have semicolon at the end comma at the end or nothing or a new line at the end okay so how you separate them so so that works yep this works this works works and that works okay so that will probably that will your your es lint rule will probably dictate how that works or your prettier config will dictate what you end up doing but yes chaos i don't yeah i won't go into that okay so then to type children children is react dot react node so that's just something that you're going to yes that you're going to have to just learn so that's what the type of uh of children is and so this this is a type oh i can if i hover i can see yeah it's uh what it is this is a type exported from react so that we can use it with typescript yeah so you can command click and that should open up the type if you like ever want to nerd out like how that stuff has been defined you can see hey a react node is a react child a react fragment or a portal or a boolean or a null or undefined and then they're like as it is nested things so react child is right so we'd click on this and then we would see more yep click on this and see more okay yeah so it's a rabbit hole right it's going to keep going down so the question is hey where do those types come from like who wrote that that's not actually in the react package itself it's in a separate peer package called at types slash react there [Music] if you go back to our package json you remember we saw some types that were being imported in addition to some other things yes here yes so at types line 11 is where that come from comes from got it so it's separate thing so if your pa if your dependency isn't written in typescript it needs to get typescript can only work if the dependencies have type definitions so if your dependency doesn't have it innately inside of it then you have to go get it from this resource called definitely typed okay let's let's find that link definitely go into well i think it's uh definitely typing yeah or we should go to the dot org right uh i always go to the github oh yeah i do go here yes yeah so this is a a repo of i don't know 5 000 plus definite type definitions for your popular packages and probably unpopular packages so lowdash is in here jquery is in here react is in here moment is in here um we still people still use moment i'm sure data functions yeah in here so everything pretty much everything you want to use is in here so that you're able to have type safe code because you want to make sure that when you call those functions that you're passing the right types and getting back the right types yeah and and so like what about like next js maybe yeah next yeah gatsby next knucks might already be written in typescript there's a bunch of next adjacent things but yeah that's that's really cool so a lot of a lot of frameworks in here a lot of tools okay so now that we've got access to those um here in in our react node then but it was implicit we got it implicitly by importing from react at the top so type is that like a vs code thing or is that a thing that like that's a typescript thing okay so if i did this in sublime or or intellij or whatever do i have to enable like a typescript extension for that to work pro i would assume yes to work in your editor so that you can command click and do all that fanciness probably but for typescript to just work so typescript works in the editor and vs code innately out of the box which is which we're going to see is amazing if you use intellij or you know text mate or whatever you can still write your typescript code just fine and it'll run in the browser just fine but to have that integration you're going to need uh plugins okay yeah so because you imported from react it goes and it looks to see well does react the package itself have the typescript definitions oh no it doesn't so let me look at at types slash react yes you got that here's where the types are cool yeah all right so we we have we've written an interface we've called that interface props we've defined our url and we've defined children but i'm still getting this error so what do i have to do next so the last piece is we have to tell typescript that the the props that are being passed in url children is of type props the interface so so the curly brace right there here after right there colon and then capital p props and then now we've told it that those are the props oh oh and look at this immediately now we can see who knows that's cool all right and so what happens if i try to break this then like i'm gonna pass in a hundred yep oh that is very cool okay what if you try to remove url and don't pass it oh that's just syntax errors yeah that's the syntax error property url is missing yeah right okay so the cool thing about um interfaces as opposed to prop types is that the properties of an interface are required by default okay you have to pass them you have to market so like i was saying before how you know people will list things in their prop types but some are required some are not but they never they forget to mark the things that are required um that's a problem well here in your interfaces your properties are required okay by default so what if i want to make one optional so let's say i want to pass through this class name and so i'm going to do that i'm going to put this through here but i don't necessarily expect this one to always be used so i'm going to get it here actually let's just see what happens when i add a property that's not defined yeah let's do that does not exist on type props okay can't do it won't let you okay you have to define it like no hidden props inside of your code i like that okay and then this is going to be a string i would assume yeah okay but i don't want to have to send it i want to be able to leave this so now yeah now it's required so if you do remove it uh-oh you're not passing class name right again and can we take a second to see like all of this vs code inline um tooltips are amazing like we didn't even we haven't even yet gone to the browser for it to tell us this information yeah like if you saved and you went to the browser it's going to tell you that error um that you can't go ahead again if you know the app was running and such but uh we are able to see all these type information like as we develop so we're getting instant feedback without even having to go to the browser at all which is amazing this is really really nice so because this is disheartening right like if you're if you're working in the browser and you make a code change and you don't know that that code changes wrong and then you just see these big red errors that's that's a bummer but this where it's like okay i typed a thing and now it's mad at me and i don't have to change context that that makes this a little more approachable i think that's why i think it's worth it like it's you still have to learn some things um especially as you get more complicated but i think it's worth it because of that yeah so there's a there's a question here that i i'm not even sure what uh like how we would approach this because i don't know anything about this but can you talk about the differences between types and interfaces and and kind of which one should be used to define props and maybe you can tell me what like what that means so let's do the class name um yes yes sorry default and then we can then we can then we can switch to that okay yeah so if we wanted to make class name optional we put a there's two again there's multiple ways to do this but the the canonical way is after class name before the colon you put a question mark yes right there on line eight nope question mark yes okay so what that ends up saying is the type is string or undefined so if you hover over class name it's going to tell you that string oh okay if you do it on line 12 it'll tell you that string or undefined line oh line 12 line 12 line 12 yeah and the definition got that string undefined same same in inside um so that's a way to make it optional so and then if so you don't have to pass it in everything is good oh yeah we got to pass it in what was that i don't remember quickly app link yes yeah [Music] hey what happens if you forget and you do class instead of class name oh another thing it tells you oh yes property class intrinsic attributes and props last name i like it when they tell you how to fix your problems in the report so these errors can be a little interesting right uh because there's all this information in it so if you could remove the class name part or just the name part and just have class yep there like we did so what i like to do when i'm reading the errors is i try to read bottom to top okay right so i read so i'll read property class does not exist on type intrinsic ass attributes did you mean class name and i'll start with there and i'm like okay that's enough information for me to actually understand what's going on and if there was a case where that wasn't enough we may see this case then i'll go higher and then see oh type children blah blah blah it's not assignable to type blah blah blah okay so reading bottom to top i find is much helpful that's a pro tip pro tip all right so we'll uh we'll call this class name so we we stopped getting those squigglies and then maybe we can revisit so that question yeah so interfaces versus types i would have if you would ask me before i read that question i would have said this is a type so is there a difference yes yeah so the question is if we let's add a new line the other way to define this is type um then space props let's give it a different name i don't know props b or something link props there you go i like that um and then we can copy the contents of that in there okay except it needs to be type link props equals the oh okay there you go so this is another way to to define it and actually the name you gave is like the other common way i see of naming the props for a component is component name props okay that way and so if i do this everything works the same same same general outcome yes okay so the difference for 95 percent of the cases maybe even 99 of the cases is exactly the there's no difference okay this is exactly the same just another way to do things right the the the actual difference and if you try to read the docs that explain it it's like so convoluted and i found the actual difference is that when you define it as a type it gets the the definition of the type is the object so it passes around that object everywhere that you've declared link props whereas if you use interface the definition is props which is a reference to the object so anywhere you see it it'll actually be um declaring the type as props itself oh okay like i don't know if that makes sense it's really it only comes into play like in certain places when um you are referencing this this type in like a parent that's using this component it's um it's it's really convoluted um so um interfaces so both of these things can be extended in certain ways there's there's like different ways to extend the prop so if you wanted to declare props and then add some more properties create you know a new interface that had uh more properties to it there are ways to do that as well just different syntax so like really it's like choose your choose which one you you want so gotcha i always use interfaces um always i always get this question from people who actually have used it and it's really really negligible the difference so generally it doesn't matter i'll say i have run into cases where it has mattered and i've had to use types so there were some situations where interface didn't work however i like defining them as interfaces just because of the syntax around extending and defining um that way nice and i just saw um orta from the i i orto you're still on the typescript team right um or to just dropped a link to the differences between type aliases and interfaces probably could explain it much better hey this has been expanded before this used to be a two line two sentence explanation now there's like way more def explanations so this is great nice nice nice yeah thank you very much so we'll make sure this ends up in the show notes as well it's been linked in the chat um but yeah so okay so i'm this is all starting to click to me right and i'm and i'm starting to see the benefits of like why this is useful because what i want to show is is usually where i start to like notice when things don't have typings is if i come out here and i'm like let's create link.tsx and i'm gonna drop all this in here and i need to import react from react um okay so then i will export default link yeah link all right now i'm gonna come out here and let's import link from link and okay so now we've got this link but like i don't know how to use it so if i if i take this one out right and then i'm going to come in here i'm i want to just like okay i'm going to use my link and now what do i do hey look at this look at this beautiful definition right in line of how to use this thing and then um it'll show me that i need things like that is really cool i need good stuff exactly so uh all right i need url and children so if i start typing and i think right i can even um or maybe that's not going to work for me if i come in here what's the isn't there a command yeah there's a command here where like as i start oh yeah you type in you just you see the list up there right there yeah right so what i what i did you can specify is i hit space and then i hit control space and it shows me these are the things that we can put on this yep that is just so their types their types too yeah like how slick is that that that just works um so anyways let's do something additional additionally cool okay um and if you go into the link component let's add a um a variant prop right variant okay yeah so we'll call the variant what um regular so put string the string regular and then a pipe and the string dark i don't know just as two options so these this is a this is a union no yes this is a union two um values so we can say variant can either be regular the string or a very variant can be dark the string so um let's make it yeah let's pass it in we're not really putting it anywhere but that's fine and now if we go back into app.tsx and you start typing in variant oh cool it'll tell you these are the only two values you can pass in for it like oh and it's wow oh look at that all complete yes that is no okay all right the integration in vs code is amazing that is slick all right you got me sold i'm into it um so that is that is extremely cool that that just worked and now it's telling us we're missing our variant okay senior variant pass it in so we can add our variant get that regular that works for me and we're not using it but that's okay we just wanted to show you how it works um i mean this is like this is really slick right i feel like these are the sorts of things that it's easy when you look at typescript to just go i don't care if my javascript is type safe and i think that like a lot of times where we're thinking about that at is at the very last stage of writing javascript and i think we forget that like there are layers ahead of this where we've got components they're going to be used by other people we've got node packages or other libraries that are going to be exposed and someone's never going to see the source code so how do we you know i okay i can write a great readme and i can show all the use cases or i can add a type and it'll auto complete yep exactly uh which is this yeah it's just self it's like what i was saying again it's like writing docs versus tooling and typescript is tooling it forces all that stuff gives you all the documentation for the most part whereas you don't have to write it so it's keeping in sync all the time yeah that is that part too i think is interesting because it gets back to the idea of like you know you said earlier if you write docs either you have someone whose job it is to keep those docs up to date yeah or you have docs that steadily get out of date um and so it's it's really nice to to know that you know just by writing your application you are communicating clearly about how it's supposed to be used yep exactly um there's something else cool i wanted to show uh yeah this isn't specifically react but it comes in handy so if we go back to our link component and we had one of them that was optional class name yes so let's say inside of the component class name we wanted to [Music] let's declare a boolean which this is actually will be good so let's declare a variable above line 19 that's like has i don't know or is is what what class name are we passing in we're passing in like app link okay so let's say is i don't know something that's which oh how about has has underscore or has does it have a hyphen in it it has a hyphen yeah okay has hyphen let's just do that okay okay so if we were going to do that we would say class name dot includes contains i always forget which one it is includes hey so this already was awesome it auto completed that because whoa whoa look at this telling you i'm telling you i'm telling you so here's a here's the thing it knows class name is a string so it knows all the methods that strings have oh dang so that's you you already skipped over the fact that it showed includes for you yeah right like and then it knows that class name is can be undefined yeah so this is all the things that string have this is wow so i was like is it includes is it contains i can't remember oh it includes and y'all are seeing that it's like already got this uh this null check in here yep it's already got that because it knows that class name is undefined bam did it for you it saved you from your eventual eventual oh undefined um does not undefined is not defined yeah can't can't call method includes of undefined or whatever it is yeah like yeah yes and that is one of those things that we would of course you know like knowing me i would have written like this can never fail [Laughter] i mean we've all seen that comment when we're bug hunting right this is impossible and then it's inevitably the thing that takes down production and then now uh has hyphen is already typed as a boolean so if you hover over it it's now a boolean or undefined because it right in that case okay um so we didn't actually have to type but provide a type for what has hyphen is yeah that's typed inference that now tells us that uh has hyphen is a boolean or undefined that is great super slick and then is it smart enough that if i were to do something like um this would it guess what why a boolean now oh my god okay all right okay i'm switching everything to typescript tomorrow yep okay so i can figure all that stuff out so i forget what the term is uh for this but it knows that once you do a check that within that check that existence check within that it knows now what the type is you have proven to it that it cannot be undefined that is super cool so yeah man that is wild okay so i'm i mean i i i i'll be honest i have been lukewarm on typescript and i've been lukewarm on typescript for one very particular reason which you kind of addressed right off the bat which is that when you have something like typescript and anytime it gets frustrating you immediately escape to any it's like well why bother right and so so that to me has always kind of kept me from from putting it in i've also seen people go through some pretty intense gymnastics to write types um and it seems like they're they're playing like the the type golf game as opposed to shipping code yes yeah and so i i i think those have always been my major pushbacks right but what i'm seeing here is that if we're thoughtful about how we write stuff and and we're putting these things in especially to the components that we're shipping to other developers or to the to any code that we're shipping to other developers the the speed gains that we're going to get through the code catching these errors before i even hit my browser yeah even before i do local development right i can write this code without a dev server running and i'll still catch a lot of these errors way before i save the file that to me seems like that's enough of a speed boost to make up for the the initial slowdown of of having to write these types yeah yeah exactly and i forget who it was that said it now at react conf this was like three years ago said if you find yourself struggling with writing types or basically developing your types instead of developing your app maybe the code you're writing is too complicated like it's kind of a sign that maybe you should simplify your code because you're trying to do some things because when you're signing up for typescript you're signing up for your code to be more strict so you won't be able to do everything you could before so that's the kind of gotcha so especially when you are transitioning existing code from javascript to typescript is when you will find that case because you wrote it in a way that oh yeah this will definitely work in this case i don't have to i know that by the end it's going to be this type um sort of situation and that could be hard for typescript yeah yeah yeah i mean this is this is really really nice um and also quick shout out thank you pilo for the sub i really appreciate that seven months that's amazing um vivian says cassidy is going to be unhappy about this that is true cassidy is has also been lukewarm on typescript i don't know i think if she watches this i think she might start under the video yeah yeah yeah and you know she she can't get away from me she's got to work from me so i yeah now i'm i the call is coming from inside the house cassidy you're in trouble now um okay so uh yeah i mean man this is this is really really interesting and and uh yeah mousha is in the chat he says that uh you know webstorm and intellij all have great integration and typescript and and you know we've talked about that a little bit earlier um you you can find plugins to make typescript really friendly i think like you've got like i think codepen has great typescript support now and like code sandbox and the online editors too um so i think like we're starting to see that that typescript is feeling less like an add-on and more like the first thing that any javascript ide thinks about yeah it's getting there because as we just saw like this makes it feel like the ide is magic and actually this is not vs code this is typescript right and vs code just hooks into it so it's it really it's like a big power up for an ide to to have typescript support i think so i totally agree excellent okay so what if uh what if we do find ourselves in a complex situation right so if i'm uh like a situation that i find myself in is for example i have uh let's say i have a component maybe maybe what we can do is we can just create a new component and um and we can talk through what i would find myself doing so so let's say this is a complicated um string generator right right and so what this thing is gonna do is uh this is going to take a few things and turn them into like a url in a way that uh that i ran into this and this is a real world use case is um are you familiar with cloud and airy yeah so i just used it thanks to you oh that's right you just did the social cards yeah yeah oh man okay so these these are this is cool what's uh where's i think that tweet is up close to the top right should be close check these out right these uh these are auto generated and they're they're using cloudinary which is really really cool um but so to generate a cloudinary link you have to like add in all these settings there's text there's there's sizes there's all this stuff so what i found myself doing was i would have this like uh config object and in my config object i'm doing something like i've got uh we'll say you know width and height and um i can't spell that a height and then we would have uh let's say like crop type and then you've got some other things so you've got your text right and then in your text you've got um you know the the font family we'll say we'll just make this family size and weight okay and that's probably complex enough but as you can see this would get like more more complex as it goes right so you end up with these these pretty complex types here so if i wanted to write this i feel like i wouldn't be able to i mean maybe i can if i so if i just come up here and i go interface and then i would say um complex config yep complex config and then i get my width and that one's going to be a number number yeah height would also be a number number yeah crop this would have a bunch of things but we can say like fill or thumb or something like that um and then my font i can't i can't do this right you can do that i can do this like is this this is working yeah so that's a type alias it's just not doesn't have a name but uh that's just like an inline type there so okay what if i want to do a range so like i have um i have like a font weight can be any number 100 to 900 100 900. okay let's i don't think there is a utility for this but let's check so if you type uh or search for typescript utilities oh look orta is telling us that's a mapped type i think that might be depending on the prop value change other props in the same interface to optional or required oh so that that's um like if we added the last one oh he's talking about something else yeah he's talking about something else which actually would be kind of an interesting thing because there's another thing we could do where instead of a width and height we provide our aspect ratio right and so that would give us a whole other thing we could look at but okay so i've got util utility types is that what you want me to do yes yeah so these are some helpful um types if you but i'm not sure if range is in there i haven't ever seen range so um obviously you could the short of it orto was not listening but he is now we're we're trying to figure out how we would do a range like if i had a variable font i can enter any value between let's say this variable font has a 100 to 900. um yeah a range primitive there i don't think there is a real range kind of kind of like low dash range okay so the worst worst worst worst worst case scenario is to use a union so like 100 pipe 101 pipe 102 pipe 103 right and that will work um but um you but you could you could you could kind of uh yeah for it to verify i mean it's it's not how does that hold on orts is showing us something so you could yeah if you defined it if you defined it this way then you would have your code verify that it's between those two numbers so i'm doing something so um you it's a it's a tuple so it's a um if you do if you do um well there's it's there's a utility type for tuple i believe but if you wanted to define a an array of two numbers and you don't need to name them you could just say number number um that way so you pass in basically the bottom number and the top number and then you would verify that it's between those two numbers that are passed in but i can't really you're not really saying 100 or 900. i okay i understand well and that's okay like so for this particular case we could probably just do like a you know yeah if it was like that then it could be between them yeah but i think they're these these are the type of things that typescript is is adding in newer versions like even since i've been using it over the past two years i've seen more of these types of helpers to solve uh these types of problems gotcha yeah and i mean and this is like this is not really that big of a deal right because if i if i go in and i set it as a number then i can immediately say like if you know weight is greater than or less than 100 or greater than 900 know there's a problem so like i can still write logic right so we don't need typescript to solve all of our problems it just won't uh it won't catch it immediately for us right yeah okay it'll be nice if that was prevented that you couldn't pass in zero but um as far as i know that's not possible yet yeah yeah so i think like this would be fine for standard font weights it wouldn't work for variable font weights but that's you know variable fonts are still new enough that i think that's that's fine um but so okay so this is actually new to me i thought that you couldn't do this uh yeah you can do it so that's okay so that's actually really interesting so what i what i'd be able to do down here then is i can just say complex config i did that you put the you do that after the you const config colon complex config yeah got it but that's obviously not a valid object right so i would need to like actually set these in here and uh we leave that out because we don't need it and then this one should autofill for me it does uh and then you know we could set our our family to but see like you just glossed over the fact that that auto completed for you i know right it's like it happens so fast it feels so natural once it's working um and this is like this is really powerful stuff because the thing that i think is really interesting about this right is so if we have um like let's let's assume that this was actually going to return something like we'll we'll have a const link gen and it's going to take this it's going to take this complex config so i can drop that in there and then what that's going to return for us is um for now probably could i just do something like this can i do this and then like you could do that we could just return for the sake of debugging uh just json stringify the props [Music] and then export default link gen and so now doesn't like what oh react must be in scope that makes sense okay so now i can we can get rid of this one and my props are here so then when i come out here and i try to use this complicated complicated okay did i call it complicated or i think i named this very poorly i named it link gen and jeez i did this all wrong [Laughter] oof okay uh please don't judge my naming this was a live stream okay um okay so i've got my my link gen and then in here if i hit control space i get all of my my setup so i'm gonna do my job right and then this one it's auto completing for me phil and then here now what if i do my font how does that work like is this gonna oh look at it go oh my god that is amazing all right and so then if i try to put in the wrong value it's gonna say nah that's a string you gotta you gotta make that yeah you gotta make that a string wow this is so cool that this just works oh look at that too as i do it it pulls out the the values so i've already used family so now it's telling me i've only got size and weight left and so we'll say the size is 100 and now it only shows me weight yep hot damn then it's going to be i can't remember if you still left those call those dot dots inside of the definition of i don't think i did um i think i pulled those out okay so then we've got our height and our width and all of these are are required um so what was left oh no key so yeah if i say he's always there just for you but but check this out that's the case and so now if i go back and i look there's our object and without having to go look at that component to figure out what i had said because this is complicated like we did a lot here there's no way that i would have been able to remember all of these props right i not just had auto complete yeah exactly dang that is really cool you can though add js doc to this um so i don't know if you've used js doc before i once upon a time yeah so if you go back into complicated string generator dot tsx um let me just drop it this doc is kind of like what i use um when i can't use typescript because it almost gets me there with typescript okay but anyway if you you know put a line in above line four and above line four like here yes right there and you say slash like you're doing a comment so slash star star two stars two stars yeah oh and this is right now it's already like oh hey look it's just comment yep so enter um and then now you can give a definition for what with this what with is so just tell me what the width is just like any amount of it's a string so just the width of the image perfect so then now we go back to our app and you hover over with yeah it tells you there the width of the image that okay all right this is amazing like this is amazing right because i i feel like this is what i always want comments to be um but i like i know myself right and i know that that i am probably you know in the the grand scheme of people who are willing to like open up node modules and dive in and look at what's going on in there i'm probably in the in the minority of developers who get excited about that right like i'm like let's go find out how this thing works so yeah i still never ever ever see these types of comments unless i've hit just a head scratcher of a bug so being able to surface those comments to me in context is that is legit that i that is incredible so like you're saying like when you're building something that other people have to use like this sort of thing is invaluable to to be able to use a component like that linkedin is now so much easier to use because you've added that in there yeah um okay so uh one thing that we haven't talked about that might be worth mentioning is what would we do if we had a uh a default value like if i know that my font family is going to be like arial by default okay where do i declare that and like will typescript communicate that back yes so okay what we can do is go into complicated string generator and so the way that so in prop types that's it's dot default props right you add that to your component you say dot default props on your where did i do this so this this would have been without typescript i'm just saying this would have been link gin dot default props equals and we would specify this object right oh man i haven't done this in so long i always end up doing it like uh like in the the props themselves i do like the es6 you know name equals value yeah so that's basically how you do it what you're saying is is is how you do it so you put it in you would put it in here in the es6 definition so we would have to break it out that's and that's fine so we can take all of this and we'll just uh do stuff take these out turn those into commas uh font here take these two out as well yeah if you wanted those all to be individual right and then this is going to be ariel well it's ariel unfortunately i have to do that because i picked the hardest one to yeah um but so then if we take all of these we can copy those and just drop them in here so it's actually going to be family size emily yep okay all right so so now what i've got is uh we're still using the complex config so we know the types of these right they're all they're all figured out here um but you're so you're saying that now if i go out here it should just tell me uh yeah so if you obviously if you don't well it will default it for you um if you go to font if you hover over font let's see um let's see actually i'm trying to think if it will tell you it will default it for you and that's now the default value if it's not specified oh well we didn't we need to make font um or which what was it family also optional up top so in our definition there make it yeah make it optional there okay and yeah let's see what it will tell us it doesn't tell us what the value is okay do we do we have to like double declare it like do i have to put it in here or something no no no it doesn't like that it hates that no no so it will default it in the code for you but i'm trying to think if there's a i know there's one way you can also use jsdoc to tell you what the default is um in a documentation way but it's not that's not as you then you have to double declare it right right right so it doesn't pick it up from at least it's not seen like it picks it up from the code it looks like we would have to uh js doc at default it yeah um yeah okay but that's that's okay so so to do that we would do like at default yeah ariel yep and then here you would show that's when you're delayed typing in family there you go got it and then it shows our default is aerial so i could just leave that and then i'd be like oh okay i don't need that i skip it right and then it just works there's our our default family despite not having a family declared um i mean that's that's slick i'm into this uh so and and like if that's the most complicated thing we have to do is is pull out defaults to be auto completed for us like that's pretty yeah for the for communication to others yeah yeah and and really like some of this stuff is important to communicate like this one maybe not as important to communicate [Applause] because you know a default is the default right and if you're building a component system probably the last thing you want is somebody changing the font family so that's how you end up with comic sans yes [Laughter] exactly but uh but i mean this like i feel like this is really good because it it um these are the sorts of things that i think are hard to get right through strict communication like person-to-person communication and and this goes back to what you were saying earlier about uh tooling over docs right okay all right when you first said that i was ready to raise an eyebrow at you but but now that i'm seeing it in action i get it yeah yeah people people continually raise eyebrows when i say that because i love docs i love docs for the react docs that explain how it works how you state works and everything like that but the kind of these sorts of things i prefer tooling yeah yeah well dang and this is this is really cool i'm going to make this slightly easier to read just by adding a text align left okay just because it was it was kind of messy yeah there we go that's easier to read there we go i'm wondering what was going on but uh yeah this is like i i love the um oh it's saying types for tooling and i think that actually encompasses my my thoughts around this too i i think if i if i was to kind of bundle up my emerging philosophy on typescript because i uh i have shipped a couple npm packages where i wrote it it's not written in typescript but i like export a type so that i get the autocomplete so it's it's sort of like a middle like sort of there um and and what i'm starting to get toward what i'm starting to feel especially after seeing this is that typescript is the most useful when it's the the code under the code the kind of devops stuff that you're talking about or if you're building component libraries or if you're building like shared resources um i think if i was like if i'm working on my personal site and it's a component that doesn't get shared i'm really just writing components because i wrote the site and react and that's you know whatever it's the home page i probably care slightly less about it because all the code's in the same file um but i i i can already see what you do yeah i mean we we indexed on like the props and communication between things like uh that's where typescript shines the most for sure at least in terms of react but things like what we saw with classname.um oh yeah where it picked up the like class versus class name yes well no the the if you go back to our link can you go back to that component again yeah uh includes like the clock yeah 19. like those sorts of things typescript really helps with as well even though it's your like internal thing so um we focused a lot on on the props for sure um but there are other aspects of it too that we could get into when we start talking about hooks and how those things work and how it helps with those so i mean we we're we're a little short on time we've got like maybe maybe 12 minutes um do we have time to look at a hook because that would actually be really interesting yeah we could do something with you state cool um let's do it um we can probably let's just let's just drop in a new component and we'll we'll do like a counter component because that's that's one that i i know we can build quickly and it's yeah yeah so we import react from react and then we can export default function counter and that's going to take in whatever props it takes in we can leave that blank for now and it's going to return let's do a button and we can just do like a clicked we'll hard code it for now okay so that's the the structure of our button and then we'll go in and actually you know what so that we can see the interface work why don't we uh i guess we're not going to do that really we're going to have uh we're going to be doing it with the the thing itself so let's get the counter in here yep this would be counter i think wait did i do it as a default or not default okay i'm seeing someone in the chat share out the the typescript cheat sheet for react it's amazing it has like it has all of these um kind of recipes for solving different problems in in react so it shows how to do various different stuff with props um even more advanced things like oh this prop can only exist when this other prop has been defined like those sorts of uh interesting situations but let's just give a double shout out for that in there all right so you're actually state yep okay so then i'm gonna drop a count in here and then when we look at this we've got our click zero times so then i'm going to do a uh increment and that'll be set state or set count count plus one i think that should that should work we'll do an on click equals increment there we go we have a a basic counter in place so to type scriptify this we don't have to do anything what it's already type safe oh dang i feel like i feel like i was i was horn swaggled just now oh yeah look and it so it inferred everything it knows that we're returning void even though we're returning a function like that that's cool it's that's the return value of set count is void right but anyway but then it pulled that across to void is really slick hmm oh interesting so what what's happening is that you state you're passing zero so then it infers that okay the state you must want is zero or a number rather so that's what count is set count is a function that takes in a number yeah and and then everything works from there so it knows that count is zero so if you try to do operations like a string operation on count wouldn't work if you tried to pass a string to set count because it's gonna complain like hang wow okay all right and where this actually becomes most helpful because you know how sometimes we pass the this like set count to another component that we've defined right and it's gonna do whatever options so like when that component does its own blank event it's going to call this function well we ensure that those functions are the right types so we know that yes this is going to be called with the string only one string value and it's not returning anything so we get to we get to have that type safety so if that component decided to change his interface and add you know switch from a number to a string or add two arguments all of a sudden things would break so um we can get into that situation and see um so work to get us into that situation immediately i i moved the used state up a level and now we're passing values into uh into counter yep so this is giving me it's complaining at me so we haven't defined what those are oh man we missed like my most favorite part of typescript and props oh dang which we get to do now yes so let's define our interface i can't believe i forgot about this sorry interface props for counter interface props yes and we have to define the increment function oh i can't believe i missed this so increment is a function right so it's a function that um what is it it's going to be called with nothing called with the new value how are we it's currently called with nothing okay so then we will define um you just pass in empty parentheses it's like you're like you're defining an arrow function so i got empty empty parentheses uh and you do equal or arrow and then void so that's the definition of increment okay so as opposed to react prop types where you just say hey this is just some function that's going to do something you actually get to specify what the arguments and return value of your function r which is cool um so let's so yeah so now this is perfectly um type safe right so if we go back into app we're now saying that the increment function we're passing to it it has to be um empty parameters and return void which is what we're so if i were to do something like um you know take the count and return hooray it's immediately like well you have to define what so yeah you have to define let me do this incorrectly properly okay so this implicitly hasn't any and that's i assume because it's or why doesn't it because because you are you are what's the word providing a new variable called count um for this not using that variable count because you're making it the argument of the function oh oh what's what's the what's the word you are like redeclaring and i'm out of scope yeah so you have to you have to provide a very uh type for other so let's just say other is um a string okay okay and now it's mad at me so i can't i can't oh yeah because it picked up that other string returns a string because that's what's happening and it says no no that's not what increment does increment doesn't take any arguments that is and then this one if i try to do something else i guess it's still mad about this so let's okay once i fix that error then it's like nah you can't do that either yeah so what if we switched things up inside of counter and had the increment function pass you the new value of count okay so we want it to return a number then no not returner number it's called with a number oh oh we want to like pass in like this yep okay so now inside of the implementation of counter we're going to define um what should we call it well let's rename increment to i don't know on increment maybe okay so this is already complaining right because it's saying on click doesn't take a number as its parameter yeah it um so you're the way you're doing it is already incorrect right it's already it's helping us out so let's create a variable or a function enter function inside of here that will um call increment yeah let's see a handle clip perfect like something like that yes increment with count plus one handle click and this is gonna be count plus one yep okay okay so now we're calling increment with the new value right yeah so now back here our increment function is incorrect or it says oh actually technically so this is interesting technically it's okay because we're choosing not to use one of the the arguments in the function so this is one of those gotchas okay where so in javascript you can have a function like on click actually it's just if you go back to counter right so i'll quickly explain this so you can have a hand your handle click right technically handle click is past the event right yes e but we're choosing not to use it and that should be okay that shouldn't be an error right right so and if you go back to app right now with our increment function we are effectively choosing not to use the value it's being that's being passed to us which was new new count right so that's why we're not getting oh i need to make that new count don't i so um what's your name what you name it here doesn't doesn't really matter um it could be anything okay inside of there okay so let's go back to app so now our increment function on line 11 takes new count and calls set count with the new count there okay and new count we have to tell it it's a it's a number okay okay so now our code um works correctly however we could just pass set count directly to increment like we know we should be able to to do that um so if we just do it straight like this yes everything compiles correctly because that count is a function that takes a number and returns void and that's what we're passing to it so everything still type checks yeah correct yeah yeah well i mean that's that's pretty slick and so now we and we also know now that like anything we're trying to do here is we can assume even if we don't get the result we wanted it's not because we wrote the code improperly so so we've moved away from wondering whether we've got the language right to wondering whether we've got the logic right and i think that that's like um if you've ever watched somebody who is like new to a language or new to a musical instrument or new to a spoken language there's there's so much cognitive overhead that goes into just making sure that we're doing it correctly you know like if you watch me dance you're not watching me dance you're watching me try to remember if i'm moving my foot to the right place that i was told to put my foot like i'll spend so much so much energy on thinking about how to do the thing that i i really don't have time to to determine whether or not i'm doing it properly yeah and so i think that one thing that typescript is giving us is that it's it's making sure that we don't have to wonder if if the problem is that we're doing the language wrong or our logic is wrong it it takes that part out of the discussion and it's just one less thing to to stress this out yeah that's a good way to put it i like that let's see me dance let's not see me dance um all right so uh unfortunately that's all the time we have so ben where should people go if they want to take next steps follow up more from you um where where would you like people to go from here cool so i've got two places to send uh folks and then i've got a a special giveaway if that's cool oh dang yeah uh yeah so on twitter is the best way to reach out to me for you know quick communication so i think you had it up there already so ben nvp is my twitter handle so you can go there i tweet about things i tweet about tech i tweet about basketball as well a lot um although that may die down because the nba finals are almost over but i tweet about lots of different things because i'm a person and uh the other place is my website so ben mvp.com and there i have a blog where i talk about um that's all tech my site is all about tech and things like that and list of the speak engagements i have videos there you can read those up top but what i want to mention is the mini shops uh there so if you click on that in the top left so those are short workshops that i um host um every once in a while so there are many shops because they're mini workshops so as you can see here i have a number of them one being typescript for react developers so it kind of goes into more detail as to what we are just you know talking about right now it's coming up at the end of october for those who are interested and hands-on workshop and stuff like that so what i want to do for your live streamers so anybody who's interested in this workshop i'm going to give away one free spot nice so how do we get it how do you get it so if you can um share the link on twitter please at me so i know that you shared the link yep so share the link on twitter and i'll pick one person to give away a free seat and that is this this link here um so share that link tag ben mvp and you might be the lucky winner and if you're not the lucky winner go anyways bonus points bonus points if you can share a selfie of you and the live stream oh oh yeah definitely do that all right so we are out of time ben thank you so so much for hanging out with us today we learned a ton this uh i feel like you kind of turned the corner for me on on typescript you know what's funny is that i didn't even know that i had to do that but i'm glad that i'm glad that that worked out uh chat thank you as always for hanging out with us make sure you go check out the schedule and see what's coming up we've got some really fun things coming on uh natalia's gonna come teach us how to do view and apollo next week that's going to be a blast we've got uh cape hayes coming on to teach us about static sites insanity.io uh sanity is what power's learned with jason.dev actually um that's gonna be a ton of fun so go check that out uh remember thank you again to our sponsors netlify fauna uh sanity and off zero who all kick in to make the live captioning possible that live captioning is provided by white coat captioning and with that i think we're done yeah uh we're done we're done you know this was my first live stream ever you nailed it and i never would have guessed i've done live talks and live workshops but live streaming twitch first time had a blast nailed it all right so chat stay tuned we are gonna raid uh ben thank you so much for your time we'll see you next time alrighty bye you

Channel: Jason Lengstorf

Views: 5,613

Rating: 5 out of 5

Keywords: react, typescript, javascript, reactjs, Learn With Jason, power up

Id: 4PduzmHf1YQ

Length: 91min 59sec (5519 seconds)

Published: Fri Oct 09 2020