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

Question

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

const circleRef = useRef<AnimatedCircle>(undefined);

AnimatedCircle est un composant SVG provenant d'une bibliothèque tierce, et le définir de cette manière provoque une erreur

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

Answer 1

Dans mon cas, j'ai renommé le fichier en .ts au lieu de .tsx . Le fait de le renommer à nouveau a permis de résoudre le problème.

Answer 2

AnimatedCircle es 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 l'option typeof operator pour la convertir en un type :

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

Answer 3

J'ai obtenu la même erreur dans

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

Et j'ai renommé le fichier en .tsx et cela a réglé le problème. La raison en est que, lorsque vous utilisez React o ReactDOM vous devez renommer le fichier en .tsx au lieu de ts . Pour JavaScript , .js fonctionne mais pour TypeScript , .ts ne fonctionnent pas.

Answer 4

Pour moi, le problème est que j'ai essayé d'importer un type et de l'utiliser pour étendre un type :

import type ResultMap form...

a essayé de le faire Promise<typeof ResultMap>

Mais cela ne fonctionne pas, car

Il est important de noter que les classes ont une valeur au moment de l'exécution et un type au moment de la conception, et que leur utilisation dépend du contexte. Lorsque vous utilisez le type import pour importer une classe, vous ne pouvez pas faire des choses comme étendre à partir de cette classe. (Source : ts docs )