How to use TypeScript with React... But should you?

when i started this youtube channel four years ago most react developers would have laughed at the idea of using something like typescript you should try it nah bro like why would you take your beautiful functional javascript and bloat it with a bunch of type definitions that make it look like the real java i was very skeptical of it myself when i first started using it in an angular project in 2017. now maybe it's just the stockholm syndrome talking but after using it i've never wanted to go back but i don't think i'm alone because it was the second most loved technology on the 2020 stackoverflow survey in today's video you'll learn everything you need to know to get started with typescript and react but more importantly we'll talk about why or why not you should use it because there's a good case to be made for both sides of that argument if you're new here like and subscribe and become a pro member at fireship io to get access to my full next js react course to decide whether or not you want to use typescript let's take a look at two different projects side by side one with typescript and one without there are many different ways to add typescript to a react app in this case i'm using the create react app tool but specifying the typescript template the docs also have instructions for adding it to an existing project or you can learn how to set it up in next.js in my course if we look at the file system on these two projects side by side the most obvious difference is that the typescript project has files ending in ts or dot tsx but the weird thing is that if we look inside one of these files the code is exactly the same as the javascript file and that actually brings up a good question what is typescript if my code is exactly the same typescript as a language is a superset of javascript that means vanilla javascript is also 100 valid typescript in other words it just adds extra optional features on top of regular javascript the relationship between scss and css is the same as typescript and javascript and that's really cool because it means you don't really have to learn anything to get started with it but here's the catch browsers don't know how to run typescript code what is this crap which means that we need a compiler to take our typescript code and transpile it or compile it down to regular javascript in our ts project you'll notice a special file called ts config its purpose is to customize the behavior of the compiler which itself is able to take your typescript code and convert it to any flavor of javascript that you want to run in the browser compilers are really cool because they allow you to use special features and modern javascript syntax without having to worry whether or not that code's going to be supported on old legacy browsers the drawback is that you now have this giant configuration file to worry about normally everything just works but when it doesn't you have to google all these different options and figure out what they do many of the options are related to how strict typescript is with its type checking rules and i'd highly recommend making it as strict as possible by putting strict mode to true that'll make your code initially more difficult to write but in the long run it makes refactoring and collaborating with other developers way easier another important option is target which is the flavor of javascript that typescript will compile your code too es5 is the 2009 version of javascript but your codebase can write 2021 javascript sounds amazing but you really need typescript to do that under the hood the javascript version of create react app uses a compiler called babel that does the exact same thing so the bottom line is that you can write modern code in both a react js or ts project now one thing you'll often hear typescript developers say is that it helps them catch silly bugs in development before they become huge disasters in production let's take a look at an example to see if that's true or not in the javascript project i have some state that starts off as an empty object now somewhere else i might reference that object and try to access a deeply nested property on it that looks like valid code but when we run the app we get an error that it cannot read that property bugs like this get shipped to production all the time but if we try to do the same thing in typescript it's like a goddamn precog that lets us know the error exists before the app even runs i really appreciate that because i make silly mistakes like that all the time but keep in mind that it doesn't replace test driven development it can detect poorly structured code in advance but can't detect bad logic but now let's look at the most important feature of typescript its type system and the pros and cons of using it if we build a functional component in javascript you'll notice that it has a type of jsx element in addition if we reference props they automatically have a type of any that's a pretty vague type definition overall in typescript we can be much more explicit about what our code actually is react has a built-in type called fc which stands for function component and we can assign that type to the component using a colon followed by the type that tells the compiler the shape of this code which will throw an error for anything that's not a valid prop and autocomplete everything else by default the only known react prop is children but we can define the shape of our own props using a typescript interface an interface allows you to define the shape of an object by matching a property name to a type like here we have an interface called cool props that should be an object with two properties one of which is a number and the other a string in its current form the interface will make these properties required on the object but you can make them optional by adding a question mark after the property name we can now take this interface and pass it to the function component type by wrapping it in angle brackets this is like saying we have a function component that also includes props of its own custom shape and now we get really useful intellisense on any props when working with this component and it also guarantees that we use the required props when working with this component in jsx however that did come at a pretty significant cost we've added a lot of boilerplate to the code base without adding any new functionality for the user now it is possible to bypass type checking whenever you want by simply adding the any type that allows you to opt out of typescript but also negates all of its benefits it's also worth noting that typescript can provide automatic documentation for your code because your editor will automatically pick up the type definitions so anybody using your code will get intellisense on the shape and purpose of it and that's way way more efficient than having to go read some documentation online now in many cases typescript can automatically infer the type without you having to add any additional code to the code base for example you might want to strongly type the use state hook however the angle brackets may not be necessary here because if you have a default value of a string you don't need to give it an explicit type it'll have a string type automatically and if you try to change it to a value that's not a string you'll get that precog error in vs code so that's pretty nice but is typescript really worth it it's managed by microsoft enterprise loves it but some guy on the internet said it only catches 15 of bugs while airbnb said it catches 38 percent of bugs would you rather write more code or would you rather be more confident in the code you do write would you rather look at your documentation on a website or would you rather have it be automatic in your editor would you rather write faster code now or deal with chaotic refactoring later do your friends and family love it or do they hate it these are all trade-offs that you need to think about but in my opinion the answer to should you use typescript with react is obviously

Channel: Fireship

Views: 256,910

Rating: 4.9508815 out of 5

Keywords: webdev, app development, lesson, tutorial, react, typescript, ts, ts vs js, js, javascript, pros cons, comparison, typescript react tutorial

Id: ydkQlJhodio

Length: 6min 36sec (396 seconds)

Published: Mon Apr 19 2021