为任何类型的 HTML 元素键入自定义 useRef 挂钩

Question

我对 Typescript 还是有点陌生​​，我的目标是在 Typescript 中创建一个自定义的 React.useRef 钩子，它返回一个引用。我希望为任何 HTML 元素输入此引用，而不仅仅是按钮。我遇到了正确键入此自定义挂钩的问题。

这是我的钩子：

type CustomRefHook = (dependencies?: string | boolean | number[]) => React.MutableRefObject<HTMLButtonElement | null>;

const useCustomRefHook: CustomRefHook = (...dependencies) => {
  const ref = React.useRef<HTMLButtonElement | null>(null);

  useEffect(() => {
    // ... do stuff
  }, dependencies)

  return ref;
}

目前，这个钩子的大部分用例都是用于按钮，但我希​​望最终将它扩展到任何类型的 HTML 元素。我试过使用 HTMLElement 而不是 HTMLButtonElement ，但是我得到一个类型错误：

Type 'MutableRefObject<HTMLElement | null>' is not assignable to type 'string | ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined'.
  Type 'MutableRefObject<HTMLElement | null>' is not assignable to type 'RefObject<HTMLButtonElement>'.
    Types of property 'current' are incompatible.
      Type 'HTMLElement | null' is not assignable to type 'HTMLButtonElement | null'.

每当我尝试将此引用附加到按钮时。使用 HTMLButtonElement 可以消除 Typescript 错误，但我希望这个钩子能够处理任何类型的 HTML 元素。

Answer 1

ref 的类型需要与它所附加的 DOM 元素完全匹配，因此需要使用泛型来指定元素类型。

由于 useCustomRefHook 现在是一个泛型函数，因此将类型声明为内联而不是单独的类型 CustomRefHook 更有意义。

我已经允许这个钩子接受T 的any 值，但是如果你只想将它应用于HTML 元素，你可以使用T extends HTMLElement。这可能很重要，具体取决于useEffect 中“做事”的内容。如果“做事”需要任何关于 T 的特定内容，那么您需要确保 T 扩展了具有所需属性/方法的内容。

import React, { MutableRefObject, DependencyList, useEffect, useRef } from "react";

const useCustomRefHook = <T extends any>( dependencies: DependencyList = [] ): MutableRefObject<T | null> => {

  const ref = useRef<T | null>(null);

  useEffect(() => {
    // ... do stuff
  }, dependencies);

  return ref;
};

钩子返回一个基于通用T 的MutableRefObject<T | null>。 T 的值不可能从参数中推断出来，因此每次调用它时都需要指定泛型。

const Test = () => {
  const ref = useCustomRefHook<HTMLButtonElement>();

  return <button ref={ref} />;
};