在打字稿中处理 useRef(null) 的最佳方法

Question

所以，我有这个titleRef

const titleRef = useRef<HTMLHeadingElement | null>(null);

它附加到此标头：

<h1 ref={titleRef}>Hi!</h1>

我想用它来完成一些在屏幕调整大小时设置样式的工作，如下所示：

if (titleRef.current.style.offsetWidth > '10px') {...}

TS不喜欢这样。看，useRef(null)意味着 titleRef可以等于null（这很公平），所以在我使用的任何地方titleRef，我都必须用类似的东西来解释这一点

if (titleRef.current) {
  ...do the thing
}` 

titleRef如果经常使用的话会很麻烦。

有更优雅的方法来处理这种情况吗？直接设置titleRef为?<h1>中的元素 useRef或者，不使用null，而是传递useRef()一些“通用” HTMLHeadingElement？

编辑：可选链接是我尝试的第一件事，但是，这似乎没有帮助：

编辑 2：添加 确实!会清除警告，但它也会使值静态并可能导致麻烦，具体取决于您的用例。

编辑 3：如果您要修改titleRef.current.

如果您不修改该值，仅读取它，那么?应该没问题，但如果不是......

长话短说

虽然下面的答案有时有效，但对我来说，缺点似乎并不值得。现在，我将坚持我的垃圾邮件......

Answer 1

null如果您将来不打算分配并且它只是一个初始值，那么您可以使用：

const titleRef = useRef<HTMLHeadingElement>(null!);

后面的感叹号null告诉打字稿，它是初始值，并且该值很可能会改变。

在此处查看 Typescript-cheatsheets 注释

Answer 2

好的，我最终测试了这个。可选链接可以帮助您摆脱if代码臃肿的问题：

  const myTestRef = React.useRef<IFancyRef>(null);

  const handleClick = () => {
    myTestRef.current?.focus();
    // or
    myTestRef.current!.focus(); // this assumes you KNOW that myTestRef is assigned
  };

这里为您提供 Codesandbox