使用DaisyUI Dialog组件遇TypeScript及ESLint类型错误求助

错误原因 #

1. TypeScript类型校验错误：TypeScript默认的Window类型定义中没有my_modal_2这个属性，它无法识别这个全局变量对应的是对话框DOM元素，因此抛出Property 'my_modal_2' does not exist on type 'Window & typeof globalThis'的错误。
2. ESLint安全校验错误：window.my_modal_2被推断为any类型，ESLint的@typescript-eslint规则会判定访问该属性、调用其方法存在安全风险，进而抛出Unsafe member access、Unsafe call这类提示。

解决方案 #

方案1：通过document.getElementById获取元素并做类型断言

直接修改按钮的点击事件代码，明确获取DOM元素并指定类型：

<button
  className="btn"
  onClick={() => {
    const modal = document.getElementById('my_modal_2') as HTMLDialogElement;
    modal.showModal();
  }}
>
  open modal
</button>

这样TypeScript能识别到modal是标准的HTMLDialogElement类型，ESLint的安全校验也会通过。

方案2：扩展Window全局类型（适合多次使用该模态框的场景）

在项目中创建一个全局类型声明文件（比如src/types/global.d.ts），添加以下内容：

interface Window {
  my_modal_2: HTMLDialogElement;
}

TypeScript会自动加载这个声明，从此就会识别window.my_modal_2是合法的对话框元素类型，解决所有类型相关错误。

方案3：使用React Ref（React项目推荐）

如果是React项目，更推荐用useRef来获取DOM元素，避免依赖全局window对象：

import { useRef } from 'react';

// 组件内部
const modalRef = useRef<HTMLDialogElement>(null);

// 按钮点击事件
const openModal = () => {
  modalRef.current?.showModal();
};

// JSX部分
<button className="btn" onClick={openModal}>open modal</button>
<dialog ref={modalRef} className="modal">
  {/* 对话框原有内容 */}
  <form method="dialog" className="modal-box">
    <h3 className="text-lg font-bold">Hello!</h3>
    <p className="py-4">Press ESC key or click outside to close</p>
  </form>
  <form method="dialog" className="modal-backdrop">
    <button>close</button>
  </form>
</dialog>

这种方式更符合React的组件开发规范，也避免了全局变量带来的潜在问题。

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