Question

I’m trying to use typescript with angularjs in the client-side.

I found if I use external modules, the generated js won’t be run in browser.

controllers.ts

/// <reference path="./libs/underscore.d.ts"/>

import _ = module("underscore");

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

The generated js will be:

var _ = require("underscore")
var test;
(function (test) {
    var Ctrl = (function () {
        function Ctrl($scope) {
            $scope.name = "Freewind";
            _.each($scope.name, function (item) {
            });
        }
        return Ctrl;
    })();
    test.Ctrl = Ctrl;    
})(test || (test = {}));

Which can’t run correctly. But if I remove the module("underscore") part, it will be OK.

Since I have add underscore.js in the HTML, I think it should be something wrong with the require() method. How to fix it?

Answer 1

There are two ways to load stuff in your HTML pages.

Bundling

The first one is to manually include all the script files in your page. You might run some kind of pre-release step to merge and minify your code – but you’re taking responsibility for that instead of leaving it to the code to do. This is generally called bundling.

In the case on bundling, you only use references in your TypeScript code (not imports), like this:

/// <reference path="./libs/underscore.d.ts"/>

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

Module loading

If you want to use a module loader, which for The Web is typically RequireJS, you can load External Modules using the import statement. Normally you wouldn’t need the reference in this case…

import _ = module("./libs/underscore");

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

RequireJS with non-modules

There is a third scenario, which is quite common. If you intend to import something that isn’t an External Module (such as jQuery, but underscore may also fit this pattern), you are better off using a reference and a manual call to RequireJS.

RequireJS will load the dependency for you, so you would wrap your main program with it (which would probably be in a separate file such as app.ts.

///<reference path="./libs/require.d.ts" />
///<reference path="./libs/underscore.d.ts" />

module test {
    export class Ctrl {

        constructor($scope:any) {
            $scope.name = "Freewind";
            _.each($scope.name, function(item) {});
        }
    }
}

require(['underscore'], function (_) {
    var ctrl = new test.Crtl({});
});

You can also use require.config to specify the path to underscore in your application.

  require.config({
    paths: {
        "underscore": "libs/underscore"
    }
  });