簡體   English   中英

在Typescript AMD模塊中自動包含AMD deps?

[英]Automatically include AMD deps in Typescript AMD module?

有沒有辦法導入或注釋Typescript模塊,以便在生成與AMD兼容的模塊時,外部AMD模塊將自動作為依賴項包含在內?:

tsc --module AMD example.ts

我試圖包括引用* .d.ts文件和導出聲明語句:

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

export declare var $;
export declare var _;

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

但是生成的模塊不包括以下內容:

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;
})

真的想避免在這里創建“假”模塊。

這似乎是一個很好的解決方案,用法是允許直接導入AMD模塊:

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

但我不知道那是多么可行。

編輯:

我還嘗試了這里提到的這種方法: 僅使用環境定義導入TypeScript模塊以在amd中使用

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

但得到這些編譯器錯誤:

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

這個:

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

import $ = module('jquery');

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

將導致正確的define調用:

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

請注意,如果您不在位置使用導入的值(在此示例中為$ )(而不是僅在類型位置中),編譯器將優化該依賴項。

在較新版本的TypeScript中,正確的方法是......

示例(碰巧是jQuery)

第1步:從NuGet下載定義文件(即jquery.typescript)

第2步:這是代碼(Visual Studio中不需要引用注釋):

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

import $ = require('jquery');

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

生成的JavaScript:

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

昏死

有些人在使用Knockout時遇到了麻煩...同樣的技術適用於Knockout ......

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

import ko = require('knockout');

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

生成的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的回答是有效的,除了新聲明隱藏了三重注釋的“.d.ts”文件中引用的類型。

要克服這一點,您可能想嘗試更改聲明,如下所示:

declare module 'knockout' { export = knockout; }

我沒有用淘汰賽進行測試,但解決方案也應該可以解決。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM