typescript ，如何传递 "Object is possibly null"错误？

Question

我多次遇到“对象可能为 null”错误，通常我会使用安全的“if 语句”以防它返回 null。

我有以下功能:

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

任何提示将不胜感激!谢谢

Answer 1

当你声明 const overlayEl = useRef(null);使它输出的类型为空，因为这是它可以提供这么多信息的最佳推断，为 typescript 提供更多信息，它将按预期工作。

尝试....

 const overlayEl = useRef<HTMLDivElement>(null);

或者一些语法糖，如果你不关心它的未定义是做这样的事情。

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

使用上述语法，所有常见的 DOM 方法只返回默认值，例如“0”，即 overlayEl.offsetWidth、getBoundingClientRect 等。

用法:

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

它的工作方式是 typescripts 静态分析足够聪明，可以找出 if 检查“guards”以防止 null，因此它将把它作为一个可能的类型从 的联合中删除空 |括号内的 HTMLDivElement。