How can I use refs in React with TypeScript?

General Discussions
1

How can I use refs in React with TypeScript?

I’m working with TypeScript in a React project, and I’m having difficulty understanding how to use refs while maintaining static typing and getting proper intellisense for the React nodes referenced by the refs. Here’s my code:

import * as React from 'react';

interface AppState {
    count: number;
}

interface AppProps {
    steps: number;
}

interface AppRefs {
    stepInput: HTMLInputElement;
}


How can I use **react ref typescript** properly to get static typing and intellisense for the `stepInput` reference in this example?
2

Instead of using the ref="stepInput" string reference, you can use React.createRef() to create a strongly typed reference in the constructor. This ensures that TypeScript recognizes the reference and provides IntelliSense.

3

If you prefer functional components, you can use useRef in combination with TypeScript to type the reference properly. This also offers better readability and simpler management.