Typescript AMD Modules in Visual Studio

Question

I am starting with TypeScript using Visual Studio 2012 Ultimate. I have changed my MSBuild including the --module amd tag in the compiler command. The compiler started to generate AMD modules.

I have include in my project RequireJS from Nuget Packages and include in my main HTML this line:

<script type="text/javascript" data-main="scripts/SiteMaster"  src="scripts/require.min.js"></script>

I have two Modules SiteMaster and Authenticate. The module SiteMaster is simple:

export module SiteMaster {
    import auth = module("Authenticate");
    auth.Authenticate.run();
}

It just imports the Authenticate module and calls the function run(). The js for SiteMaster is like this:

define(["require", "exports"], function(require, exports) {
(function (SiteMaster) {
    var auth = __auth__;

    auth.Authenticate.run();
})(exports.SiteMaster || (exports.SiteMaster = {}));

})

The problem is that when I browse the solution I receive the error:

Microsoft JScript runtime error: '__auth__' is undefined

How can I solve this problem ???

Thanks in advance.

Valentin Valentin · Accepted Answer · 2012-10-06T20:10:18

I am pretty much convinced that this is an error in the compiler. I have reproduced the issue using the following source files:

Authenticate.ts

export var Authenticate = { 
    run : function() {
        console.log("Run!");
    }
}

SiteMaster.ts

export module SiteMaster {
    import auth = module("Authenticate");
    auth.Authenticate.run();
}

test.html

<html>
    <head>
        <script type="text/javascript" data-main="SiteMaster"  src="http://requirejs.org/docs/release/2.1.0/minified/require.js"></script>
    </head>
    <body>
        <p>Test</p>
    </body>
</html>

I compile the typescripts using

tsc --module amd SiteMaster.ts Authenticate.ts

When I open the test.html in Firefox with Firebug, I get the following error:

ReferenceError: __auth__ is not defined
var auth = __auth__;

The compiled code for SiteMaster.js looks as follows:

define(["require", "exports"], function(require, exports) {
    (function (SiteMaster) {
        var auth = __auth__;

        auth.Authenticate.run();
    })(exports.SiteMaster || (exports.SiteMaster = {}));

})

Judging from TypeScript's language specification section 9.4.3 AMD Modules I would expect something along the lines of:

define(["require", "exports", "authenticate"], function(require, exports, authenticateModule) {
    (function (SiteMaster) {
        var auth = authenticateModule;

        auth.Authenticate.run();
    })(exports.SiteMaster || (exports.SiteMaster = {}));

})

This is in line with the examples in the language specification. If others agree, we might submit a bug with the TypeScript team.

Typescript AMD Modules in Visual Studio

2 Answers