Introduction

[00:00:00]
>> Steve Kinney: Hello, we are going to, as you can gather from this slide, we're going to talk about React and TypeScript together. And so, you know, the kind of high level is, do you need to be like a TypeScript wizard? No, right? And like part of my thesis will be the easiest way to learn how to use TypeScript with React is to just use TypeScript with React, and kind of look at some of the types and IntelliSense and fun stuff like that that you get, and instead of memorizing and knowing and learning a bunch of stuff, actually just using the tools that you are already using, whether they be the very popular Visual Studio Code, Cursor, anything that's got some amount of IntelliSense-like functionality to kind of build up the skill set to figure it out from inside of your editor, right?

[00:01:01]
So most of our day today will be inside of the editor kind of spelunking and using that to kind of build out some of our understanding. And we're going to learn how to use TypeScript with React with some React components and the aforementioned spelunking. At one point, when it feels appropriate, rather than do the tour de force lecture part at the beginning, when it feels appropriate to do a little bit more of a, okay, here's some TypeScript concepts, it probably makes sense to kind of dig into, we will kind of take that refrain and do that for a moment, and then we're back into React, right?

[00:01:38]
And we'll look at pieces that might apply to building either shared components or design systems or component libraries and what have you, and some kind of more advanced practices once we are armed with that slightly deeper dive into TypeScript and we are comfortable kind of using our tools to kind of find our way around. Each year that goes by, I feel like I have to do less of the sales pitch for why you might want to consider TypeScript.

[00:02:10]
I feel like it is now the default, which is good because as time goes on, every time I end up writing actual just JavaScript, I get increasingly uncomfortable. And so the fact that TypeScript is becoming quickly the lingua franca is good because then I can start pretending JavaScript doesn't exist, which is not something I ever thought I would say 10 years ago, but here we are. The world's a weird place.

[00:02:37]
And, you know, we could do the whole, it gives type safety, and then you know if stuff is going to break in your app before it breaks. Like, I feel like by the time you are watching me say these words, you have figured out that piece. That's true. There's nothing untrue about that, right? But I think the other piece that is incredibly important is I remember when I first started learning how to code, and it was, you know, Ruby or JavaScript, also known as not typed languages.

[00:03:11]
And I heard these rumors of these Java developers and other typed language developers, and like, my IDE helps me with all of these things, and I'm like, I have TextMate, and it's just, you know, I'm lucky to have syntax highlighting half the time. And to now kind of get a taste of all of that without a lot of the baggage, I think that TypeScript's type system is really flexible and nice. So to get a lot of the flexibility of something like Ruby or JavaScript, and then also all of those IDE accoutrements is really great, and I think that the development experience and the ability to figure out what the actual arguments of those function without having to jump over and check and all of those things is a selling point above and beyond the very responsible, hey, it would be great if our app didn't break in production.

[00:04:04]
That's a nice bonus as well, and I enjoy it, but I also enjoy just all of the autocomplete hints, everything along those lines, and we'll look at how to make TypeScript not only a safety mechanism, but also a way to kind of document your code and express the intent of things and just make your day-to-day life a lot easier along the way. And, you know, I think the nice part is using something like TypeScript also kind of removes entire sets of unit tests that you might have to write, like what happens if null comes in here?

[00:04:34]
Well, what happens if it didn't? Right, what happens if we just check to make sure that that didn't happen. You might still have those tests, but it's nice to have that extra layer of safety on top of everything also. And yeah, and like I said, refactors become a lot easier. So on top of the whole safety, responsibility, practicality piece, there is also just a more productive, you know, so on and so forth.

[00:05:01]
And one of the kind of other hypothesis that I'm going to keep hammering on in our time together, so I might as well call it out now, is that you might be like, oh yeah, but it's like so much extra noise. Like, TypeScript done well, should almost disappear. Right, and so you shouldn't have, if you find yourself doing a lot of gymnastics in order to get TypeScript to work, then we should definitely spend the day together, because I'm going to argue that you don't actually need that.

[00:05:33]
And if you do need that outside of, you know, some very special cases, then I think our time together will be well spent. The kind of underlying subtext of that thesis is in, if you do things kind of on the happy path and you're not trying to get too clever. Like, if in any way, shape or form, the TypeScript language server could figure out what's going on, you don't have to write any TypeScript. It's only the situations where from looking at the code itself and analyzing your current codebase, that it cannot necessarily with 100% confidence figure something out.

[00:06:14]
In those cases, we need to give it a little nudge, right? And our goal will be to keep that nudge as small as possible. So the kind of paradox of our time together is in the act of getting really, really good at using TypeScript with React, our goal will be to write less and less TypeScript and yet have more and more safety from TypeScript at the same time. We'll look at some fun stuff that the words might stress you out, but I promise you it is simpler than you think.

[00:06:44]
Stuff like discriminated unions to again, get all of that autocomplete IntelliSense goodness with shockingly little TypeScript and text. TypeScript, the selling point is that it checks all your stuff at compile time. We will talk about how to also check stuff at runtime using a library called Zod because you can do the best types ever throughout your entire codebase. You can 100% it. The second you call an API you don't control, like you are letting things from the outside world in at runtime, right?

[00:07:20]
And like we can hope that everyone else keeps their promises. We will look at how to test types, right? So if types, types will both save you from writing tests, and then at the same time, we will also look at how to test some types. And generally speaking, you're like, I didn't ask to test more stuff in my codebase. Most of the time you will not have to, it's when you're like, hey, I'm going to write this utility type that might do this thing, that might make something easier for me, and I would like to make sure it does the thing that I think it does without having to hover over stuff all the time.

[00:07:55]
That's where stuff like being able to test your types, again, incredibly simple, but worthwhile to kind of explore, in case you've never done it before, definitely opens up an entire realm of like, wow, that might have normally taken me 2 hours to do that thing, and now I can do it in 20 minutes. You know, and then finally, stuff that might apply to if you're building a design system or a component library, and I, you know, frequently joke that if you are not using a design system or component library, you are writing one in your own codebase.

[00:08:29]
Like there are components that ideally get reused in your codebase. Maybe not, but then that's a different talk later about why everything is a one-off in your codebase. Generally speaking, for stuff that is shared code, you probably want it to be flexible. And you're like, well, all these types are going to make stuff not flexible. Counterargument, no. Right. And we will find out ways to make everything incredibly flexible in all the code that you want to share across your codebase as well.

[00:08:57]
And we'll explore stuff like words that will impress your friends like polymorphic components and stuff along those lines that will make everyone think that you are smarter than them, which, but you know, by the end you will be. So, that's good. And with that, let's stop talking and let's actually start looking at some code. All right, so let's do it. Some administrivia before we jump in, I said we're going to look at code.

[00:09:28]
You're like, where is this code? That's a great question. I'm glad you asked it. So, more than I will ever say today, all of my notes, including the stuff that I wrote the notes for, and then it was like, it's a little esoteric, let's not drag everyone through that, is on this super cool website where there is kind of a lot of the topics that we will be covering, and then an egregious appendix of other stuff that you can kind of check out as well.

[00:09:55]
So if you want to kind of either do a deeper dive, or if there's something where it's like, hey, this is really specific to my thing, I might have something written for it. But the more important part right now is going ahead and grabbing this repository, which we'll kind of take a look at right now. And this is a link to the TypeScript playground, which you could definitely Google TypeScript playground and get there as well.

[00:10:24]
In the repo, we have, technically, in a React and TypeScript course, you don't necessarily need to ever look at the components that we're building. That said, that's kind of weird, so we can, and it makes us feel better to actually look at the stuff as well. So the majority of our time is spent in this examples portion. All of the components that we're going to play around and build with are also hooked into a Storybook.

[00:10:55]
So when you, upon cloning the repo, if you do npm run storybook after an npm install, of course, npm run storybook, you should see something not dissimilar to this. There are a whole bunch of components that I also have in here. One, because I am very lazy and did not want to style everything one by one, and two, because I thought if we were going to talk about building typed components with React, having some exemplars lying around is probably a good thing.

[00:11:24]
But that said, Storybook likes to put the sections in alphabetical order and even my attempt to use emoji, which usually works all the time, didn't work. So if this is very big, you can close it, but also you can look at it. Here are all of our various examples that we will play around with. Like I said, the majority of our time will be in our editor, using our editor to figure out TypeScript and React.

[00:11:50]
But, you know, visual stuff is neat at various points. If for some reason Storybook is not working for you, I don't know why it wouldn't, but this isn't my first rodeo. You can also just do this npm run examples, pick which example you want and do npm run dev and just, it'll fire up a Vite dev server as well, but you would have to do it to switch examples. So, try that first. If for some reason on your machine, there are some issues, we have a backup plan, so, right on.