Javascript 如何使用Typescript键入ref参数

我是Typescript新手，目前正在尝试将我的一个React.js项目迁移到Typescript。我偶然发现的一件事是

refs

。我编写了一个钩子，它使用

ref

作为参数。基本上，它检测div外部是否有单击，并启动作为第二个参数传递的函数。现在我想知道如何才能键入特定的

ref

。我尝试过不同的解决方案，比如

React.reobject

，但我不认为使用

any

是个好主意吗？我可以用什么来代替？该值是

未定义的

或div（容器组件是样式化组件），请参见代码：

钩子

//如何键入'ref`？
导出函数useOnClickOutside（ref:React.reObject，handler:function）{
使用效果(
() => {
const listener=（事件：MouseEvent | TouchEvent）=>{
//如果单击ref的元素或子元素，则不执行任何操作
如果（！ref.current | | ref.current.contains（event.target））{
返回
}
处理程序（事件）
}
//鼠标孔
document.addEventListener（'mousedown'，listener）
//接触事件
document.addEventListener（'touchstart'，listener）
return（）=>{
document.removeEventListener（'mousedown'，listener）
document.removeEventListener（'touchstart'，listener）
}
},
//添加ref和handler以影响依赖关系
[ref，handler]
)
}

组成部分

  const containerRef = React.useRef()
  useOnClickOutside(containerRef, () => setIsOpen(false))

  // Some code

  <Container ref={containerRef}>
    // Some code
  </Container

const containerRef=React.useRef（）
useOnClickOutside（containerRef，（）=>setIsOpen（false））
//一些代码
//一些代码
与ref类型相关的唯一部分是这一行：

    if (!ref.current || ref.current.contains(event.target)) {

这意味着ref有一个
contains
方法，该方法将
EventTarget | null
对象作为输入，因此您需要使其工作的最低要求是：

interface ValidRefTarget {
  contains(target: EventTarget | null): any;
}

export function useOnClickOutside(ref: React.RefObject<ValidRefTarget>, handler: (event: MouseEvent | TouchEvent)=>void ) {

与ref类型相关的唯一部分是这一行：

    if (!ref.current || ref.current.contains(event.target)) {

这意味着ref有一个
contains
方法，该方法将
EventTarget | null
对象作为输入，因此您需要使其工作的最低要求是：

interface ValidRefTarget {
  contains(target: EventTarget | null): any;
}

export function useOnClickOutside(ref: React.RefObject<ValidRefTarget>, handler: (event: MouseEvent | TouchEvent)=>void ) {

您可以按中所述使用它是可选的还是您将始终获得？
ref.current.contains（event.target）
这意味着您的ref应该键入一个
contains
方法，该方法将
HTMLElement
作为输入，也就是说，ref是一个
HTMLElement
。您可以按照中所述使用它是可选的还是您将始终得到？
ref.current.contains（event.target）
这意味着您的ref应该被键入一个
contains
方法，该方法将
HTMLElement
作为输入，即ref是一个
HTMLElement
。