In React with TypeScript we can use two main approaches to create components: functional and class components. Both approaches allow working with props and state, but use slightly different paradigms. TypeScript further enhances development safety by providing static typing, which allows us to precisely define the shape of props and state.

Below we will look at examples of different components, using interfaces to define types, to ensure code consistency and readability.

F-1. Functional component without props and state

In this case, a simple functional component that uses neither props nor state looks like this:

import React from 'react';

const FunctionalComponent: React.FC = () => {
  return 
Hello, DEV.to!
;
};

This component only displays static text.

F-2. Functional component with props

When we want to pass data through props, we use interfaces to define the form of that data:

import React from 'react';

interface IMyProps {
  name: string;
}

const FunctionalComponentWithProps: React.FC = ({ name }) => {
  return 
Hello, {name}!
;
};

Here IMyProps contains the name used to display the personalized greeting.

F-3. Functional component with state

When using state in functional components, we use React's useState hook:

import React, { useState } from 'react';

const FunctionalComponentWithState: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

This component uses local state to track counters.

F-4. A functional component with props and state

By combining props and state we can have flexible components that receive data through props and manipulate state internally:

import React, { useState } from 'react';

interface IMyProps {
  initialCount: number;
}

const FunctionalComponentWithPropsAndState: React.FC = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

This component uses initialCount as a prop, and internal state for dynamic counter tracking.

K-1. Class component without props and state

A class component without props and state in React looks like this:

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return 
Hello, DEV.to!
;
  }
}

This is a simple class component that displays static text.

K-2. Class component with props

When a class component receives props, we define them using the interface:

import React from 'react';

interface IMyProps {
  name: string;
}

class ClassComponentWithProps extends React.Component {
  render() {
    return 
Hello, {this.props.name}!
;
  }
}

As with the functional component, here we use props to display personalized data.

K-3. Class component with state

For class components with state, we define the state inside the constructor:

• Empty parentheses in constructor

If you don't use props, you can simply leave the parentheses empty in the constructor:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor() {
    super({});
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

• Explicitly specify {} as type for props

If you want to be explicit about props, you can specify {} as the type:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

-> In both cases, TypeScript and React will work correctly. If your component doesn't use props, you can simply use empty parentheses in the constructor, but be sure to pass {} in the super call to avoid initialization errors.

This component uses state to track counter changes.

K-4. A class component with props and state

For class components that use both props and state, we can combine both concepts:

import React from 'react';

interface IMyProps {
  initialCount: number;
}

interface IMyState {
  count: number;
}

class ClassComponentWithPropsAndState extends React.Component {
  constructor(props: IMyProps) {
    super(props);
    this.state = {
      count: props.initialCount
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

This component receives an initial counter through props, and further manipulates state internally.

Using interfaces in TypeScript brings better typing and easier code readability, especially when working with more complex data structures. With these basic examples, you have a foundation for writing functional and class components with React and TypeScript.