Trying to setup Phaser and Typescript with gruntjs

Question

I'm trying to setup the Phaser framework with Typescript with grunt.

My Gruntfile.js looks like this:

module.exports = function (grunt) {
  // load all grunt tasks
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    typescript: {
      base: {
        src: ['game/**/*.ts'],
        dest: 'dist/js/metropolee.js',
        options: {
          module: 'amd',
          target: 'es5'
        }
      }
    },
    watch: {
      files: '**/*.ts',
      tasks: ['typescript']
    },
    connect: {
      options: {
        port: 9001,
        // change this to '0.0.0.0' to access the server from outside
        hostname: 'localhost'
      },
      livereload: {
        options: {
          middleware: function (connect) {
            return [
              lrSnippet,
              mountFolder(connect, 'dist')
            ];
          }
        }
      }
    },
    open: {
      server: {
        path: 'http://localhost:9001'
      }
    },
    copy: {
      dist: {
        files: [
          // includes files within path and its sub-directories
          { expand: true, src: ['assets/**'], dest: 'dist/' },
          { expand: true, flatten: true, src: ['game/plugins/*.js'], dest: 'dist/js/plugins/' },
          { expand: true, flatten: true, src: ['bower_components/**/build/*.js'], dest: 'dist/js/' },
          { expand: true, src: ['css/**'], dest: 'dist/' },
          { expand: true, src: ['index.html'], dest: 'dist/' }
        ]
      }
    }
  });

  grunt.registerTask('build', ['buildBootstrapper' ,'copy', 'typescript']);
  grunt.registerTask('serve', ['build', 'connect:livereload', 'open', 'watch']);
  grunt.registerTask('default', ['serve']);
  grunt.registerTask('prod', ['build', 'copy']);
  grunt.registerTask('buildBootstrapper', 'builds the bootstrapper file correctly',         function() {

  });
};

I have a single typescript code file like this:

module Metropolee
{
    export class Game extends Phaser.Game
    {
        constructor()
        {
            super(800, 600, Phaser.AUTO, "content", null);
        }
    }
}

But for some reason, when I run grunt, the following error appears:

Running "buildBootstrapper" task

Running "copy:dist" (copy) task
Created 2 directories, copied 6 files

Running "typescript:base" (typescript) task
>> /Users/drgomesp/Projects/Games/Javascript/Metropolee/game/Game.ts(4,31):
>> error TS2095: Could not find symbol 'Phaser'.
>> /Users/drgomesp/Projects/Games/Javascript/Metropolee/game/Game.ts(8,13):
>> error TS2103: 'super' cannot be referenced in non-derived classes.
>> /Users/drgomesp/Projects/Games/Javascript/Metropolee/game/Game.ts(8,29):
>> error TS2095: Could not find symbol 'Phaser'.
Warning: Task "typescript:base" failed. Use --force to continue.

Aborted due to warnings.

The Phaser name is not being loaded for some reason, and I don't know why.

Answer 1

You need to add a reference to phaser.d.ts:

/// <reference path="phaser.d.ts"/>