useRef "refers to a value, but is being used as a type here."

Question

I'm trying to figure out how to tell react which element is being used as ref i.e. in my case

const circleRef = useRef<AnimatedCircle>(undefined);

AnimatedCircle is an SVG component from a third party library, and defining it this way causes error

Is there some universal way to define which element is ref?

Answer 1

In my case, I renamed the file as .ts instead of .tsx. Renaming it again fixed it.

Answer 2

AnimatedCircle is a function, not a type. This means it cannot be used in TypeScript in place of a type, like in the generic constraint of useRef. Instead, you need to use the typeof operator to convert to a type:

const circleRef = useRef<typeof AnimatedCircle | null>(null);

Answer 3

I was getting the same error in

ReactDOM.render(
<App store={store} persistor={persistor} basename={PUBLIC_URL} />,
document.getElementById("root");

And I renamed the file to .tsx and that fixed the problem. The reason is that, when you are using React or ReactDOM, you have to rename file to .tsx instead of ts. For JavaScript, .js works but for TypeScript, .ts don't work.

Answer 4

For me the problem was I tried to import a type and used it to extend a type:

import type ResultMap form...

tried to do Promise<typeof ResultMap>

But this if not working, because

It’s important to note that classes have a value at runtime and a type at design-time, and the use is context-sensitive. When using import type to import a class, you can’t do things like extend from it. (Source: ts docs)