Typing the props and state of React class based components

Similar to how things are done for functional components in classes we can use a mix of Typescript’s inference and our own interfaces.

To type the props we need to declare an interface and then pass that interface as parameter to the generic React Component class:

class UserSearch extends Component<UserSearchProps>

Then we can define extra interfaces and use those to type everything we need in the state.

state: UserSearchState = {
    name: '',
    user: undefined
  }

The gist below shows a full implementation of a class based component with typed props and state.