• React.PropsWithChildren
• React.ComponentPropsWithoutRef
• FunctionalComponent<Props> and React 18
• React.HTMLProps

Let's say you want to extend props for a given React component to take children. You can use React.PropsWithChildren.

This might look something like this:

type ButtonProps = React.PropsWithChildren<{
  onClick: () => void;
}>;

const Button = ({ children, onClick }: ButtonProps) => {
  return <button onClick={onClick}>{children}</button>;
};

You also have React.ComponentPropsWithoutRef, which you could—and we will—use as follows:

type ButtonProps = React.ComponentPropsWithoutRef<'button'>;

const Button = ({ children, onClick, type }: ButtonProps) => {
  return (
    <button onClick={onClick} type={type}>
      {children}
    </button>
  );
};

Now, Button has all of the some props as the native <button> element from the DOM.

🚨 Important note: Prior to React 18, you coulkd also use a FunctionalComponent<Props> or Component<Props> to accomplish a similar goal:

import * as React from 'react';

// 🚨 No good anymore.
const Input: React.FC = ({ children }) => <div>{children}</div>;

But, this was removed when the types were refactored for React 18. You can read more about the rationale here.