All You Need To Know About TypeScript

what's up everybody how's it going today I'm gonna tell you everything that you need to know about typescript during my two years as a software engineer at Google I worked almost exclusively in typescript during my three months as a software engineer at Facebook I worked almost exclusively in typescript and while I first wrote the algo expert front-end code base and JavaScript hearing in the past six months we've actually been completely migrating it over to typescript doing all new feature developments in typescript all that to say I've got quite a bit of experience with typescript and that's what I'm gonna be sharing with you today now I'm gonna get into the details of typescript in a minute or so but I want to start by giving you a very brief summary of how I feel about typescript and here if I'm being honest I'm not a fan of typescript I'm just not and I'll tell you three reasons why I'm not a fan of it the first one is that typescript solves an inexistent problem types and JavaScript who needs them right it's not like we have runtime errors left and right in JavaScript the second reason I'm not a fan of typescript is that you know how when you're coding you often run into bugs and when you run into bugs you have to debug them it can be tedious and time-consuming typescript basically eliminates 90% of bugs it kind of takes away the challenge and the fun from coding and the third reason that I'm not a fan is that if you wanted to write Java why not just write Java instead of masking it behind JavaScript see what I mean now of course from these three reasons arises one question which is did you fall for my April Fool's joke that's right today's April Fool's that was a joke I'm the biggest fan of typescript I think typescript is the best thing that's happened to front-end development and javascript in the past decade and I got you admitted I got you I got you a little bit some of you were on the verge of smashing the dislike button if you haven't already by the way if you have unsession and if you haven't don't go a tiny bit to the left and smash of a like button and while you're at it subscribe to the channel if you haven't already I recently checked my stats and it looks like eighty percent of you eighty percent eighty cent are not subscribed to the channel that means that the YouTube algorithm is feeding you my videos it's shoving them in your faces you love them but you're not subscribing that changes today okay back to typescript okay so what is type script well typescript is a programming language that is developed and maintained by Microsoft big name and it is a strict superset of JavaScript what that means is that it's JavaScript plus other stuff and what that means is that JavaScript code is effectively typescript code and what that means is that if you have a typescript application it can have both JavaScript files and typescript files and those files can mix and mingle together and that can be really nice when you're migrating a very large JavaScript code base the typescript and you're doing so incrementally but so what does typescript actually do well it basically adds a robust type system to JavaScript if you come from a typed language background like C++ or Java or basically anything that isn't JavaScript or Python then you're likely familiar with types well it turns out that in a language like JavaScript there are no types by default that means that it's very easy to make errors in JavaScript literally errors and syntax are in your code logic passing the wrong parameters to functions and these errors will only be caught at runtime when your code is actually being executed by users in production and that can be really bad what's particularly bad about javascript is that it's very very flexible much more so than Python for example to the point where in JavaScript you can basically access any property whether it exists or not off of almost any entity in JavaScript or at least any object in JavaScript including things like strings or arrays and that makes it even more easy to have these really bad errors in your JavaScript code and like I said these errors can lead to really bad bugs in production so typescript eliminates that by introducing a robust type system to JavaScript and the last thing that I'll say about typescript before I jump into some examples is typescript is actually as of 2017 I think when I first started at Google right around that time it is an officially supported language at Google I forget what the exact name is but basically at Google there are few officially supported languages C++ Java Python golang JavaScript and now typescript that means that at Google if you're writing code in any of these languages including typescript now your code has to go through code reviews including through a readability review from someone who has readability in the given language and so now for typescript code you need someone who has typed script readability to approve your typescript code at Google and guess who has typescript readability this guy so I feel like the best way for you to truly appreciate the beauty that is typescript is for me to show you a simple example so here I've got a very simple example of some JavaScript code that's not a bug and then we're gonna look at the typescript code that catches the bug so look at the non commented out code first this function called get lower cased string as you can see it just calls the native javascript to lowercase function on the past string and here we call the function but we don't pass it a string in JavaScript that's okay because JavaScript doesn't give us but of this will cause a very nasty runtime error I actually tried to run this here in my terminal node example as you can see we get a runtime error cannot read property to lowercase of undefined the almighty cannot read property foo of undefined error in JavaScript this stupid little bug could very easily bring down an entire page in your website now let's look at the typescript example of this function it's the exact same thing get lowercase string except you've got a string type here see the colon string and here our function call has a little squiggly line in the vs code and it tells us expected one argument but got 0 if I pass in let's say undefined it's gonna say Oh argument of undefined is not assignable to parameter of type string and you can see also in the terminal if you've got the type script type checker running it'll show you in your terminal and so just like that typescript saved you a really bad bug that could have cost you hundreds of millions of dollars maybe not hundreds of millions if you ever lost hundreds of millions of dollars because you couldn't access the property foo of undefined I think I would like literally pull my hair out okay let's look at a more realistic example so I'm gonna comment out to this get lowercase string code and uncomment this out here imagine that we have this function called get human readable message it takes in a response some arbitrary API response and based on the data in that response like if the response or the API call has succeeded it's gonna return a message and it's gonna grab the message from the response and display it in a human readable way or is is gonna return that something went wrong right this is a very realistic function that you might have in your JavaScript code as you can see here I'm calling this function with some arbitrary API response here I'm gonna console dot log the result of this can you catch the bug there's a bug here pause the video see if you can catch it alright did you catch it the bug is that here my response API response has the message embedded in this data object whereas up here in the method I just call response dot message rather than response dot data dot message now the tricky part is that if I execute this code let's save here and execute the code you will see that this does not cause a runtime error because in JavaScript you can access a property that doesn't exist on an object we're not doing response dot message and calling it as if it were a function that would cause an error or we're not doing something like response on message dot foo that would cause an error all that we're doing is response not message so it doesn't cause a runtime error but it's still a bad bug and you don't want to have undefined in a human readable message in your production code so how does typescript fix this well we're gonna uncomment this code or comment this one uncommon this one and here as you can see we've got a little bit more verbosity because we have types but it's much better we avoid the bug so our response is of type API response here we've typed out this interface that says oh I've got a data property and this data property is an object that has a boolean for has succeeded and a string for my message and here what do you know it tells me property message does not exist on type API response it exists on type API response dot data right now it disappears but not before and similarly imagine I change of this message here in my API response that I'm actually gonna use to call this method imagine I change the message to be I don't know let's say undefined oh I'm gonna get an error API response that I tried to pass in has a type that's incompatible what's the underlying cause well type undefined is not assignable to type string and hopefully here from this example you can start to really appreciate this sheer unadulterated beauty that is typescript now I know what you're wondering at this point you're thinking okay this looks great sign me up but does this work well with popular front-end frameworks like angular or react and the answer is yes of course it does at Google I worked in angular 1 and angular 2 and we worked in typescript it worked splendidly that Facebook can react on algo expert and react so here I'm going to show you a little bit of algo expert react code specifically Redux code and also some react component code to show you how typescript meshes really really really really really really really did I mention really well with react oh and by the way if you're preparing for your coding interviews or your systems design interviews check out my company algo expert do use the promo code klamath CLE infer discount on the platform we just released a lot of new stuff new content new features a brand new coding workspace all written in typescript go check it out you're not gonna regret it but so back to the redux typescript code here as you can see I've got three files actions types and index this is stained Redux code but as you can see it's all typed out I'm not gonna explain to you what Redux is if you're unfamiliar with it I would encourage you to just look it up and probably follow some tutorials but so as you can see everything is really well typed out for these particular Redux files and what's really nice is that means that in parts of your code where you could really make nasty hard to catch errors like for instance here typescript will catch them imagine here I did something like data equals action dot payload and I misspelled payload boom typescript is gonna catch to that imagine I said payload dot food boom type scripts gonna catch to that imagine I said is loading equals 1 instead of false boom type scripts gonna catch that imagine I said that I'm expecting another action here instead of get certificate info success I'm gonna call it debt certificate boom it's going to tell me that's not one of the compatible actions that you typed out it's really powerful works great with Redux and now finally let's look at a react component here the certificate modal in react components you pass in properties right well with typescript you can actually add types to those properties so here as you can see we define the props up here very simple we've got a boolean and an arbitrary on close function and here our modal certificate modal has these props as the type of the properties and if I were to try to access some other property like let's say test it's gonna air out and similarly is in the parent component of this component I instantiate the certificate modal but I pass it in the wrong property or the wrong type for a property typescript will catch it and that's really really really helpful oh and the last thing that I want to point out is that typescript also gives you this any type which is really nice because sometimes you do want to have the flexibility that JavaScript otherwise gives you the flexibility of not caring about types or moving very fast and sometimes you want to do that even type script application maybe you're migrating a big codebase or migrating a file you need to pump out of feature really fast and you're really stuck on a particular type and you want to kind of skip it altogether because you know that it doesn't have any errors then you can use this any type which will basically say this can be anything this doesn't really have a type and this is something that we did here this is not something that I would advise that you do all the time but it's just something that's pretty nice so at this point I hope that you're convinced that typescript is amazing I hope that you have been exposed to its beauty through this video if you're interested in learning more about typescript there are tons of tutorials online you can go look at the typescript documentation they've got a cool typescript playground to see how typescript Sands compiles into JavaScript there's tons of stuff out there go check it out if you've never done so but you are a front-end developer definitely go check it out and with that I hope you've subscribed to the channel if you hadn't already before I hope you smash to the like button I hope you have a great April Fool's Day or if it's not April Fool's when you're watching this video any other day and I will see you in the next video

Channel: Clément Mihailescu

Views: 139,468

Rating: 4.8265262 out of 5

Keywords: typescript, typescript vs javascript, typescript crash course, typescript react, is typescript worth it, what is typescript, should i learn typescript, should you learn typescript, should i learn javascript or typescript, how does typescript work, typescript and react, typescript and angular, what to know about typescript, typescript tutorial, typescript for beginners, typescript basics, why typescript, why typescript is better, typescript app, typescript angular, javascript

Id: eCZhz0JCVx0

Length: 14min 28sec (868 seconds)

Published: Wed Apr 01 2020