In React, Everything is a UI Component that can be created using reusable classes or functional Components.

Class Components: These are also called stateful components, which maintain the state of a user. Functional Components: these are also called stateless components, and do not maintain the state of a user.

The state and prop are two types in ReactJS for data passing and storage types.

Class components are created using ES6 class syntax.

Create Typescript Class Component in React

Let’s create Simple Class components.

import React, { Component } from 'react';

class ClassComponent extends Component {
    render() {
        return (
            <div>
                Hello World
            </div>
        );
    }
}

export default ClassComponent;

In typescript, React components extend React.Component. React.Component is a Generic class, an alias for React.Component<PropType, StateType>.

PropType and StateType are optional new types that hold the state and props of a React Component.

It can be created using type or interface in typescript and exported to use in another component.

It also contains a render function that returns data from a component.

Passing properties to class components in typescript

Let’s create a state and props in Typescript

Props contains a counter of type number that gets passed from the parent component and private to the class.

//props object
type Numbers={
    counter:number;
}

state contains numbers types that that stored in a component and the available public to class.

//state object
type Result={
    number: number;
}

Both can also be created using the interface in typescript for type safety.

Here is a class component

import React, { Component } from 'react';
//props object
type Numbers={
    counter:number;
}
//state object
type Result={
    number:number;
}

class ClassComponent extends Component<Numbers,Result> {
    state: Result = {
        number: 0,
      };
      componentDidMount() {
        this.setState((state) => ({
            number: state.number + this.props.counter,
          }));
      }



    render() {
        return (
            <div>
                Hello World{this.props.counter} - {this.state.number}
            </div>
        );
    }
}

export default ClassComponent;

how do you pass props from parents in typescript? Like normal components, data can be passed to the component using the below syntax

import React from 'react';

import './App.css';
import ClassComponent from './ClassComponent';

function App() {
  return (
    <div className="App">
      <h3> React Typescript Examples</h3>


      <ClassComponent counter={1}></ClassComponent>
    </div>
  );
}

export default App;

Class methods and properties in typescript

methods: are general functions declared in typescript. It was created using the normal function or arrow functions.

properties: are instance members that can be declared like normal variables at the class level. These can be accessed using javascript expression interpolation syntax in the render method.

import React, { Component } from 'react';
//props object
type Numbers={
    counter:number;
}
//state object
type Result={
    number:number;
}

class ClassComponent extends Component<Numbers,Result> {
    state: Result = {
        number: 0,
      };
      // instance properties
      message:string="success"
      componentDidMount() {
        this.updateState1();
      }
      // Normal Function
    updateState(){
        this.setState((state) => ({
            number: state.number + this.props.counter,
          }));
    }
    // Arrow  Function
    updateState1=()=>{
        this.setState((state) => ({
            number: state.number + this.props.counter,
          }));
    }

    render() {
        return (
            <div>
                Hello World{this.props.counter} - {this.state.number}
                <div>{this.message}</div>
            </div>
        );
    }
}

export default ClassComponent;

Class Components features

  • Each component extendsComponent<PropType,StateType>
    • First represents the type of props object
    • The second argument represents a type State object, It gives a compilation error if you assign a state with wrong data using this.setState()
  • props data are accessed using this.props.counter
  • state data are accessed using this. state.number`
  • Every object in class components is typed
  • Instance properties are declared at the class level and used as a javascript expression in JSX
  • class methods can be created using normal or arrow functions