TypeScript with React

Typing Components

In React + TypeScript, you type component props using an interface or type alias.

interface ButtonProps { label: string; onClick: () => void; disabled?: boolean }

Typing Hooks

useState can infer types or accept an explicit type parameter: useState<number>(0).

useRef is typed with the DOM element type: useRef<HTMLInputElement>(null).

Events

React provides typed event handlers. A change event on an input is React.ChangeEvent<HTMLInputElement>. A click on a button is React.MouseEvent<HTMLButtonElement>.