You can create stateful React Components in TypeScript by extending from the React.Component class. This parent class takes two generic parameters, Props and State. 

This lessons shows these generic parameters and React.Component in action

Create stateful React Components using TypeScript

[00:00] Here, I have a simple application that renders the div "Hello World" to the DOM using React and ReactDOM.

[00:07] We can easily move this div into a stateful component called app by extending from React's component and returning the div from the render function of this new component. One big advantage of using components is that you get to use props to change the component behavior.

[00:28] React.Component takes two generic parameters. The first one is the prop. We can go ahead and add a prop message of type string. We can use this prop in our render method.

[00:45] As you can see, TypeScript is already complaining on the misusages of the component. It is saying that the component expects a prop message to be passed in. Let's go ahead and pass it in. You can see that this property is now being used within the render method.

[01:05] Components that extend from React.Component are called "stateful," because they get to have their own internal state. The second generic parameter that React.Component takes is actually the type of the state.

[01:17] Let's go ahead and set up our state to have account member of type number. We can initialize the state in our constructor. When adding a constructor to a React component, you get passed initial props, which we simply pass to the super React.Component class.

[01:33] Next, we set up our initial state, which thanks to our generic setup, is just with autocomplete. We go ahead and set up the count member to be zero initially.

[01:43] Finally, we get to use state in other places like the render function. Go ahead and display this.state.count initially. The key reason for having local state in a component is of course that you get to manage it inside the component.

[01:57] For example, we can go ahead and add an increment function that uses React components, set state to increment the count member of the state.

[02:07] Next, within our render function, we can go ahead to our root div and add an on-click handler to call this increment function.

[02:15] Now, if we go ahead and click the root div rendered by the component, you can see that the state changes correctly, causing the component to re-render with a new state.

[02:25] Let's say we want to add another property, foo, to our component state. As soon as we do that, you will notice that all calls to set state will be marked as an error if they do not pass in this additional member, foo, for state.

[02:38] We can fix this easily by marking this new foo member as an optional member. With that, the errors go away. In fact, because of how React setState works, it is conventional to mark all state members as optional.

Create stateful React Components using TypeScript

Share this video with your friends