如何在浏览器加载的React TypeScript模块中导入类型信息？

这个问题的核心矛盾在于：TypeScript的类型系统依赖@types/react提供智能提示，但浏览器原生ES模块不支持"react"这类裸模块名的导入——Chrome 66的模块解析规则要求导入路径必须以/、./或../开头，而你的编译产物里还保留了import * as React from "react"这样的裸模块导入，所以才会抛出解析错误。

下面是针对你的场景的可行解决方案，兼顾类型检查、智能提示和浏览器运行：

方案1：使用CDN提供的ES模块版本React（快速测试首选） #

直接在TSX代码中导入React的CDN ES模块路径，这样TypeScript会自动关联@types/react的类型，浏览器也能正确解析模块：

// index.tsx
import * as React from 'https://unpkg.com/react@18/umd/react.production.min.js';
import * as ReactDOM from 'https://unpkg.com/react-dom@18/umd/react-dom.production.min.js';

// 你的组件代码
const App = () => <h1>Hello React</h1>;
ReactDOM.render(<App />, document.getElementById('root'));

然后在HTML中正常加载编译后的JS模块：

<script type="module" src="./js/Views/Home/index.js"></script>

这种方式无需额外工具，既能保留TypeScript的类型提示，又能让浏览器直接加载合法的ES模块。

方案2：使用打包工具（生产环境首选） #

原生浏览器ES模块不适合生产项目，推荐使用Vite、Webpack或Parcel这类打包工具，它们会自动处理裸模块名的解析，将React和你的代码打包成浏览器可识别的文件，同时完整保留TypeScript的类型检查：

以Vite为例：

1. 初始化React+TypeScript项目：

npm create vite@latest my-react-ts-app -- --template react-ts

2. 将你的组件代码迁移到项目的src目录下
3. 运行npm run build，生成的dist目录中的文件可直接在浏览器中加载，无需手动处理模块路径问题。

打包工具会解决所有模块解析、代码压缩、热更新等生产级需求，这也是现代React项目的标准实践。

方案3：本地映射React模块路径（仅特殊场景使用） #

如果不想用CDN或打包工具，可以将React的ES模块文件复制到项目本地，通过TypeScript的路径映射让编译器识别裸模块名：

1. 从node_modules/react/umd/和node_modules/react-dom/umd/复制react.production.min.js和react-dom.production.min.js到项目的lib目录下
2. 修改tsconfig.json的compilerOptions，添加路径映射：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "react": ["./lib/react.production.min.js"],
      "react-dom": ["./lib/react-dom.production.min.js"]
    }
  }
}

3. 在TSX中正常导入：

import * as React from 'react';
import * as ReactDOM from 'react-dom';

TypeScript会将react映射到本地文件路径，编译后的JS文件会使用相对路径导入，浏览器就能正确加载了。

为什么你之前的方案行不通？ #

• 全局变量方案：用declare var React: any会丢失TypeScript的类型检查和智能提示，any类型会屏蔽所有类型信息
• 无类型声明方案：TypeScript检测到你在模块文件中使用UMD全局变量（React/ReactDOM），因此抛出错误——UMD全局变量仅适合在非模块环境下使用
• 三斜线指令：三斜线指令仅用于告诉TypeScript加载类型定义，无法解决浏览器的模块解析问题，且@types/react已在node_modules中，TypeScript会自动识别，添加指令无意义
• tsconfig的types字段：你写错了类型包名称——正确的包名是react和react-dom（对应@types/react和@types/react-dom），写ReactDOM会导致重复导入类型，引发标识符冲突
• 导入.d.ts文件：.d.ts是类型定义文件，仅给编译器使用，不是运行时的实际代码，浏览器自然会报404错误，且TypeScript不允许直接导入.d.ts文件

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