React @types与TypeScript DOM类型冲突，如何仅导入后者类型？

可以通过配置TypeScript，强制仅使用官方DOM类型，排除React提供的DOM相关类型，具体操作如下：

1. 修改tsconfig.json配置 #

在compilerOptions中指定types字段仅包含dom，这样TypeScript只会加载官方DOM类型，不会自动引入React的DOM扩展类型：

{
  "compilerOptions": {
    "types": ["dom"],
    // 保留你的其他原有配置
  }
}

2. 按需手动导入React核心类型（若需） #

如果项目仍需要React的基础类型（如组件类型、状态类型），不要依赖TypeScript自动引入，而是在需要的文件中手动导入指定类型：

import type { FC, useState } from 'react';

3. 处理残留冲突 #

• 若仍存在类型冲突，可临时开启skipLibCheck: true跳过库类型检查（不推荐长期使用，建议定位冲突根源）：

  {
    "compilerOptions": {
      "skipLibCheck": true
    }
  }
  

• 针对具体冲突类型，可通过自定义类型别名强制使用原生DOM类型：

  type NativeButtonElement = globalThis.HTMLButtonElement;
  

注意事项 #

配置后，React封装的DOM属性类型（如React.ButtonHTMLAttributes）将无法使用，需直接使用原生DOM的类型注解，比如用Partial<HTMLButtonElement>替代React的相关属性类型。

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