Combine useState with TypeScript in React.js

First, you need to change the file extension of your components from .jsx to .tsx. Then:

  1. install React.js' types declarations i.e. npm i -D @types/react;
  2. define a shape of your date using TypeScript interfaces; and
  3. parametrize the useState invocation with that interface (or type) - this is known as generics or parametrized types.
interface Widget {
  name: string;
  size: number;
}

const [widget, setWidget] = useState<Widget>({ name: 'My First Widget', size: 100 });

Note

For JavaScript primitive types (i.e. string, number, bigint, boolean, undefined and symbol), the useState hook can guess the proper type. This ability is possible because of TypeScript's type inference.

Subscribe to My Newsletter

The latest programming-related news, articles and resources - sent to your inbox monthly. Unsubscribe anytime.