简体   繁体   中英

Automatically include AMD deps in Typescript AMD module?

Is there a way to import or annotate Typescript modules such that external AMD modules will automatically be included as dependencies when generating an AMD-compatible module?:

tsc --module AMD example.ts

I've tried to include both including a reference *.d.ts file, and exporting declare statements:

///<reference path='./lib/knockout-2.2.d.ts' />

export declare var $;
export declare var _;

export module example {
    export class Example {
        // whatever
    }
}

However the generated module does not include these:

define(["require", "exports"], function(require, exports) {
    (function (example) {
        var Example = (function () {
            function Example() { }
            return Example;
        })();
        example.Example = Example;        
    })(exports.example || (exports.example = {}));
    var example = exports.example;
})

Would really like to avoid creating "fake" modules here.

It seems like a nice solution and usage would be to allow importing AMD modules directly:

var $ = import('jquery'); // This is a requirejs/AMD module, not a typescript file.

but I don't know how feasible that is.

Edit:

And I've also tried this approach mentioned here: Import TypeScript module using only ambient definition for use in amd

import knockout = module("./lib/knockout-2.2.d.ts");
...

but get these compiler errors:

example.ts(1,32): The name '"./lib/knockout-2.2.d.ts"' does not exist in the current scope
example.ts(1,32): A module cannot be aliased to a non-module type

This:

declare module 'jquery' { export var n; };

import $ = module('jquery');

export module foo {
    var n = $.n;
}

Will result in a proper define call:

define(["require", "exports", 'jquery'], ...

Note that if you don't use an imported value ( $ in this example) in a value position (as opposed to only in type positions), the compiler will optimize away that dependency.

In the more recent versions of TypeScript the correct way to do this is...

Example (happens to be jQuery)

Step 1: Download the definition file from NuGet (ie jquery.typescript)

Step 2: Here is the code (the reference comment isn't necessary in Visual Studio):

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

import $ = require('jquery');

export module foo {
    var elem = $('#myid');
}

The resulting JavaScript:

define(["require", "exports", 'jquery'], function(require, exports, $) {
    (function (foo) {
        var elem = $('#myid');
    })(exports.foo || (exports.foo = {}));
    var foo = exports.foo;
});

Knockout

Some people were having trouble with Knockout... The same technique works for Knockout...

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

import ko = require('knockout');

export module foo {
    var obs = ko.observable('example');
}

The resulting JavaScript:

define(["require", "exports", 'knockout'], function(require, exports, ko) {
    (function (foo) {
        var n = ko.observable('example');
    })(exports.foo || (exports.foo = {}));
    var foo = exports.foo;
});

Ryan's answer worked except that the new declare hides the types referenced in the triple commented ".d.ts" file.

To overcome this, you may want to try to change the declare like this:

declare module 'knockout' { export = knockout; }

I did not test with knockout but the solution should work with that also.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM