如何为特定文件修改TSConfig lib或避免全局引入lib类型

针对你遇到的全局DOM类型导致运行时崩溃的问题，这里提供三个对应需求的可行方案：

1. 为特定文件单独配置DOM类型 #

TypeScript本身不支持文件内直接修改lib配置，但可以通过两种方式实现近似效果：

• 文件级引用指令：全局tsconfig.json不包含DOM（比如lib设为["ESNext", "ESNext.AsyncIterable"]），然后在需要使用DOM类型的文件开头添加：

  /// <reference lib="DOM" />
  

  这个指令会为当前文件额外注入DOM类型，其他文件不受影响。
• 多tsconfig拆分：创建两个配置文件，分别对应RN和RN Web场景：
  主tsconfig.json（RN专用）：

  {
    "compilerOptions": {
      "lib": ["ESNext", "ESNext.AsyncIterable"],
      "target": "ESNext",
      "module": "ESNext",
      // 其他React Native相关配置
    },
    "exclude": ["src/web/**/*"]
  }
  

  tsconfig.web.json（Web专用）：

  {
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"]
    },
    "include": ["src/web/**/*"]
  }
  

  后续打包或IDE配置时，为Web相关文件指定tsconfig.web.json即可。

2. 按需导入DOM类型，避免全局污染 #

全局DOM类型无法直接转为按需导入，但可以通过以下方式实现类似效果：

• 禁用全局DOM类型：全局tsconfig.json移除DOM，安装@types/web（包含完整DOM类型），然后在需要的文件中手动导入类型：

  import type { HTMLDivElement, HTMLImageElement } from "@types/web";
  

• 配合React Native Web组件：优先使用react-native-web提供的兼容组件，比如从react-native-web导入View/Image，而非直接使用<div>/全局Image，这样类型会自动适配RN和Web场景。如果必须使用原生HTML元素，可在文件中声明局部类型：

  import type { HTMLDivElement } from "@types/web";
  import { useRef } from "react";
  
  const MyWebComponent = () => {
    const divRef = useRef<HTMLDivElement>(null);
    return <div ref={divRef}>Web content</div>;
  };
  

3. 选择性移除不需要的全局DOM类型 #

如果必须保留全局DOM类型，可以手动覆盖或删除冲突的全局类型：
创建一个global.d.ts文件，添加如下内容：

declare global {
  // 覆盖全局Image类型，强制必须从react-native导入
  type Image = never;
  // 或者直接清空全局变量声明
  var Image: undefined;
}

export {};

这样编译时如果直接使用未导入的Image，TypeScript会报错。另外，配合ESLint规则@typescript-eslint/no-undef，可以强制所有变量必须显式导入，提前拦截未导入全局类型的代码。

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