Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Typescript AMD Modules in Visual Studio

Tags:

typescript

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.

like image 568
mvbaffa Avatar asked Oct 06 '12 18:10

mvbaffa


2 Answers

Thanks for bringing this up mvbaffa!

On Valentin's sample if you change SiteMaster.ts to:

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

by moving the import statement out of the module declaration it will generate the correct js code. I'll open a bug on the TypeScript codeplex site and make sure this gets fixed. You can do the workaround on the current compiler [v0.8] if this is a blocking issue for you.

like image 61
Murat Sutunc Avatar answered Oct 12 '22 09:10

Murat Sutunc


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.

like image 21
Valentin Avatar answered Oct 12 '22 10:10

Valentin