TypeScript, RequireJS Gasket, Environment Module Declaration

Question

I have the following that points to the definition of backbone.d.ts.

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 copied the trunk with my RequireJS configuration file because of the global one. I would like my define to simply say backbone instead of a relative path. Is there any workaround besides the post-build process for managing the definition?

Answer 1

I think the solution to this problem is to put the ambient declaration in the same place as in the final valid module, so you can refer to it with the same path.

So backbone.d.ts should be in the same place as backbone.js .

Answer 2

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

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

and hacking is that you can define the same name in your pad. Something like that:

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

Always using the path from the root, the path remains the same as if you were using the relative path. This is a hack, but it works for me ( GitHub ).

Answer 3

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

First, just use the link path to the trunk as follows:

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

Then define your class without 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(); }); 

As soon as the application enters the required code block, the Backbone will be defined globally.
Good luck