Как типизировать props компонента в React с TypeScript?

// The component's contract: what it receives and of what type
type SaveButtonProps = {
  text: string;                    // required
  id: number;                      // required
  disabled?: boolean;              // optional (may not be passed)
  color?: "blue" | "red";          // optional, with limited values
  onSave: (id: number) => void;    // function that takes a number
};

// Default values right in the destructuring
function SaveButton({
  text,
  id,
  disabled = false,
  color = "blue",
  onSave,
}: SaveButtonProps) {
  return (
    <button
      disabled={disabled}
      className={`button-${color}`}
      onClick={() => onSave(id)}
    >
      {text}
    </button>
  );
}

// Correct usage
// <SaveButton text="Save" id={7} onSave={(id) => console.log(id)} />

// <SaveButton text="Save" onSave={...} />
// Error: Property 'id' is missing in type ...

// <SaveButton text="Save" id="7" onSave={...} />
// Error: Type 'string' is not assignable to type 'number'

// Works, but is no longer recommended
const Button: React.FC<ButtonProps> = ({ text }) => {
  return <button>{text}</button>;
};

function Button({ text }: ButtonProps) {
  return <button>{text}</button>;
}