类型为 globalThis 的 Window 类型上不存在 DaisyUI 模式

Question

我正在尝试从 daisy ui 导入对话框组件，但收到以下错误消息：

Unsafe member access .showModal on an `any` value.eslint@typescript-eslint/no-unsafe-member-access
Unsafe call of an `any` typed value.eslint@typescript-eslint/no-unsafe-call
Unsafe return of an `any` typed value.eslint@typescript-eslint/no-unsafe-return
Property 'my_modal_2' does not exist on type 'Window & typeof globalThis'.ts(2339)

我没有篡改默认代码：

<button
              className="btn"
              onClick={() => window.my_modal_2.showModal()}
            >
              open modal
            </button>
            <dialog id="my_modal_2" 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>

有人知道发生了什么事吗？

Answer 1

示例代码是 JavaScript 代码，因此在您使用的 TypeScript 中不是类型安全的。

尝试以下命令，该命令有点冗长，但应该可以消除所有 ts 错误：

<button
  className="btn"
  onClick={() => {
    if (document) {
      (document.getElementById('my_modal_2') as HTMLFormElement).showModal();
    }
  }}
>