TypeScript, RequireJS shim, ambient module declaration

Question

I've got the following which points to a backbone.d.ts definition.

import Backbone = module("../../../dep/backbone/backbone");

export class Codebook extends Backbone.Model {

    defaults() {
        return {
            id: -1,
            title: -1
        }
    }

    initialize() {
        // do nothing
    }

}

With --module amd it generates the following.

define(["require", "exports", "../../../dep/backbone/backbone"], function(require, exports, __Backbone__) {

I've shimmed backbone with my RequireJS configuration file because of the global. I'd like for my define to just say backbone instead of the relative path. Is there any workaround besides a post-build process to manipulate the define?

Answer 1

I think the solution to this issue is to put the Ambient Declaration in the same location as the eventual real module, so you can reference it with the same path.

So backbone.d.ts needs to be in the same location as backbone.js.

Answer 2

Instead of using a relative path, I always use the path from the root. Something like:

import underscore = module('libs/underscore/underscore');

and the hack is that you can define the same name in your shim. Something like this:

require.config({
    paths: {
        'libs/underscore/underscore': 'libs/underscore/underscore'
    },
    shim: {
        'libs/underscore/underscore': {
            exports: '_'
        }
    }
});

By always using a path from the root, the path stays the same as opposed as if you were using the relative path. It's a hack, but it works for me (GitHub).

Answer 3

I have just put together a blog on how to use AMD modules in TypeScript.

Firstly, just use a reference path to backbone as follows:

/// <reference path="../../modules/Backbone.d.ts" />

Then define your class without an import:

export class MTodoCollectionView extends Backbone.View {
...
}

Then your require.config, and apploader:

require.config({
    baseUrl: '../',
    paths: {
        'underscore': 'lib/underscore',
        'backbone': 'lib/backbone'
    }, 
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        }
    }
});

require(['jquery','underscore','backbone','console','app/AppMain', 
     ], 
    ($, _, Backbone, console, main) => {
    // code from window.onload
    var appMain = new main.AppMain();
    appMain.run();
});

Once the app hits the require block of code, Backbone is globally defined.
Have fun,