导出用于浏览器的TypeScript模块

Question

I've recently converted a canvas library I wrote into typescript. I've broken the code down into classes and they all attach themselves to a cnvs module, but i'm have a hard time compiling these down to one file.

Ideally I would like to have my files run through browserify, but at the moment i just want to get it working.

One file may look like

module cnvs {
  export class Shape {
    // stuff here
  }
}

and then another would be

/// <reference path="Shape.ts" />

module cnvs {

  export class Rect extends Shape {
    // rectangle stuff here
  }

}

Originally I was using import Shape = require('./Shape') (with some variants, like including extension and not including leading './')

In my cnvs.ts file I would to export the cnvs module, so that when it compiles I have a single file with the entire code base in, attaching to the window OR multiple files that could then be compiled with browserify into a single file.

The full code is at http://github.com/allouis/cnvs

Thanks

Answer 1

Checkout out typeify :

https://github.com/bodil/typeify

Please note it run on node.js.

Answer 2

You can simply compile the whole project using using --out out.js typescript compiler argument. This will merge all your files for you and generate an out.js.

One thing to be aware of is that the order of code in the arguments. Check out https://github.com/basarat/grunt-ts#javascript-generation-and-ordering

Answer 3

I use browserify & ```typescriptifier``'...

So you would do:

/// <reference path="Shape.ts" />

...

require("Shape.ts");

This is some of my gruntfile.js

module.exports = function (grunt) {

  grunt.initConfig({
    clean: {
      dev: ['dest/**/*.*']
    },

    browserify: {
      dev: {
        src: ['src/root.ts'],
        dest: 'dest/App.js',
        options: {
          external: ['angular'],
          transform: ['typescriptifier'],
          debug: true,
          bundleOptions: { debug: true },
          browserifyOptions: { debug: true }
        }
      }
    },
    express: {
      dev: {
        options: {
          bases: ['src'],
          port: 5000,
          hostname: '0.0.0.0',
          livereload: false
        }
      }
    },
    watch: {
      ts: {
        files: ['src/**/*.ts', '!src/**/*.d.ts'],
        tasks: ['dest'],
        options: {
          livereload: true,
          debug: false,
          debounceDelay: 100
        }
      },
      html: {
        files: ['src/**/*.css', 'src/**/*.html'],
        options: {
          livereload: true,
          debug: false,
          debounceDelay: 100,
          spawn: false
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-express');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browserify');
  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.registerTask('dev', ['rebuild', 'express:dev', 'watch' ]);
  grunt.registerTask('build', ['browserify:dev']);
  grunt.registerTask('rebuild', ['clean:dev', 'build']);
};

See https://www.npmjs.org/package/typescriptifier