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

我对Typescript还是有点陌生，我的目标是在Typescript中创建一个自定义的

React.useRef

hook，它返回一个ref。我希望为任何HTML元素键入这个ref，而不仅仅是按钮。我遇到了正确键入这个自定义钩子的问题

这是我的钩子：

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

---

每当我尝试将此引用附加到按钮时。使用

HTMLButtonElement

可以消除Typescript错误，但我还是希望这个钩子能够处理任何类型的HTML元素。

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

由于

useCustomRefHook

现在是一个泛型函数，因此将键入声明为内联而不是作为一个单独的类型

CustomRefHook

更有意义

我已经允许这个钩子接受

的
任何
值
T
，但是如果您只想将它应用于HTML元素，就可以使用
T extends HTMLElement
。这可能很重要，这取决于
useffect
中“dostuff”的内容。如果“do stuff”需要有关
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;
};

您需要为元素类型使用泛型。这是什么样子的？我尝试过这样的方法：
typecustomrefhook=（依赖项？：string | boolean | number[]）=>React.MutableRefObject是的，基本上就是这样。我将键入一个答案。问：我如何将其提取到类型声明中
type CustomRefType=（依赖项：React.DependencyList）=>React.mutablereObject
const-useCustomRefHook:CustomRefType=（依赖项=[]）=>{const-ref=useRef（null）；}
我收到一个错误，说
找不到名称“T”
。如何将泛型类型提供到
React.useRef
@Linda Paiste当函数本身是泛型函数时，你不能真正提取出来，明白了吗。好吧，这是有道理的
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;
};

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

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