Use TypeScript to Type a React Class Component

Instructor: [0:02] If you're refactoring an older application or if this is just your style, it's likely that you have a few class components hanging around your code base. I generally prefer to write function components with hooks these days, but it is important to understand how TypeScript works a little differently with class components.

[0:17] Let's take a look at this counter component. This component is a bit contrived since my Minesweeper app doesn't use it for anything. I actually didn't write any class components for this app, but it'll still be good to illustrate the point. To get started, I'll rename it to have a .tsx file extension so that we can write our types.

[0:36] The first thing that we want to do is add some types for our props. The React.Component class is a generic class, and it takes the props type as its first type argument. Creating this interface, I'll go ahead and pass that into the type argument space for the class. Because child classes can set their own implementations of various methods that override their parent methods, we also want to explicitly type the props in our constructor. This component also has some state. Let's go ahead and write our types for that as well.

[1:19] The React.Component class takes the state as its second type argument, and this is going to make sure that calling this.setState() uses the right types for its arguments.

[1:31] However, again, our child class can override parent methods and properties. One of the properties we set in our child class could potentially have a different type than its parent. We also want to explicitly type the state here as well. We're almost done.

[1:48] We just want to go ahead and add some type annotations for our shouldComponentUpdate() lifecycle methods, which you probably want to do if your class uses any lifecycle methods at all, to make sure that the child implementation is the same as the parent. We've successfully refactored this class component to use TypeScript.

[2:08] To recap, class components, they will extend React.Component, which is a generic class. That class takes arguments for the component's props and its state. You should also annotate types for properties and methods within the class so that TypeScript understands that we're using the same types that we passed to its parent.