locked
Debugging TypeScript in Universal apps

    Question

  • Hi,

    Is it possible to have TypeScript to generate map files in universal app project? Or how would we go about setting the project to be able to insert breakpoints directly in TS files?

    I'm currently using TypeScript with a universal app project without problems but unfortunately I'm not able to debug directly in TS, I have to set all breakpoints in JS files.

    Thank you,
    Ricardo.


    Ricardo Sabino --- http://www.ricardosabino.com | http://www.digiflare.com

    Wednesday, July 02, 2014 4:45 PM

Answers

  • Hi Ricardo,

          I just received the following response about this:

    TypeScript isn’t officially supported for doing Universal App projects, yet.  But you might be able to cobble together some experience, but there will be gaps as we fill them out.  It’s possible that debugging doesn’t quite work correctly for .jsproj, which is what I believe the Universal Apps would use.

    So it's not something that we expect should work properly. Hopefully this will change in the future. 


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by n0n4m3 Wednesday, July 16, 2014 1:51 PM
    Wednesday, July 16, 2014 11:32 AM
    Moderator

All replies

  • Hi Ricardo - I'll check with our VS people.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, July 02, 2014 7:18 PM
    Moderator
  • Hi Ricardo,

          I just received the following response about this:

    TypeScript isn’t officially supported for doing Universal App projects, yet.  But you might be able to cobble together some experience, but there will be gaps as we fill them out.  It’s possible that debugging doesn’t quite work correctly for .jsproj, which is what I believe the Universal Apps would use.

    So it's not something that we expect should work properly. Hopefully this will change in the future. 


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by n0n4m3 Wednesday, July 16, 2014 1:51 PM
    Wednesday, July 16, 2014 11:32 AM
    Moderator
  • This is an old thread, but since I found it when searching for a similar issue in December 2014, I thought I'd post my solution.

    I'm using grunt-ts.  If you go to https://www.npmjs.org/package/grunt-ts and follow the instructions for installing grunt and this library, you can get debugging in typescript files even in the Shared project of a Universal app.

    Install the grunt-ts into your ProjectDir.Windows directory (and afterwards into the ProjectDir.WindowsPhone directory.  You should have two files in the root of each:  package.json and gruntfile.js

    If you installed it correctly, package.json should be filled properly.  In your gruntfile.js file, add this code:

    module.exports = function (grunt) {
        // Do grunt-related things in here 
        "use strict";
    
        grunt.loadNpmTasks("grunt-ts");
    
        grunt.initConfig({
            ts: {
                // use to override the default options, See: http://gruntjs.com/configuring-tasks#options
                // 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)]
                    noImplicitAny: false,          // set to true to pass --noImplicitAny to the compiler. [true | false (default)]
                    fast: "watch"                  // see https://github.com/TypeStrong/grunt-ts/blob/master/docs/fast.md ["watch" (default) | "always" | "never"]
                    /* ,compiler: './node_modules/grunt-ts/customcompiler/tsc'  */ //will use the specified compiler.
                },
                // a particular target
                dev: {
                    src: ["../ProjectDir.Shared/**/*.ts"],          // The source typescript files, http://gruntjs.com/configuring-tasks#files
                    //watch: '../ProjectDir.Shared/**/*.ts',                  // 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"]);
    
    };
    
    Once this is saved, you can run "grunt" from the command line within your project directory and it will compile all the typescript files in you shared directory into js with map files.  Include those files in your project build and it will run and debug in the typescript file itself.

    Lee McPherson

    • Proposed as answer by Lee McPherson Thursday, December 04, 2014 6:04 PM
    Thursday, December 04, 2014 6:03 PM
  • Microsoft fixed this and if you have VS 2013 Update 4 you should be able to debug typescript directly in TS files without the need to install anything else.

    Ricardo Sabino --- http://www.ricardosabino.com | http://www.digiflare.com

    Thursday, December 04, 2014 7:28 PM
  • Do typescript files in the Shared project folder compile to javascript automatically in Update 4? I've been using the VS 2015 Preview and they don't work in the Shared project. I have to compile them myself. 

    Lee McPherson

    Friday, December 05, 2014 4:25 AM
  • Yes, that always worked. What didn't work was the generation of .map files that allows the debugging directly in TS files but that's now fixed. I'm pretty sure the TS support in VS2015 preview is the same or better than VS 2013.

    Try going to Tools->Options->Text Editor->TypeScript->Project and check the "Automatically compile TypeScript files which are not part of a project" and then pick one of the options "amd" or "commonjs" code generation.


    Ricardo Sabino --- http://www.ricardosabino.com | http://www.digiflare.com


    • Edited by n0n4m3 Friday, December 05, 2014 4:32 AM
    Friday, December 05, 2014 4:32 AM
  • That's interesting.  It did generate the javascript file once I set that option under Tools, but I had to change the Build Action to None or else nothing happened.  I also had to manually include the js file into the project or else it would not run.

    However, it does not create a map file.  And when I try to debug a typescript file within the Shared project in VS2015, it will not stop at a breakpoint.   I haven't tried VS2013 update 4 yet.

    As far as I can tell, the Typescript git hub issues page still claims that Universal apps are not completely supported under visual studio. 


    Lee McPherson

    Friday, December 05, 2014 5:09 PM