useRef "fait référence à une valeur, mais est utilisé ici comme type."

Question

J'essaie de comprendre comment dire quel élément est utilisé comme référence, c'est-à-dire dans mon cas

const circleRef = useRef<AnimatedCircle>(undefined);

AnimatedCircle est un composant SVG d'une bibliothèque tierce, et le définir de cette façon provoque une erreur

Existe-t-il un moyen universel de définir quel élément est ref?

Dan Pantry · Accepted Answer

AnimatedCircle est un fonction, pas un type. Cela signifie qu'il ne peut pas être utilisé dans TypeScript à la place d'un type, comme dans la contrainte générique de useRef. Au lieu de cela, vous devez utiliser le typeof operator pour convertir en type:

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

Ishmeet Singh · Answer

Dans mon cas, j'ai renommé le fichier en .ts au lieu de .tsx. Le renommer à nouveau l'a corrigé.