使用Phaser 2+TypeScript开发游戏遇TS2304错误求解决方案

问题根源 #

Phaser 2没有官方提供TypeScript类型定义，而且它是基于全局变量的传统库结构，并非ES模块，直接用TS写代码时，编译器识别不到全局的Phaser变量，手动导入又会因为模块不兼容报错。

解决办法 #

1. 自定义类型声明文件 #

在项目里新建一个phaser.d.ts文件（放在根目录或src文件夹都可以），写入以下内容：

declare var Phaser: any;

这行代码告诉TS编译器：全局范围内存在Phaser这个变量，无需验证具体类型，可直接使用。

2. 用HTML脚本标签引入Phaser #

别用import导入Phaser 2，直接在入口HTML文件里通过<script>标签加载本地或CDN的Phaser文件：

<!-- 本地文件示例（根据你存放Phaser的路径调整） -->
<script src="./phaser/build/phaser.min.js"></script>
<!-- 或者用CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
<!-- 最后加载你的TS编译后的游戏JS文件 -->
<script src="./dist/game.js"></script>

3. 配置tsconfig.json识别类型文件 #

打开tsconfig.json，确保include数组包含你刚才创建的phaser.d.ts，比如：

{
  "compilerOptions": {
    "target": "ES5", // Phaser 2适配ES5环境
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": [
    "src/**/*",
    "phaser.d.ts"
  ]
}

这样TS编译时会读取这个类型声明，不会再报找不到Phaser的错误。

4. 直接使用全局Phaser变量 #

在TS代码里不用导入，直接写Phaser即可，比如：

const game = new Phaser.Game(800, 600, Phaser.AUTO, '', {
  preload: preload,
  create: create,
  update: update
});

function preload() {
  // 加载游戏资源
}

function create() {
  // 创建游戏对象
}

function update() {
  // 游戏帧更新逻辑
}

为什么导入会报错？ #

Phaser 2的代码是直接挂载到全局window对象上的，根本没有ES模块的导出逻辑，你用import语句去导入，TS会找不到对应的模块，自然报错。所以必须用全局引用的方式。

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