简体   繁体   English

在Typescript AMD模块中自动包含AMD deps?

[英]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?: 有没有办法导入或注释Typescript模块,以便在生成与AMD兼容的模块时,外部AMD模块将自动作为依赖项包含在内?:

tsc --module AMD example.ts

I've tried to include both including a reference *.d.ts file, and exporting declare statements: 我试图包括引用* .d.ts文件和导出声明语句:

///<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: 这似乎是一个很好的解决方案,用法是允许直接导入AMD模块:

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 我还尝试了这里提到的这种方法: 仅使用环境定义导入TypeScript模块以在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调用:

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... 在较新版本的TypeScript中,正确的方法是......

Example (happens to be jQuery) 示例(碰巧是jQuery)

Step 1: Download the definition file from NuGet (ie jquery.typescript) 第1步:从NuGet下载定义文件(即jquery.typescript)

Step 2: Here is the code (the reference comment isn't necessary in Visual Studio): 第2步:这是代码(Visual Studio中不需要引用注释):

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

import $ = require('jquery');

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

The resulting JavaScript: 生成的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... 有些人在使用Knockout时遇到了麻烦...同样的技术适用于Knockout ......

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

import ko = require('knockout');

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

The resulting JavaScript: 生成的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. Ryan的回答是有效的,除了新声明隐藏了三重注释的“.d.ts”文件中引用的类型。

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. 我没有用淘汰赛进行测试,但解决方案也应该可以解决。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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