TypeScript构建报错：@types/react中无法找到HTMLDialogElement

嘿，这个坑我之前也踩过！本质是你那套非React代码的TypeScript配置没搭好DOM相关的类型环境，而@types/react里的类型定义（比如Dialog组件的接口）刚好依赖HTMLDialogElement这个DOM类型，所以编译器就报错了。

下面给你一步步解决的办法：

1. 检查你的非React专属TS配置文件 #

比如你可能命名成tsconfig.no-react.json这类文件，打开它看看compilerOptions里的lib配置项——HTMLDialogElement属于DOM API的一部分，必须把DOM加到lib里才行：

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM", "DOM.Iterable"], // 一定要包含DOM
    // 其他配置比如module、outDir之类的...
  },
  // 其他配置比如include/exclude...
}

另外如果你的target版本设得太低（比如ES5），也可能导致识别不了这个较新的DOM类型，建议把target改成ES2017或更高版本：

"target": "ES2017"

2. 确认@types/react和TypeScript版本兼容 #

有时候版本不匹配也会搞出这种奇怪的类型错误。你可以试试把@types/react更新到最新稳定版：

npm install @types/react@latest --save-dev

另外也检查下TypeScript版本，TS 3.2及以上的版本应该都支持HTMLDialogElement的类型定义，要是版本太老也建议更一下。

3. 可选：完全排除React类型（谨慎使用） #

如果你的非React代码完全跟React不沾边，也可以在TS配置里明确不让编译器加载@types/react的类型文件：

{
  "compilerOptions": {
    "types": [] // 只加载你需要的类型，不包含react
  },
  "exclude": ["node_modules/@types/react"]
}

不过这个方法要小心，要是你的某些依赖间接用到了React类型，可能会引发新的错误，所以优先推荐前两种方法。

总结一下，这个错误的核心就是：构建非React代码时，TS编译器还是加载了@types/react的类型，但你的配置没提供这些类型依赖的DOM环境，所以找不到HTMLDialogElement。调整lib和target配置是最直接有效的解决方式。

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