CODEWITHSUNDEEP
reactjstypescriptreact-hooks
Ilja
Ilja

Reputation: 46479

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

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

enter image description here

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

Upvotes: 52

Views: 88049

Answers (4)

ztefanie
ztefanie

Reputation: 850

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)

Upvotes: 0

DevLoverUmar
DevLoverUmar

Reputation: 13933

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.

Upvotes: 13

Ishmeet Singh
Ishmeet Singh

Reputation: 1246

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

Upvotes: 100

Dan
Dan

Reputation: 10538

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);

Upvotes: 36

Related Questions