The minimum TypeScript you need for React

https://ente.io/blog/tech/typescript-for-react/

Add property

import React from "react";

const Hello: React.FC<{ name: string }> = ({ name }) => {
  return <div>{`Hello, ${name}!`}</div>;
};

Use interface

import React from "react";

interface HelloProps {
  name: string;
}

const Hello: React.FC<HelloProps> = ({ name }) => {
  return <div>{`Hello, ${name}!`}</div>;
};

Add children

import React, { PropsWithChildren } from "react";

interface HelloProps {
  name: string;
}

const Hello: React.FC<PropsWithChildren<HelloProps>> = ({ name, children }) => {
  return (
    <div>
      <div>{`Hello, ${name}!`}</div>
      {children}
    </div>
  );
};

Add rest

import React, { HTMLAttributes, PropsWithChildren } from "react";

interface HelloProps extends HTMLAttributes<HTMLDivElement> {
  name: string;
}

const Hello: React.FC<PropsWithChildren<HelloProps>> = ({
  name,
  children,
  ...rest
}) => {
  return (
    <div>
      <div {...rest}>{`Hello, ${name}!`}</div>
      {children}
    </div>
  );
};