44
votes

Typescript, comment passer l'erreur "L'objet est peut-être nul"?

J'ai eu l'erreur «L'objet est peut-être nul» plusieurs fois et j'utilise généralement une instruction de sécurité «if» au cas où elle renvoie null.

J'ai la fonction suivante:

overlay && overlayEl.current.focus();

Mais overlayEl.current obtient l'erreur "L'objet n'est pas défini". Alors j'ai essayé:

if (!overlayEl) {
    return null
  } else {
    useEffect(() => {
    overlayEl.current.focus();
    });
    return <div {...props} ref={overlayEl} />;
  }

Ce qui n'a pas fonctionné. J'ai essayé aussi:

const ModalOverlay = (props: any[]) => {
  const overlayEl = useRef(null);
    useEffect(() => {
    overlayEl.current.focus();
    });
    return <div {...props} ref={overlayEl} />;
  }

Tout indice serait très apprécié! Merci

typescript typescript-typings

0 commentaires

6 Réponses :

5
votes

Si vous savez vraiment qu'au moment de l'exécution, vous n'avez pas d'erreur ici, mettez simplement:

    if (typeof overlayEl !== 'undefined' &&
      typeof overlayEl.current !== 'undefined' &&
      overlayEl.current === null) {          
      return;
    }

    // Or

    try {
      // you code here ...
      // This is fine way to check by order -> parent.parent.FinalInstance
      // Also try & catch will handle all bad situation about current error
      overlay &&  overlayEl.current && overlayEl.current.focus();

    } catch(e){
       console.log("Real null >> ", e);     
    }

  // Suggest if i am wrong in syntax somewhere ,this is fast answer ;)

Sinon, mieux utiliser:

 (overlayEl as any).current

2 commentaires

Malheureusement, typeof null est égal à object et non à "null" et certainement pas null .

Je n'écris pas ça, c'est par question. Peut-être que tu as raison.

72
votes

Lorsque vous déclarez const overlayEl = useRef (null); Rend le type qu'il sort comme nul parce que c'est la meilleure inférence possible qu'il peut offrir avec autant d'informations, donnez plus d'informations à la dactylographie et cela fonctionnera comme prévu.

Essayer....

const overlayEl = useRef(document.createElement("div"))

Alternativement, un peu de sucre de syntaxe pour si vous ne vous souciez pas du moment où il n'est pas défini est de faire quelque chose comme ça.

 const overlayEl = useRef<HTMLDivElement>(null);

en utilisant la syntaxe ci-dessus, toutes les méthodes DOM courantes renvoient simplement des valeurs par défaut telles que "0", c'est-à-dire overlayEl.offsetWidth, getBoundingClientRect, etc.

0 commentaires

1
votes

Si vous voulez "passer / sauter" alors cela le fera const overlayEl: any = useRef(null);

2 commentaires

Je viens de le faire ... et c'est passé! Cela ne semble pas être un bon conseil en général. En particulier, la conversion en any met en péril le but d'avoir des types - cela rend overlayEl n'importe quel type possible, de sorte que toutes les informations de type sont perdues. any type est comme pas du tout type (vanilla js).

oui en effet, c'est une solution de contournement que j'ai trouvée juste pour le faire fonctionner. Je n'ai pas dit que c'était la voie à suivre, ni la meilleure :) Comme vous pouvez le voir, la question est "Comment réussir" qui peut indiquer "Comment sauter", pas comment réparer ... mais c'est autre chose

8
votes

function useRef<T = undefined>(): MutableRefObject<T | undefined>;

1 commentaires

Merci. Au moins pour moi, c'était la bonne réponse. Notez que si votre élément est une entrée, vous devrez utiliser [...] = useRef() as MutableRefObject<HTMLInputElement>

3
votes

Ajoutez un type à la référence comme mentionné par @Shanon Jackson:

if (linkRef.current !== null) {
  linkRef.current.focus();
}

Et puis , assurez-vous de vérifier la valeur null avant d'utiliser current :

const linkRef = useRef<HTMLLinkElement>(null);

Cela satisfera Typescript. Alors que ce ne serait pas le cas en soi.

Utiliser any ou cast pour «tromper» le compilateur va à l'encontre de l'objectif d'utiliser Typescript, ne le faites pas.

0 commentaires

0
votes

utilisez le chaînage facultatif pour une sécurité indéfinie si vous utilisez ES2020

simplement:

overlayEl.current.focus();

plus d'informations sur https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

0 commentaires