TypeScript Fundamentals TypeScript Fundamentals

Integrating React & TypeScript

Check out a free preview of the full TypeScript Fundamentals course:
The "Integrating React & TypeScript" Lesson is part of the full, TypeScript Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

After getting the project up and running, Mike shows how to integrate TypeScript with React.

Get Unlimited Access Now

Transcript from the "Integrating React & TypeScript" Lesson

[00:00:00]
>> Mike North: Let's all together go over to our project.
>> Mike North: We're going to,
>> Mike North: Run a command like this, npm start_first with an underscore before it. The underscore just means, this is not an exercise for us to do as like a challenge, but this is just an area for us to play around.

[00:00:35]
>> Mike North: Is anyone getting any errors when they do that?
>> Speaker 2: Yeah.
>> Mike North: Are you getting an error about the stack type definitions, something like that? Or the user account, an admin not aligning with correct type?
>> Speaker 2: Cannot find module API keys JS.
>> Mike North: Okay, [NOISE] so I will check that in, but I'll give you my API key for now.

[00:01:01] So let me just paste that in the chat. This is just a Google API key. Let me see if I can show you how to get one.
>> Mike North: So you're gonna just search for Google places API key. This is free by the way, no credit card required or whatever.

[00:01:28] So as long as you're signed into a Google account, you should be able to get an API key at this page here. I'm gonna share that link in the chat for everyone else who's doing it remotely.
>> Mike North: So it's in the chart there, and you're just gonna basically go down here to get a key.

[00:01:57] And you're going to like create a new projects, and we'll say, something like that, create and enable API. And it should give you a key here, after a moment.
>> Mike North: So in your project, you should see that you've got a file that's called something like apikeys.js.default, that defines the structure of this file.

[00:02:30] So just remove the .default, and paste your key here. And rest assured that you're not going to commit your version of this file with your API key in it, that will not get committed to GitHub, or if you just push this somewhere. So once you do that, I'll let everyone kinda catch up there.

[00:02:55] You should be able to start up.
>> Speaker 2: [INAUDIBLE].
>> Mike North: Are you getting error about the type definition of stack?
>> Mike North: So there were two things that I did yesterday.
>> Speaker 2: API keys file.
>> Mike North: So that should be here apikeys.js.default.
>> Mike North: And you basically just remove this default extension and put your API key here, so that it looks like this.

[00:03:44]
>> Mike North: This is important because otherwise we would probably get rate limited on a single key within this class.
>> Mike North: All right, so do we have a couple of people in the room that are able to start this up?
>> Speaker 2: Does that need a variable name to export?
>> Mike North: Just export.default, so it should look just like this, except your API key should be in place instead of mine.

[00:04:17]
>> Speaker 2: Okay.
>> Mike North: By the time you watch this video, this will be a dead API key, by the way, so don't even try it.
>> Speaker 2: [LAUGH] I just have one test that's 1 plus 2 equals 3.
>> Mike North: Yes.
>> Speaker 2: Okay.
>> Mike North: Did you do npm start or npm test?

[00:04:32]
>> Speaker 2: npm test.
>> Mike North: Okay, try npm start.
>> Mike North: And then you can go to local host 3,000 and we should see something. You should see something that looks like this.
>> Mike North: That's the current time.
>> Mike North: We were testing Chrome's frame rate, immediately after resizing. So once we see this, just know that this is a React component.

[00:05:09] So I'm going to pop this out, and bring it next to our code, just so that we can look at them side by side.
>> Mike North: Anyone else seen this yet?
>> Mike North: All right, I'm gonna proceed anyway here. So if we open this first exercise here, the root of this project is index.tsx, right?

[00:05:43] TSX is like JSX but with TypeScript. So you can use the same JSX like things such as this stuff here, the HTML, looking stuff that it compiles into function locations. So just bit by bit, what we've got here is a root element which we can find in this index.html file.

[00:06:08] There's our root right there.
>> Mike North: And we're gonna render this thing called an app component into the root. This stuff here just has to do with hot module loading. So that as we save our files, as we save our React component, we should see that things update automatically.

[00:06:30] So if we look at this App component here. Those of you who have written a little bit of React before, would note that this component should probably not be implemented as a class. When you have only a render of function, no reference to anything stateful, there is an easier way to represent this.

[00:06:54] That is through a stateless, functional component. Now, you'll see that I've got two things here, right? When we deal wth stateful components, we will figure out what those mean. But in a case where we have no props, we need to worry about, we can actually say, we want a variable of type SFC.

[00:07:31]
>> Mike North: And refactor things around, so it looks like this. And if we save that,
>> Mike North: Let's make sure hot module loading works, it looks like it does. So effectively what we've done here, if we look at what the stateless functional component is. It takes in a type parameter, and it's calling that p, and that's how you remember it's p for props.

[00:07:55] P for props, so if we had some requirement for props. Let's say that we're gonna turn this word time into some variable, like props thing, naming stuff is hard. So right away, we're seeing that we get an error message saying, sorry, that's not the way this works. It would be like that, first stateless functional component, you get these props as an argument.

[00:08:30] So in this situation, we could define an interface and we should get undefined here. What thing is it?
>> Mike North: And are we getting a complaint?
>> Mike North: Okay, objects are not valid as a React child. So what we're seeing here is a side effect of,
>> Mike North: Not having,
>> Mike North: Yes, there it is.

[00:09:09] That was just me being improper here. We didn't have this wrapped around our props. And now we're getting errors that indicate that we haven't defined a props type definition, so we could do it this way. Import, sorry, interface IAppProps, thing is a string, and once we say that that is the type that we're working with, now our complaint goes away.

[00:09:38] So it's saying, this is sort of the default for React props. You always can have children, right? That is just sort of a core concept of a React component. That's how we nest list item React components inside a list. But in this case, we're saying thing is something we wish to add.

[00:10:00] And so once we pass that in here, sorry, IAppProps. Now this is for a game, and if we go upstream, if we go a little back to our index file, we're gonna get a complain here. This is really cool. So now it's saying, you're not allowed to just use this component as is, right?

[00:10:23] You have not given it the information it needs. You're giving it basically, an empty object as its properties. And so now, we have to say,
>> Mike North: Something like that to quiet it down.
>> Mike North: What's going on here? [NOISE] Maybe my distruction is screwed up.
>> Mike North: Nope,
>> Mike North: Intrinsic attributes, what's happening here?

[00:11:01]
>> Mike North: Property thing is missing. You know what? Maybe I just didn't save this file. There's the problem.
>> Mike North: So I'm re-rendering in my hot module loading thing. So that was the problem, I had collapsed this and there it was. So what we have now is some enforcement around things that you pass a component.

[00:11:24] We can do something like that, and now it's our option,
>> Mike North: To pass in something or not. So what hour is it? We could basically say, now we're free to leave this out, which is fine. It's happy with it, it's happy without it, right? So in this case, it's gonna say what time is it?

[00:11:46] And then it should be as soon as I save a file, the hot module load path should run. So just the fact that I saved this, should result in this code here running which is gonna pass in ours. So we should see this switch over.
>> Mike North: Maybe not.

[00:12:10]
>> Mike North: Nope, I think it's re-rendering the whole thing to the original path. And you'll hopefully get the idea there, I'm trying to do crazy backflips here. So what I do wanna point out is there's way more structure around a component requiring things to be passed to it. Optional parameters are super useful here.

[00:12:34] I do wanna show you one last thing and that is the spread operator that is really, really useful when it comes to React components. So let's say we have an object that already has the stuff that a component is asking for, right? So it would a situation where we have something like this,

[00:12:58]
>> Mike North: Right? We've already got that, and let's go back to this being a required property. Thing is a required property. This component needs it in order to work. And we're seeing right here, it's giving you some great feedback here. It's saying, property thing is missing, that's awesome. It's telling us just what it needs.

[00:13:22] Now, we've got this data here and if we had multiple properties on it, yes, we could say this fu = whatever, bar = whatever, baz = whatever, data.this, data.that. We can also do this,
>> Mike North: And basically spread that data object out satisfying all the props that this component is asking for.

[00:13:46] So that's really cool, that is something that TypeScript can uniquely bring to the party here. JavaScript will soon have this, but this is one of those features that we were talking about where TypeScript has had it for a while. JavaScript has it under consideration as a proposed feature to add to the language.

[00:14:07] But this is an object and we're effectively making a function call, spreading this out as the things that we're passing along as key value pairs to the component in question.