Import TypeScript module using only ambient definition for use in amd

Question

I have a module that depends on Backbone. I have a backbone.d.ts definition but TypeScript doesn't seem to want to compile my module unless my

import Backbone = module("backbone")

actually points to a valid backbone module as opposed to a definition file. I am using AMD loaded modules and have a requirejs shim defined for backbone.

Is there a workaround besides creating a phoney backbone.ts module definition?

Update: A side effect of the solution is that code such as this no longer works because the module no longer exists. It needs to exist because of the requirejs shim. The only workaround I know of is to have two .d.ts files. One for the file using backbone as an import that does not include the declare module bit. The other for using a /// <reference that does include the declare module line.

/// <reference path="../dep/backbone/backbone.d.ts" />

interface IApi {
    version: number;
    Events: Backbone.Events;
}

Fenton · Accepted Answer · 2015-01-09 08:50:23Z

9

The TypeScript language has changed a fair bit since this original answer.

For example, to import an external module you use require (my original answer had the old module keyword):

Here is a common use case for importing backbone - using the type information from Definitely Typed:

/// <reference path="scripts/typings/backbone/backbone.d.ts" />

import bb = require('backbone');

Within the type definition, the backbone module is declared for you, which is what allows the import to be valid:

//... lots of code and then...

declare module "backbone" {
    export = Backbone;
}

So the original question could be resolved using...

/// <reference path="scripts/typings/backbone/backbone.d.ts" />

import bb = require('backbone');

interface IApi {
    version: number;
    Events: bb.Events;
}

class Api implements IApi {
    public version = 1;
    public Events: bb.Events = null;
}

For this code example, this is all that is required - but more often you will want the backbone library loaded at runtime... you can use the (officially experimental) amd-dependency comment to cause the generated define function call to include backbone.

/// <reference path="scripts/typings/backbone/backbone.d.ts" />
/// <amd-dependency path="backbone" />

import bb = require('backbone');

interface IApi {
    version: number;
    Events: bb.Events;
}

class Api implements IApi {
    public version = 1;
    public Events: bb.Events = null;
}

edited Jan 9, 2015 at 8:50

answered Oct 22, 2012 at 14:47

Fenton

253k74 gold badges404 silver badges414 bronze badges

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

2 Comments

Fenton Over a year ago

I am just trying this for real in Visual Studio and am recreating your issue. Let me see if I can fix this!

Fenton Over a year ago

In my test, I have found the Ambient Declaration must omit the module block, just like a normal module would in AMD or CommonJS.

jantimon · Accepted Answer · 2013-06-26 09:05:16Z

7

There is actually another way to handle amd in typescript:

Clone the DefinitelyTyped Github repository. It contains the jquery.d.ts, backbone.d.ts and alot of other definition files.
Link the definition files to your myfile.ts file:
/// <reference path="DefinitelyTyped/requirejs/require.d.ts" />
/// <reference path="DefinitelyTyped/jquery/jquery.d.ts" />
Add an amd dependency to the javascript library:
/// <amd-dependency path="jquery"/>
To use $ inside your myfile.ts file you can now call require:
var $ = require("jquery");

Full version of myfile.ts:

/// <reference path="DefinitelyTyped/requirejs/require.d.ts" />
/// <reference path="DefinitelyTyped/jquery/jquery.d.ts" />
/// <amd-dependency path="jquery"/>
var $ = require("jquery");

export function helloWorld() {
  $("<div>Hello World</div").appendTo(document.body);
}

If you run tsc --module amd myfile.ts you will get the following javascript code:

define(["require", "exports", "jquery"], function(require, exports) {
    var $ = require("jquery");

    function helloWorld() {
        $("<div>Hello World</div").appendTo(document.body);
    }
    exports.helloWorld = helloWorld;
});

answered Jun 26, 2013 at 9:05

jantimon

38.5k23 gold badges127 silver badges195 bronze badges

2 Comments

ryan Over a year ago

Interesting, I have not seen <amd-dependency /> before

John-Philip Over a year ago

<amd-dependency path="something"/> got me out of my errors, thanks !

Collectives™ on Stack Overflow

Import TypeScript module using only ambient definition for use in amd

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related