Repository navigation
Need to support declaration merging in external modules #2821
Description
jQuery (jQuery UI) support method extensions. If we write my own jQuery UI widget, I can do this:
In myWidget.ts:
interface JQuery {
myWidget(): JQuery
}
class myWidget {
public foo() {
// This is okay now, but will fail once we add some import statements to this file,
// because TypeScript thinks this JQuery is not that JQuery
var some: JQuery = $("#some-id").text();
}
}
$.fn.extend({
myWidget() {...}
});Then in another file:
$(selector).myWidget(); // Create a new myWidget, this is okay because of myWidget() is declared in my version of JQuery interface
$(selector).attr("id", "my-id"); // This is okay because attr is declared in jquery.d.tsHowever, this stops working when I add this line to myWidget.ts:
import helpers = require("helpers");Now TypeScript thinks there 2 JQuery interfaces, instead of merging them into one. How do I tell TypeScript that I'm not creating a new interface for this module, but need to merge it with an existing interface?
Activity
mhegazy commentedon Apr 17, 2015
by adding
importorexportto the top level scope in your file, you are truing this file into a module.Modules, as per ES6 spec, have their own scope. so your interface JQuery is a local interface, and does not merge with the global JQuery. TypeScript does not provide a way to model modules affecting global state.
To do that, you have two options:
Please note that ES6 modules have not supported this pattern, but rather a pattern of module composition, where you would import JQuery, add your extension, and export it again. users would only import your module instead of JQuery plus your module. e.g.
export * from "JQuery".cnshenj commentedon Apr 20, 2015
I like the module composition solution. Is it supported by TypeScript yet?
mhegazy commentedon Apr 20, 2015
cnshenj ES6 module syntax is supported starting form TypeScript 1.5-alpha
masaeedu commentedon Jan 14, 2016
Mohamed Hegazy (@mhegazy)
Could you please illustrate this? How would this work when I have two different modules that add different things to JQuery?
mhegazy commentedon Jan 14, 2016
See #6213 for the module augmentation support.