使用 TypeScript 在 React 中将类型添加到 Refs

作者

使用 TypeScript 将类型添加到 useRef React Hook

Adding Types to Refs in React using TypeScript

将类型添加到useRef钩子最初可能有点令人困惑，让我们看看为什么会这样：

import {useEffect, useRef} from 'react';

export function RefDemo() {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} />
    </div>
  );
}

代码示例导致了几个错误——当我们将鼠标悬停在 ref 属性上时，错误非常冗长且令人困惑。总之，inputRef.current可以是未定义的，不能分配给HTMLInputElement.

我们必须做几件事来修复错误：

  • 将泛型添加到useRef挂钩并HTMLInputElement作为类型传入。

    - const inputRef = useRef();
+ const inputRef = useRef<HTMLInputElement>();

    当我们将鼠标悬停在input元素上时，我们如何获得名称，我们会看到类似以下内容：

    (property) JSX.IntrinsicElements.input: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>

    我们可以看到类型是HTMLInputElement. 我们还可以在 VSCode 中按住 control 单击并读取声明文件以获取任何元素的类型。

  • 即使在添加泛型之后，打字稿告诉我们——我们可能实际上没有将 ref 传递给输入元素，因此因为我们没有将初始值传递给useRefref 的值可能是未定义的。所以我们必须告诉 TypeScript 的值inputRef.current被初始化为
    null并且是null或者HTMLInputElement。

    import {useEffect, useRef} from 'react';

export function RefDemo() {
  const inputRef = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    inputRef?.current?.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} />
    </div>
  );
}

TypeScript 不知道我们是否要将 ref 分配给输入元素，因此我们仍然必须有条件地调用focus()ref 上的函数。

–