How can I compile my TypeScript Phaser project such that it will find the “Phaser” namespace using only a phaser.d.ts reference path?

Question

I have been learning Phaser and TypeScript at the same time, and things are more-or-less going well.

I started off just having my index.html call phaser.js and my app.js via Script tags, which worked great. I used the /// <reference path="./node_modules/phaser/typescript/phaser.d.ts" /> format so that my IDE (PhpStorm; basically WebStorm) could do autocomplete. This worked well, also.

Unfortunately, my project has been growing, so I wanted to separate all my classes out into separate files. This is apparently easier said than done, but it seems like in 2016 the best way to do this is making all my files "external", and referencing them using the import {MyModule} from "./src/MyModule"; syntax.

The easiest way to get this to stop throwing [a ton of] errors was to create a tsconfig.json file that looks like this:

{
  "module": "commonjs",
  "target": "ES6",
  "files": [
    "app.ts"
  ]
}

So, now I include many local project-only files that have only export class XYZ { ... } in them, and they work fine... And I can autocomplete Phaser objects because of my phaser.d.ts inclusion...

...But when I compile, I get tons of errors like this: Error:(40, 10) TS2503: Cannot find namespace 'Phaser'.

I've changed so much, I'm not sure what the best way is forward.

Answer 1

get tons of errors like this: Error:(40, 10) TS2503: Cannot find namespace 'Phaser'.

Your tsconfig files should contain phaser.d.ts .

Alternatively you can remove files altogether to have TypeScript include all files under the directory containing tsconfig.json .