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

Class Components: are also called stateful components, maintain a state of a user. Functional Components: these are also called stateless components, 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 extends React.Component. React.Component is an Generic class, 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 type that that stored in a component and avialiable public to class.

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

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

Here is an 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 component, data can be passed to 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 extends Component<PropType,StateType>
    • First represents the type of an props object
    • Second argument represents of a type State object, It gives a compilation error if you assigned 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 are typed
  • Instance properties are declare at class level and used as javascript expression in JSX
  • class methods can be created using normal or arrow functions