How do I design a React component using TypeScript?

How do I design a React component using TypeScript?

To design a React component with TypeScript, start by defining the component's props and state types.

Can you show me an example of a functional component?

Sure! Here's a simple example:

import React from 'react';

interface MyComponentProps {
  title: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ title }) => {
  return <h1>{title}</h1>;
};

export default MyComponent;

What about class components? How do they differ?

Class components also use TypeScript, but you define the state and props differently. Here's an example:

import React, { Component } from 'react';

interface MyComponentProps {
  title: string;
}

interface MyComponentState {
  count: number;
}

class MyComponent extends Component<MyComponentProps, MyComponentState> {
  state = { count: 0 };

  render() {
    return <h1>{this.props.title} - Count: {this.state.count}</h1>;
  }
}

export default MyComponent;