TypeScript with React – JSX Typing

Create a React + TS project

npx create-react-app my-app --template typescript

Functional Component Props

type GreetingProps = { name: string; age?: number };

const Greeting: React.FC<GreetingProps> = ({ name, age }) => (
  <h1>Hello, {name}{age && ` (${age})`}!</h1>
);

Using useState with Generics

const [count, setCount] = useState<number>(0);

useRef typing a DOM element

const inputRef = useRef<HTMLInputElement>(null);