【问题标题】:Automatically include AMD deps in Typescript AMD module?自动在 Typescript AMD 模块中包含 AMD 部门?
【发布时间】:2012-11-29 19:26:10
【问题描述】:

有没有办法导入或注释 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.

但我不知道这是否可行。

编辑:

我也尝试过这里提到的这种方法:Import TypeScript module using only ambient definition for use in 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

【问题讨论】:

  • 你找到了一个好的解决方案吗?
  • 不 - 就我而言,我开始意识到将我的 Typescript 应用程序连接到单个文件 (tsc --out) 而不用担心 AMD 会更容易,因为它不会延迟加载任何东西。跨度>
  • 我刚刚找到了 /// - 但我回家后可以先测试一下。
  • 不知道这个谢谢
  • 但我无法 100% 解决它,它增加了对依赖项的敲除,而不是对函数参数。

标签: requirejs typescript


【解决方案1】:

这个:

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

import $ = module('jquery');

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

将导致正确的define 调用:

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

请注意,如果您不在 value 位置(而不是仅在类型位置)使用导入的值(在此示例中为 $),编译器将优化该依赖项.

【讨论】:

  • 谢谢瑞恩,会试一试。虽然我知道 JS 模块空间与 CommonJS、AMD 等有点混乱,而不是 TypeScript 的错 - 在没有这些解决方法的情况下轻松地在 TS 中包含外部模块似乎很有价值。
  • 不能让它为淘汰赛工作。当 import ko = module('knockout') 后,ko 不能作为 ko.observable() 使用
【解决方案2】:

在较新版本的 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;
});

【讨论】:

    【解决方案3】:

    Ryan 的回答有效,只是新声明隐藏了三重注释“.d.ts”文件中引用的类型。

    要克服这个问题,您可能想尝试像这样更改声明:

    declare module 'knockout' { export = knockout; }
    

    我没有用淘汰赛进行测试,但解决方案也应该适用。

    【讨论】:

      猜你喜欢
      • 2016-07-29
      • 1970-01-01
      • 1970-01-01
      • 2013-04-30
      • 2013-03-05
      • 1970-01-01
      • 1970-01-01
      • 2021-08-07
      • 1970-01-01
      相关资源
      最近更新 更多