打字稿，如何传递“对象可能为空”错误？

Question

我多次遇到“Object is possible 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

如果你真的知道在执行时你在这里没有错误，那么只需输入：

 (overlayEl as any).current 

如果没有，最好使用：

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

Answer 2

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

试试....

 const overlayEl = useRef<HTMLDivElement>(null);

如果你不关心它的 undefined 什么时候会做这样的事情，也可以选择一些语法糖。

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 检查“守卫”以防止 null，因此它将作为可能的类型从这些括号内的 null | HTMLDivElement 的联合中删除。

Answer 3

如果你想“通过/跳过”，那么这会做到const overlayEl: any = useRef(null);

Answer 4

const overlayEl = useRef() as MutableRefObject<HTMLDivElement>;

它将overlayEl 转换为一个已启动的MutableRefObject，它是useRef 的返回值：

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

然而在这种情况下，编译器会一直认为overlayEl 有一个值。

Answer 5

向@Shanon Jackson 提到的引用添加一个类型：

const linkRef = useRef<HTMLLinkElement>(null);

然后，确保在使用current 之前检查null 值：

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

这将满足 Typescript。而任何一个本身都不会。

使用any 或强制转换来“欺骗”编译器违背了使用Typescript 的目的，不要那样做。

Answer 6

您也可以使用 ES2020 中引入的optional chaining 来代替“if”语句以获得更简洁的代码

const myRef = useRef<HTMLLinkElement>(null);

myRef.current?.focus();

你可以在caniuse查看它的浏览器支持。

Answer 7

如果你不想给打字机会使用这个：

const iframe = useRef<HTMLIFrameElement | null>(null);

     if (
   typeof iframe !== "undefined" &&
   typeof iframe.current !== "undefined" &&
   iframe.current !== null
 ) {
   iframe?.current?.contentWindow='';
   );
 }

Answer 8

有时我们useRef 不仅保存一个元素，还保存一个像数据这样的值。不知何故，当我检查 if(something.current) return something.current 时即使 i 添加 && something.current!=null 也不起作用，所以我发现：

something.current! 告诉 typescript i 知道有一个值并绕过这个问题。

Answer 9

我认为这比这里的其他答案更简洁：

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

您指定引用的类型，并声明您知道它不为空。

Answer 10

取决于你喜欢什么，但一个好的语法和结构可能是创建一个接口：

interface divEL {
  current: HTMLDivElement | null;
}

这将使您的声明保持清晰和简短，并且您可以将 divEl 接口重用于类似的 useRef 挂钩。

const overlayEl: divEL = useRef(null);

然后像这样添加focus()：

overlayEl.current!.focus();