Setup TypeScript

[00:00:00]
>> We are going to get into TypeScript, and specifically React with TypeScript together. So this is definitely not going to be a full intro to TypeScript, or even really a full intro to React and TypeScript together. Mostly what we're gonna talk about is we're just going to talk about, we have this existing application, what's it like to migrate that to TypeScript?

[00:00:20]
And along the way, you'll pick up some TypeScript things here and there. But specifically, before we got too much into this, I wanna call out two courses that if you're interested in React and TypeScript, one, first take Mike North's course. Mike North, he's my coworker, he was my coworker at LinkedIn, and now we just hired him to be on my team at Stripe, which is awesome.

[00:00:40]
He has this course here, TypeScript Fundamentals, take that one first, it's good one. And then after that, take Steve's course, which is React and TypeScript together, so Steve gets much more in depth. This is a five-hour course just on React and TypeScript together. So if that's really what your jam is, that's your progression forward from here.

[00:01:02]
That being said, I wanted to show you what our Adopt Me pet application looks like if you migrate it totally to TypeScript. So this is kind of just a useful exercise for you to witness like, I have a Javascript app. What's it like going from a Javascript app to a TypeScript app?

[00:01:18]
Okay, I love TypeScript, just for the record, the VS Code team and the TypeScript team at Microsoft are the same team. So I used to work with all the TypeScript people, and so, I'm always really happy when I get to work with it. Okay, so we're gonna do this, we're gonna do npm install typescript@4.8.4.

[00:01:38]
Make sure you're starting with a fresh copy of Adopt Me. All right, so I'm just making a copy of that 14-context directory, it's this one here, yeah. And then I'm gonna go into the directory, I'm going to remove Node modules, and reinstall all of my Node modules. Okay, and then I should be ready to go.

[00:02:07]
So I have a fresh copy of my project. And then, now I'm gonna say npm install -D typescript@4.8.4. Cool, next thing I wanna do here is I'm gonna run npx tsc, which is the TypeScript compiler, right? And then I wanna run that with --init, just like we did for Tailwind, it's gonna start a whole project for us.

[00:02:48]
You'll see that it's going to generate here a TypeScript config for us here, and it's quite long. So you can go through, and there's a bunch of stuff you can change. Or you can just come over here, I have this little minimalistic one here that we're gonna use.

[00:03:07]
So target ES2022, so the latest version of ECMAScript, the flavor of JSX that we're gonna use is react-jsx. There's several versions of this, I do not remember what the difference is. We used to do preserve here, I think, right? But now we have to do react-jsx, and I'm trying to remember exactly what that does differently.

[00:03:31]
I think it means that we don't have to import React anymore, it's something like that. So this is the newer way of doing it. Modules, we're doing the new way of doing modules, we're doing Node modules, esModuleInterop, yes. Strict mode, if you're gonna migrate a whole project to React, you wanna have strict mode enabled.

[00:03:53]
If you're just starting, let's say you have a huge codebase, and you're just gonna piecemeal start doing little pieces of it, then you can turn strict mode off. And then, yeah, we don't wanna check our Node modules, so that's basically everything here. So nice little minimalistic TypeScript config here.

[00:04:16]
Okay, save that, cool. So next thing that we need, is we need the types for React. React is not itself written in TypeScript, I believe it might be written in Flow, or it might just be written in JavaScript, I can't remember. In any case, it does not have types that ship with it, so we have to say down here npm install -D @types/react@18.0.21, and @types/react-dom@18.0.6 So if you're not familiar with this, we just installed these types files here.

[00:05:09]
So basically, what TypeScript is gonna say, okay, I can see that React doesn't have types with it. So what I'm gonna go do, is I'm going to go look in your Node directory and see if you have any of these types file. There's a massive project called Definitely Typed, where if a library doesn't have types in it, because it's not written in TypeScript or something like that.

[00:05:29]
Someone later can go and write types for it, and then you can install them separately, which is exactly what we've done here. And for example, we don't have to install one for react-query, we don't have to install them for react-router-dom, because both of these are written in TypeScript as is.

[00:05:44]
Therefore we don't need additional types because they are inherently already typed. Cool. So, I guess if you're not familiar with TypeScript, one, I'm impressed you've gotten this far into an intermediate React class with not having been exposed to it, so congratulations. But basically, we have Prettier to handle all of our formatting, we have ESLint to handle all of our stylistic choices about our code.

[00:06:19]
We'll eventually have unit testing to test all the integrations. And TypeScript is gonna follow all of the types of our code. I mean, the classic example is that you can't do things like const x = 5, and then x.toUppercase, right? People like to say that TypeScript prevents things like this, which is true, it does, right?

[00:06:42]
I don't really have this problem too much, to be totally frank with you. What is much more helpful is it's basically live documentation about what your code looks like. So every time that you do something like hey, I have this usebreedList here, you can see that I have this animal: any, and all this kind of stuff.

[00:07:01]
This is actually all generated from TypeScript running on your code. So VS Code, no matter what you're doing, is running TypeScript on your code all the time. And it generates all these kind of call signatures. So you can see this useBreedList, because it's one that I wrote, doesn't really have too much interesting information about it.

[00:07:15]
But if I go look at useState, you can see actually you have a ton of information there. That I have this initial state that's a string, I have a React dispatch, which has a set action state, which is of a string type. It has a bunch of interesting information about it, which is coming from those types that we just installed, right?

[00:07:34]
This is great, but right now we only have it for our library code. I love TypeScript, because now, once we go do all of the typing for all of our code, we're gonna start seeing all of that for our code as well. So like I said, it's like living documentation of the intention that you had when you wrote this code.

[00:07:52]
Right now, I know I provide useBreedList at animal to any, what is any? We don't know, right? But after we're done with this, we're gonna see if it's of type animal, which is gonna be an enumerated type, which is gonna be only one small subset of animals. And so, if I try and put something in here, like horse, right?

[00:08:09]
Well, horse is an animal, but it's not one that our API supports. So we're actually gonna have TypeScript catch that error for us, which I think is pretty cool. That's my pitch on why I like TypeScript.