[解決済み] Typescript、"Object is possibly null" エラーをどのように渡すか？

質問

Object is possibly null"というエラーが何度も出て、通常はnullを返す場合に備えて安全な"if文"を使用しています。

次のような関数があります。

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

しかし overlayEl.current は、エラー "オブジェクトが定義されていません" を取得します。そこで、試してみました。

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

これはうまくいきませんでした。私も試しました。

overlay && overlayEl.current.focus();

何かヒントがあれば、非常に感謝します。ありがとうございます。

どのように解決するのですか？

const overlayEl = useRef(null)と宣言した場合。 と宣言すると、それがその多くの情報で提供できる最良の推論であるため、その型が null となります。

試しに....

 const overlayEl = useRef<HTMLDivElement>(null);

また、未定義であることを気にしないのであれば、以下のような構文もあります。

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

上記の構文を使用すると、すべての一般的な DOM メソッドは "0" などのデフォルトを返すだけです。

使用法。

if(overlayEl.current) {
    // will be type HTMLDivElement NOT HTMLDivElement | null
    const whattype = overlayEl.current; 
}

この仕組みは、typescript の静的解析が賢いので if が NULL に対してガードしていることを理解します。 null | HTMLDivElement の結合からそれを取り除きます。