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?

Fenton · Accepted Answer · 2012-10-22 15:46:38Z

3

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.

answered Oct 22, 2012 at 15:46

Fenton

253k74 gold badges404 silver badges414 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ryan Over a year ago

It is in the same location but the shim takes care of the export and dependencies for me without having to make the real backbone.js an amd-ified module.

Absolom · Accepted Answer · 2012-10-23 00:52:23Z

1

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).

answered Oct 23, 2012 at 0:52

Absolom

1,3892 gold badges14 silver badges29 bronze badges

Comments

blorkfish · Accepted Answer · 2012-10-23 14:55:39Z

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,

Collectives™ on Stack Overflow

TypeScript, RequireJS shim, ambient module declaration

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related