React TypeScript中HTML dialog的ref应使用什么正确类型

替换useRef泛型位置any的正确类型为 HTMLDialogElement，该类型是TypeScript内置的DOM元素类型，完全匹配原生<dialog>标签的实例接口，包含showModal()、close()、open属性等所有dialog原生API的类型定义。使用该类型替代any后，TypeScript会自动校验你对dialog实例的属性、方法调用是否合法，提供完整的代码提示，避免调用不存在的API或者传参错误。

import { useRef } from 'react'

const Modal: React.FC = () => {
  // 泛型参数替换为HTMLDialogElement，初始值保持null即可
  const modalRef = useRef<HTMLDialogElement>(null)
  
  function openModal() {
    // 增加可选链，避免组件未挂载时ref为null引发的运行时报错
    modalRef.current?.showModal()
  }

  function closeModal() {
    modalRef.current?.close()
  }

  return (
    <div>
      <button onClick={openModal}>Open</button>
      <dialog ref={modalRef}>
        <h1>Title</h1>
        <p>Info</p>
        <button onClick={closeModal}>Close</button>
      </dialog>
    </div>
  )
}

export default Modal

• 所有原生HTML元素对应的TypeScript类型遵循统一命名规则：HTML + 元素名大驼峰格式 + Element，比如div对应HTMLDivElement、按钮对应HTMLButtonElement、输入框对应HTMLInputElement，后续开发其他DOM元素的ref可以直接按这个规则匹配对应类型。
• 原示例代码存在标签闭合笔误：<button/>是自闭合标签写法，button属于双标签元素，需要使用</button>闭合，最外层容器的<div/>也需要修正为</div>，上述代码已经同步修正了这部分语法问题。

内容的提问来源于stack exchange，提问作者Leandro Antunes