[英]Re: How can I import a javascript AMD module into an external TypeScript module? (When using module.exports=…)
[英]Import TypeScript module using only ambient definition for use in amd
我有一个依赖Backbone
的模块。 我有一个backbone.d.ts
定义但TypeScript似乎不想编译我的模块,除非我的
import Backbone = module("backbone")
实际上指向有效的主干模块而不是定义文件。 我正在使用AMD加载的模块,并为骨干网定义了一个requirejs垫片。
除了创建一个虚假的backbone.ts模块定义之外,还有解决方法吗?
更新:解决方案的副作用是此类代码不再有效,因为模块不再存在。 它需要存在因为requirejs垫片。 我所知道的唯一解决方法是拥有两个.d.ts文件。 一个用于使用骨干作为导入但不包含declare module
位的文件。 另一个用于使用包含declare module
行的/// <reference
。
/// <reference path="../dep/backbone/backbone.d.ts" />
interface IApi {
version: number;
Events: Backbone.Events;
}
自从这个原始答案以来,TypeScript语言已经改变了很多。
例如,要导入外部模块,请使用require
(我的原始答案具有旧的module
关键字):
以下是导入骨干的常见用例 - 使用来自绝对类型的类型信息:
/// <reference path="scripts/typings/backbone/backbone.d.ts" />
import bb = require('backbone');
在类型定义中,为您声明了主干模块,这使得导入有效:
//... lots of code and then...
declare module "backbone" {
export = Backbone;
}
所以原来的问题可以用......来解决
/// <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;
}
对于这个代码示例,这就是所需要的 - 但更多时候您会希望在运行时加载主干库...您可以使用(官方实验性的) amd-dependency
注释来使生成的define
函数调用包含主干。
/// <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;
}
克隆DefinitelyTyped Github存储库。 它包含jquery.d.ts
, backbone.d.ts
和许多其他定义文件。
将定义文件链接到myfile.ts
文件:
/// <reference path="DefinitelyTyped/requirejs/require.d.ts" />
/// <reference path="DefinitelyTyped/jquery/jquery.d.ts" />
向javascript库添加amd依赖项:
/// <amd-dependency path="jquery"/>
要在myfile.ts
文件中使用$
,您现在可以调用require:
var $ = require("jquery");
完整版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);
}
如果运行tsc --module amd myfile.ts
您将获得以下javascript代码:
define(["require", "exports", "jquery"], function(require, exports) {
var $ = require("jquery");
function helloWorld() {
$("<div>Hello World</div").appendTo(document.body);
}
exports.helloWorld = helloWorld;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.