Syntax for Typescript prop types for React component?

Question

What is the syntax for adding proptypes to a React component with Typescript? The following isn't working:

import React from "react";

type Props = {
  text: string;
  number: number;
};

function TextInput<Props>({ text, number }) {
  return (
    <div style={{ border: "1px solid gold" }}>
      <p>TEXT: {text}</p>
      <p>NUMBER: {number}</p>
    </div>
  );
}

export default TextInput;

Answer 1

You need to define the type of the parameter (which happens to be a destructure of the parameter).

import React from "react";

type Props = {
  text: string;
  number: number;
};

function TextInput({ text, number }: Props) {
  return (
    <div style={{ border: "1px solid gold" }}>
      <p>TEXT: {text}</p>
      <p>NUMBER: {number}</p>
    </div>
  );
}

export default TextInput;

What you were defining was a function with a generic type parameter Props which is something very different.