Introduction

[00:00:00]
>> My name is Steve. I currently live in Denver, Colorado, USA. I am from the, either, New York City or New Jersey depending on what's better for the story or the point I'm trying to make. I work at a company called Temporal. I run the frontend engineering team there.

[00:00:19]
I'm also in the Developers Tools team. So the same team working on both the UI as well as VS code plugins and fun stuff like that. So, today we're gonna talk about React and TypeScript. So what is gonna be in this course, and what do you need to know?

[00:00:37]
One, you do not necessarily need to be, it's not like I am already a TypeScript master, and now I'd like to also learn how to use it with React. The expectation is that you've played with some React, you're mostly familiar with React. And you have probably heard that TypeScript is supposed to be good, right?

[00:00:55]
Type safety, that seems like a thing. And then you're probably, like my origin story with this was, I think the first time I tried to use TypeScript was 2016, right? Less gray in my beard, more youthful exuberance. I'm like, yeah, let's try a strongly typed version of JavaScript.

[00:01:14]
And that's great when you first try it out. And then the second things get hard, you're like, or I could go back to JavaScript and just do whatever I want all the time instead of having a compiler yell at me? And so, that was the first two years, right?

[00:01:29]
And then we were doing this big rewriting of this app in 2018. And we had already been living with this large code base. It was like one of those layer cakes. And so, they had a Rails app that had CoffeeScript and jQuery, and then they put a React hat on top of that, and now we were gonna rewrite the thing, right?

[00:01:50]
And so changing that out in place, the team was like, we should probably use TypeScript, right? That seems like the responsible thing to do in 2018, possibly in 2022, almost definitely. And so, it starts out like this, like you do the easy mode, and then you come across some issue.

[00:02:11]
And you either, a, start throwing any types anywhere, or b, you start just randomly copying and pasting stuff you find from the Internet. And that is, I think where a lot of us live for a very long time. And so, the goal of this course is kind of like not only just go like, okay, this is what you do here, this is what you do there.

[00:02:33]
But kind of two major themes, which is, one, kind of understanding some of the just philosophical underpinnings of what we're doing and why. So I'll start out kind of slow and then ramp up. And then two, the main hypothesis that I'm gonna try to push on you, is that a lot of times the answer is literally in your editor.

[00:02:53]
I'm gonna be using VS code because I figure, VS code Microsoft, IntelliSense Microsoft, TypeScript Microsoft, all works together. I assume that a lot of these will work and other editors as well, but that is kind of my experience. And so, a lot of times actually using TypeScript and React.

[00:03:09]
And using a lot of the hints and just features in your editor to kind of have some introspection about what's going on, is a lot of times the best way to figure out the path forward, right? A lot of times instead of like, all right, let me jump over into my web browser and look up the docs on TypeScript, you can actually just hover over stuff sometimes, and kind of get the answer.

[00:03:29]
So if there's one main skill that you get out of this, it is how you kind of use your actual React and TypeScript app to learn how to use TypeScript in your React app. It's like a positive feedback loop. We're gonna learn TypeScript through building React components, right?

[00:03:45]
And I think that if you're like, I'm into this, there are definitely some other workshops that FrontMasters has, that cover just purely TypeScript in depth. But this is kind of learning through doing with a React application. At one point, when we start escalating up the complexity of things, we'll take a brief detour into just enough TypeScript to keep you dangerous, right?

[00:04:06]
Just to kinda go back into some of the more advanced stuff. And then we will jump into some more complicated patterns in React. A lot of the stuff in React in particular, which is a lot of executed at runtime, you could have stuff like prop types, and we'll convert some stuff from Prop types in the very beginning.

[00:04:21]
Where it's like, it allows your counsel only in development. And that's great if like for the actual view you're looking at, but a lot of times if you have a large enough code base, somewhere off in the distance, you might have broken something, right? And, yes, in a perfect world, you have amazing tests and everything is great.

[00:04:37]
But it'd be really great if in your editor, immediately, you saw a little red squiggly line that told you and you can just fix it right then and there. You think about, unless you're better than me, the number of mistakes you make a day, if you can cut it from having to jump over and look at the console to just seen immediately, you makeup a 10x developer.

[00:04:56]
Also, more important to me is autocomplete. It's the idea that I will immediately start typing and it will tell me the rest of the answer. Cuz I have lost afternoons, maybe full days, to misspelling an action type in a Redux or useReducer reducer, or something along those lines.

[00:05:18]
Like midway through the course, there is an issue where I was writing the solution to an exercise and I made a stupid typo. I was doing doing it in without the types first and then show you. I was like, if I just had TypeScript this entire time, this wouldn't have happened to me.

[00:05:34]
So we'll kind of look at that as well. And then, having worked on some very large code bases, it is nice. I said this is before, if something changes somewhere else, you have multiple people working on a code base, having a lightning fast, compile it, just find all these little things, all these edge cases.

[00:05:50]
Definitely make life easier, and make it so that you do not get paged. I do not like getting paged, right? So I wanted to pay some of the extra tax in this ceremony around setting up types and some of those extra things. A lot of the times, or another theme, is that TypeScript tries its hardest to stay out of your way, and only kind of steps in, and sometimes feels a little bit pedantic when your code is actually less clear than you think it is.

[00:06:17]
And I think we've actually seen this throughout, like even third party libraries, a lot of code, now that TypeScript is becoming more and more popular, it's getting simpler and simpler. There's less magic a lot of times, right? And so, it kind of in a lot of ways forces you to write simpler code and be a little less fancy.

[00:06:35]
And I think that, over time, contributes to the quality of your codebase. So with that, let's get into it. One of the things we have available for us is this fun little website. It has basically everything we're gonna say today, and probably more, as well as all of the different repos that we're gonna use.

[00:06:55]
So if you wanna get ahead of the curve, and clone and run npm install now, that's totally fine. You don't really have to opt for some of the smaller ones, I'll put up some sandboxes and stuff along those lines. But generally speaking, you can kinda follow along with me as I'm going through stuff, and we'll kinda see some stuff together.

[00:07:12]
So some of the big updates between Version 1 and Version 2 is React 18, right? And with React 18, there was a bunch of changes, some of the types of, for instance, like in React 17, we're not there yet, we'll point out when we get there, you could just use like React.function component.

[00:07:32]
And it was like assume that you support children all those things, and that doesn't work anymore in React 18. So it's like lots of little things that are somewhat different between 17 and 18, there's a number of kind of new helper utilities. And just generally speaking, like, I think one of the things if I compare even like 2016 TypeScript, to 2018, to 2022, like every release, stuff gets a little bit more powerful and a little bit easier.

[00:07:59]
So in a lot of ways, there's both few things that you can't do anymore cuz they're no longer supported. And at the same time, a lot less ceremony and work, and the helpfulness in the editor increases more and more. So even in v1, I was like, yo, you should use the editor to like figure out the right thing.

[00:08:17]
And that was a mostly good approach, and I would say that these days that it becomes a really good approach, I think doubling down on that skill is incredibly useful.