Compiling "Shared" typescript files... grunt?

Dec 4, 2014 at 3:34 AM
How are you compiling the typescript in your Shared project folder? Visual Studio doesn't seem to be able to compile it yet. I've seen suggestions to use grunt in order to convert them to javascript, but I haven't figured out if there's a way to automate it for every build.

What tool do you use? Thanks!
Dec 4, 2014 at 5:11 PM
I'll answer my own question:

grunt-ts seems to work pretty well. For anyone else, follow the instructions on their site for installing it and install it into your Project.Windows folder. (So you should have both a packages.json and Gruntfile.js in that folder)

Reconfigure the Gruntfile.js to look like this:
module.exports = function (grunt) {
    // Do grunt-related things in here 
    "use strict";


        ts: {
            // use to override the default options, See:
            // these are the default options to the typescript compiler for grunt-ts:
            // see `tsc --help` for a list of supported options.
            options: {
                compile: true,                 // perform compilation. [true (default) | false]
                comments: false,               // same as !removeComments. [true | false (default)]
                target: 'es5',                 // target javascript language. [es3 (default) | es5]
                module: 'amd',                 // target javascript module style. [amd (default) | commonjs]
                sourceMap: true,               // generate a source map for every output js file. [true (default) | false]
                sourceRoot: '',                // where to locate TypeScript files. [(default) '' == source ts location]
                mapRoot: '',                   // where to locate .map.js files. [(default) '' == generated js location.]
                declaration: false,            // generate a declaration .d.ts file for every output js file. [true | false (default)]
                //htmlModuleTemplate: 'My.Module.<%= filename %>',    // Template for module name for generated ts from html files [(default) '<%= filename %>']
                //htmlVarTemplate: '<%= ext %>',                      // Template for variable name used in generated ts from html files [(default) '<%= ext %>]
                // Both html templates accept the ext and filename parameters.
                noImplicitAny: false,          // set to true to pass --noImplicitAny to the compiler. [true | false (default)]
                fast: "watch"                  // see ["watch" (default) | "always" | "never"]
                /* ,compiler: './node_modules/grunt-ts/customcompiler/tsc'  */ //will use the specified compiler.
            // a particular target
            dev: {
                src: ["../TVLibrary.Shared/**/*.ts"],          // The source typescript files,
                //html: ['app/**/**.tpl.html'],  // The source html files,
                //reference: 'app/reference.ts', // If specified, generate this file that you can use for your reference management
                //out: 'app/out.js',             // If specified, generate an out.js file which is the merged js file
                //watch: 'app',                  // If specified, watches this directory for changes, and re-runs the current target
                // use to override the grunt-ts project options above for this target
                options: {
                    module: 'commonjs',

    grunt.registerTask("default", ["ts:dev"]);

The biggest change is that I'm pointing the src path to the Project.Shared folder instead of the Project.Windows folder. You can then run grunt and it will compile everything. I believe you can set a watch so that you run grunt once and it automatically recompiles when the typescript files change. Also, there's probably a way to cause Visual Studio to run grunt when you build... but I haven't figured that out yet.
Dec 6, 2014 at 3:08 PM
Hi Lee,
grunt is a good solution at this stage since the option "TypeScriptCompile" seems not to be supported in shared projects at this stage.