Typescript：如何声明一个包含所有扩展通用类型的类型的类型？

Question

TLDR：Typescript 中有没有一种方法可以声明一个类型，该类型包含扩展给定接口的所有类型？

我的具体问题

我正在编写一个自定义的 React 钩子，它封装了决定一个元素是否被鼠标悬停的逻辑。它大致仿照this hook。它公开了一个应该能够接受任何 HTMLElement 的 ref：

const ref = useRef<HTMLElement>(null);

问题是，如果我尝试在任何特定的 React 元素上使用这个 ref，我会收到一个错误，告诉我这个特定的元素不完全是 HTMLElement。例如，如果我将它与 HTMLDivElement 一起使用，我会收到以下错误：argument of type HTMLElement is not assignable to parameter of type HTMLDivElement。

这里是a simple repro case of the problem above in Typescript playground

显然，我不想在我的钩子中列出所有 html 元素的类型。鉴于HTMLDivElement 扩展了HTMLElement 类型，有没有办法声明我实际追求的类型不是严格意义上的HTMLElement，而是扩展HTMLElement？

---

反应代码示例

钩子的源代码

import { useRef, useState, useEffect } from 'react';

type UseHoverType = [React.RefObject<HTMLElement>, boolean];

export default function useHover(): UseHoverType {
  const [isHovering, setIsHovering] = useState(false);
  let isTouched = false;

  const ref = useRef<HTMLElement>(null); // <-- What should the type be here?

  const handleMouseEnter = () => {
    if (!isTouched) {
      setIsHovering(true);
    }
    isTouched = false;
  };
  const handleMouseLeave = () => {
    setIsHovering(false);
  };

  const handleTouch = () => {
    isTouched = true;
  };

  useEffect(() => {
    const element = ref.current;
    if (element) {
      element.addEventListener('mouseenter', handleMouseEnter);
      element.addEventListener('mouseleave', handleMouseLeave);
      element.addEventListener('touchstart', handleTouch);

      return () => {
        element.removeEventListener('mouseenter', handleMouseEnter);
        element.removeEventListener('mouseleave', handleMouseLeave);
        element.removeEventListener('touchend', handleTouch);
      };
    }
  }, [ref.current]);

  return [ref, isHovering];
}

这样使用会产生类型错误：

import useHover from 'path-to-useHover';

const testFunction = () => {
  const [hoverRef, isHovered] = useHover();

  return (
     <div
      ref={hoverRef}
     >
      Stuff
     </div>
  );

}

上面示例中的类型错误将是：

Type 'RefObject<HTMLElement>' is not assignable to type 'string | RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined'.
  Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDivElement>'.
    Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'.

Answer 1

它按预期工作，因为 HTMLDivElement 扩展了 HTMLElement。在你的打字机操场上，你把它弄混了。我通过在playground 中切换 x 和 y 来更新它。您希望该函数扩展 HTMLElement 并将 y 和 HTMLDivElement 传递给它。这行得通。

Answer 2

我认为您对失败的分配方向有误。如果你有一个接口A，那么匹配A的所有子类的类型就叫A。这样一来，HTMLElement（即可从 分配）任何 HTML 元素，例如HTMLDivElement.

这意味着如果你有一堆函数，其中一个接受HTMLDivElement，另一个接受HTMLLinkElement 等等，那么就没有可以传递给所有函数的真实类型。这意味着您希望拥有一个既是 div 又是链接等等的元素。

根据您对问题的编辑进行编辑： 如果您的代码工作正常，而您唯一的问题是它无法编译，那么只需将您的 useHover 设为通用，如下所示：

type UseHoverType<T extends HTMLElement> = [React.RefObject<T>, boolean];

function useHover<T extends HTMLElement>(): UseHoverType<T> {
  const ref = useRef<T>(null); // <-- What should the type be here?
  ...

然后：

const testFunction = () => {
  const [hoverRef, isHovered] = useHover<HTMLDivElement>();

这样的事情会让你的代码编译得很好，而不会改变它的运行时行为。我无法判断现在的运行时行为是否符合预期。