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

the ending was by far the best one i have seen 😂

Now I watched the full ad at the end cuz i thought the video was not finished. Genius move!

now we need one of these great videos on TDD

Coming from a lot of C# and OOP, I started with TS and loved it way more than JS. Being able to ensure a variable type is extremely useful and more readable.

That ending tho... nice one fireship

OMG. He is a mentalist. Today I started learning typescript with react.

I read a really good article by Kent C Dodds on how to write a React Component with TypeScript, and he suggests to not use the `const Component:React.FC = (props)` (as seen 4:52) syntax but rather use the `const Component = (props: Props)` syntax. Basically, the first one has a children prop even if we didn't pass one, whereas the second one doesn't. (and a few other reasons as he lists) It's a really good read, and interesting to hear his reasonings behind his opinion, I recommend it. RU-vid will flag my comment if I post a direct link, but look up "How to write a React Component in TypeScript by Kent C Dodds" and you'll find it.

No bullshit...pure content..saves you a ton of hours jumping between blogs and tutorials.I would say you have an amazing talent at condensing content and put it in simple forms.

I started using typescript for the first time 6 months ago when I switched my job and started as a react developer. I've been coding js long enough and wasn't happy that they were using ts instead of vanilla. Oh man I was wrong. TypeScript is great and everything i wanted JS to have. Give it a try if you haven't.

A few hours ago I started a university project that requires React with Typescript. This video follows shortly after. I don't know how you choose your timing but it's awesome!

Loved the ending 💙

Hmmm... What type should i use? Few weeks later *Spams any*

I must say that TS has saved me many hours of debugging, I feel that starting a project is slower but once started everything is more fluid

I use Typescript on backend and it autogenerates OpenApi documentation. And Typescript on the frontend can autogenerate http client with backend models attached for each API call. And that's wonderful

I began using TypeScript with React for the last few projects I been working on. At first a lot of frustration trying to get around all the type cryptic errors that kept popping up and adding to frustration and development time to the most simple tasks. Now with practice and expierence TypeScript has actually grown on me and all the code hinting I get from it is so nice to have. The cons are yes you have to write a ton more code especially as you create Interfaces for each component's props but as your app scales you will be happy you did. TypeScript definitely a must have for me now.

I don't get too attached to tools (languages, frameworks, whatever) anymore but damn if TypeScript doesn't make me feel all warm and fuzzy inside. The only vanilla JS I write now is throwaway/scratchpad type stuff.

Bruh that "god damn precog" line got me so hard I'm still dying 😂

This convinced me to convert my React app to TS

Love the fact that you made us think by ourselves if we should use React along with TypeScript, I wasn't expecting that. That's an enhance for your viewers critical thinking.

Great video as always, would love to see you talk about test driven development more in depth

Yes. Code overhead is a fact of life, writing more code is a reasonable trade-off for rock solid reliability through the development process. TS all the way!

It is much easier to learn TypeScript for a C# dev rather than JavaScript. Thanks for the video, man!

referencing Bukowski. My all time favorite writer aswell. Damn Fireship, you crazy.

First time using typescript is like hell, but im moving along with it. Im in love with typescript now after 1 year using it

Thanks! This was the perfect quick overview without having to dive into a 3-hour start-from-scratch tutorial.

First use js with react after more comfortable with it. Then move onto typescript 🙏🙏👍

When you come from a strictly-typed background, watching JS developers argue that types "add too much boilerplate code" and "aren't worth it" makes you question where they learned coding in the first place. To say it politely.

TypeScript with everything. It baffles me how lost I feel when I touch vanilla JS.

TypeScript is a blessing, even with React.

For people who think this video is open ended, its not. Read it yourself: "...The answer to should you use typescript with react is - obviously" 😄

Starting the week in full throttle with React + TS. 🚀🚀🚀

Sorry, but I'm too lazy to use typescript

This is exactly what I wrote on almost all typescript-related video comments on RU-vid and StackOverflow comments for about 2-3 years. I'm still really shocked about the lack of knowledge about the TS in our JS ecosystem (some people still think that it's completely different programming language to this day lol) and I'm trying to spread more practical knowledge about TS to exactly describe how important and almost "you-can't-live-without-it" thing it is for: your mental health, your productivity, developer experience, your business, and not being a masochist that need to keep track of things that normally IDE, Terminal or other tools are supposed to do it for you. Some of the myths I would also want to bust here - You do not have to explicitly type goddamn everything in your code or forcing yourself to use any or unknown type. The most popular frameworks and libraries have really well written types, where type-inference work really beautifully (f.e useState hook shown in the video), so you can almost write normal JS code and still have the TS benefits. Best practical approach to TS: Do explicitly type things only when TS cannot get the type by itself, or if you want to have more nuanced and more detailed information about your values. - Yes, writing interfaces/types for your objects may seem like an extra work to do, but to be honest... how exactly "extra" work it is? Half of the minute? 1 minute max to write all the properties and their types? Look at the benefits that interfaces give you (autocompletion in IDE, auto error-catching by marking EXACT LINE WHERE THE BUG EXISTS with red line, autdocumentation etc.) and you will not ever use this argument again - Yes, TS is the best tool for creating documentation because.. it create the docs as you go. TS contains the best tooling in the entire JS ecosystem (yes, looking at you VSCode and WebStorm) and allows you to describe your application with the ways that you couldn't normally do with plain JS. And when you have your application fully typed - it's just a joy and pleasure to continue to work with this project because your IDE/terminal shows you exactly what the values you can use (where in JS you would had to console.log it manually and check the value there which takes time - so yes - TS is the ulimate life and time saver) - Yes, TS subtly forces you to write better code, but it doesn't do this by purpose. The only thing that TS really does is just showing you the faster feedback about the execution of your program than you would normally do by running your program manually. All of the problems that can occur by using bad practices and are hidden because JS tolerates them - it doesn't mean that there aren't there. They obviously are, but TS alarms you immediately about them (and what other things can be problematic in future). - Yes, TS subtly changes your workflow entirely when writing your code. But it's a good change, because it makes you think about the design and architecture of your application first and then with those written interfaces/types just w̶r̶i̶t̶e̶ click your app by just simply hitting auto-imports and auto-completions without even looking into other files instead of "happy code" it with forcing yourself to manually checking definitions in other files - No, TS is not bad for a small projects. Even in those little ones. Remember that every time, when you are not using TS - you're shooting yourself in the foot by disabling the autocompletion and static code analysis features that are crucial for most basic Developer Experience and coding enjoyment. So I do even recommend adding TS for smaller projects too with some really basic and simple tooling to compile it like tsc, because those DX-friendly features are really the beautiful things that you can't almost live without them Thank you Brad again for spreading the knowledge in the highest-quality way 🥰 I hope that some day we all will create the beautiful Developer Experience within whole JS ecosystem. P.S - Can we expect some video about the ultimate auto-import destroyer pathology - export default? It is another unconsciously used thing by almost everyone in whole JS ecosystem that brings a lot of problems to the projects with auto-importing (yes, with TS and named exports I didn't write any single import manually for about the year or so) but for some reason still everyone uses it. Thanks again for all!

1:49 I love your video clip choices 😂

This is legit spookier than AI tbh. I think of a topic and this Fireship makes a video about it. 😂

Typescript is the reason why i love angular more than React or Vue. IDK why some people says they hate angular because of typescript. I found my best fullstack after learning Typescript + Angular : Angular + NestJS as Backend + Prisma as ORM

I thing "type" is a better use than "interface" for defining custom type that apply to model, semantically, interfaces are used to abstract implementations from "type" and "class". And you can even write more advanced types with it

Refactoring, that’s my number one reason for using TS, plus it’s pretty great in general to write, it has its flaws and the type system is definitely not perfect, but it’s orders of magnitude better than not having anything at all

Creating my own configuration (I firmly believe create-react-app is black magic) for my boilerplate TS/React project taught me a LOT. And it's worth it.

TS + React + Redux Toolkit = my favorite setup.

Started using Typescript a couple of days ago and I'm now in love with it!

Question - you mentioned how Babel replaces the functionality of the TypeScript compiler's "target" version. However, I've seen people use both TypeScript and Babel together - something even detailed on the official typescript website. Is TypeScript + Babel even useful?

they taught me java in my first year, then they teached us javascript, and then I discovered typescript. It helps me so much.

TS is one of the few creations of Microsoft that I actually appreciate a lot.

I had to stand up and applaud after that ending. Like everything that I have to do, I didn't do it, but the ending was that good.

But what happens when something better than typescript comes along and you are left with yet another dead framework webbed into your entire codebase?

As a C# developer TypeScript is my confidence booster for client-side frameworks

I like Typescript especially, because it's types are actually more powerful and flexible than classic typed languages once you get into advanced types. Though of course, without the speed benefits of runtime types.

It's funny how JavaScript developers are blown away by this and Kotlin/Android/Java developers don't know anything else lol

this made me realize how easy dart actually made things, thanks dart & flutter team

Damn Fireship, you can't leave us hanging like that with that ending! 😂

I am still in process of learning JavaScript and all the 99999 frameworks. But my first language i learned was C# and the moment i saw TypeScript syntax i imediatly fell in love. I have JavaScript just bc its really really underifined in lot of ways compared to other languages. Also the code is much more readable in TS

you never fail with the scary timing my guy

Great thing about TypeScript is that it helps me catch errors like undefined variables and missing imports without running the code in the browser.

Meanwhile when I'm just learning Svelte the whole internet is shouting at me USE REACT!!!...

It really just makes you code better, specialy when your redux state starts getting a more complex.

Ok, I like TS and I like JS. When you write code in JS, your brain moves away from static type paradigm. You don't rely on intellisense anymore. You write functions and clients that just require object and properties in a certain way and it just works. It was so hard to code JS after Java, but once you get a taste of it, it changes your perspective.

Got a "learn Typescript - full course" video suggested to me after that ending, so I guess I got my answer

I swear I could see my brain from the ungodly eye-roll that I unconsciously performed upon seeing the title. The whole video boils down to "Do you want to stay Monke or write an extra line of code that can save you tons of hours of debugging and god knows what else". To some, the answer is always Monke. But typescript patches almost all the holes of Javascript and that's why we love it.

I was just thinking since last couple of days like should i start back with react with js or ts? This helped me a lot! 🎉

JS for when you just want to feel busy but the project is never going to be finished, TS for everything else.

You are the absolute best at explaining thank you soo much!

You give a very good argument, recently been heavily considering what language I want to use good picked the other way, but the improved error notification is great and the auto documentation sold me

Hahaha, the ending!! Reminded me of Schitt's Creek Moira answering if they should extend 30 mins for daycare.... My answer "absolutely"

I love the comment section for the fact that it gives me more clarity about the topic than the video

You should avoid using FC mostly because of two reasons 1. If the component does not expect any children and still it is passed, TS won't throw any error. 2. It throws error while using default props.

Fantastic video, please never stop making them. This is fast becoming my number one place for programming related learning and entertainment. :)

My experience with very large applications was not ideal. Too many custom types, a lot of unnecessary code, usually we would struggle to find the error type instead of writing code. My personal opinion is that a mixture of proper code reviews, unit testing, JSdoc can do wonders. If you have to use TS, then I believe that for props and mapping ajax calls is useful. Again completely personal opinion.

Anybody except me immediately tried to figure out how the JS function at the beginning of the video works? 0:09 😂 Great video BTW 💙

hated it at the beginning, now that I understand it I love it! and since I'm obliged to heckin use oop is much better than js

I had to verify twice the end of the video thinking I am having a connection problem, nice one 😂

"After using TypeScript i never wanted to go back" - no truer words have ever been spoken

Typescript with react is great, especially with redux. Typing redux is a joy and it makes it even better to use

That ending 😂❤️

The real question is whether the image at the end is labelling typescript and javascript correctly. Seems like the top image could be ts, but I can see it either way and now I don't know anymore...!!

Been using it for 4 years 😎

Your explanations are really good short and concise, can you make a video on why to do testing with a little example of a real react project, sometimes testing doesn’t have sense to me

I recently tried to migrate one of my projects to TypeScript, but I discovered that in that particular project it just adds some boilerplate of casting operations that makes the code look more complicated than it actually is

like learning anything new, it's a curve, but it's always for the best! :D

This speaks to me I just didn't understand why anyone would use ts over js, but now I can't use js anywhere because I love ts! Obviously,

Obviously... a YES! Honestly I can't imagine web dev without TypeScript. Javascript just provides way too much freedom than you as a dev should have. If it wasn't for Typescript I probably would have went back to being an Android dev.

Dude, wtf with the final of that video! Jajajajajja you’re awesome

Hey man, I think you accidentally uploaded an unfinished version of your video. Just thought I would be a good guy and let you know.

I had once started react + ts then just dumped the idea because of lot of code. But now I am thinking to start again.👍

I do have a few projects where the type security would reduce the frustration level significantly

That ending got me pressed the subscribe button

Thank for the truthly possition in the end of video!

TS is cool in itself but I don't feel good about using a Microsoft language in a Microsoft IDE to push code to Microsoft's GitHub, and packages to Microsoft's NPM. I feel like our code country was just colonized by the Empire of Microsoft. I'll pass ONLY for that reason.

No one seems to be mentioning how FC is not recommended anymore due to the automatic children prop, just use PropsWithChildren instead, and usually type inference is good enough for the return type.

As a typescript user, i can tell that he is amazing. Although you write a bit more code, you make your life absolutely more easy when your project starts to grow.

I have worked with both react and angular as well. And I love angular more than react

Loved the video and also Quote by Charles Bukowski, which motivates me always...

TypeScript is bae. it's been 8 months and I never went back to plain JS development. Lots of suffering during the first weeks, but it pays!

Most type errors that appears in production comes from the API suddenly returning unexpected data, having type checking at compile time has no effect on that.

Your way of explaining is superb 💗😊 thanks for sharing with us this information video

My favorite youtuber. I'll pay for the lifetime on your website and learn lots of stuff!

Have you done a video on Gatsby? If not then have you considered it?

if you write jsdocs editors pick those up too. so you dont need typescript for that also jsdocs can give you type errors if you define types.

for anyone wondering what the statement in the beginning evaluates to, it is 'fail '

Something's missing in the end ........ is there a 2nd part to this video? :)