在TypeScript中导入MathJax报错：@types/mathjax/index.d.ts不是模块

我来帮你解决这个问题——你遇到的核心矛盾是**@types/mathjax的类型定义是针对MathJax 2.x的全局声明，而你试图用ES模块的方式导入它**，两者不兼容。下面分两种主流场景给出解决方案：

方案一：使用MathJax 3.x（推荐，原生支持ES模块和TypeScript） #

MathJax 3.x本身已经内置了完整的TypeScript类型定义，完全不需要额外安装@types/mathjax，这也是你报错的主要原因之一。

1. 先卸载多余的类型包：

npm uninstall @types/mathjax

2. 使用正确的ES模块导入路径：
   MathJax 3.x提供了多个预设的模块入口，根据你需要的渲染格式选择即可，比如：

// 导入包含TeX解析、MML支持和CommonHTML渲染的完整包
import { MathJax } from 'mathjax/es5/tex-mml-chtml';

或者按需拆分导入，减少打包体积：

import { MathJax } from 'mathjax/es5/chtml';
import 'mathjax/es5/input/tex'; // 引入TeX输入支持
import 'mathjax/es5/input/mml'; // 可选：引入MML输入支持

3. 配置并使用MathJax：

// 初始化配置
MathJax.config({
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']] // 定义行内公式的分隔符
  },
  chtml: {
    scale: 1.1 // 调整渲染缩放比例
  }
});

// 渲染指定元素内的公式
await MathJax.typesetPromise([document.getElementById('math-container')]);

方案二：使用MathJax 2.x（兼容旧项目） #

MathJax 2.x是基于全局脚本的设计，不支持ES模块导入，所以需要通过全局变量访问：

1. 调整tsconfig.json配置：
   确保types数组包含mathjax，同时开启allowJs以兼容全局脚本：

{
  "compilerOptions": {
    "types": ["mathjax"],
    "allowJs": true,
    "target": "ES5",
    // 其他项目配置...
  }
}

2. 在HTML中引入MathJax脚本：
   通过CDN或者本地文件引入2.x的核心脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-MML-AM_CHTML"></script>

3. 在TypeScript中直接使用全局MathJax变量：
   不需要任何import语句，直接调用全局对象：

// 配置MathJax
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
});

// 触发公式渲染
MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('math-container')]);

为什么你之前的尝试都失败了？ #

你测试的所有导入语法都失效，是因为@types/mathjax的类型定义是全局变量声明（比如declare var MathJax: MathJaxStatic;），而不是模块化的export。TypeScript会识别到这不是一个可导入的模块，因此抛出"is not a module"错误。添加types: ["mathjax"]只是让TypeScript能识别全局的MathJax变量，但无法让你用import语法导入它。

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