Hur man laddar Jquery-plugin via AMD-modul med Typescript

Jag kan ladda jQuery med AMD-moduler så här - kräva jquery via AMD i TypeScript Jag förstår också hur plugins kan ändra jquery-gränssnittet utan moduler - Använda jQuery-plugin i TypeScript

Men hur laddar jag ett jQuery-plugin via AMD-moduler? Och få det att uppdatera jQuery-gränssnittet?

import plugin1 = module("jquery.tmpl");
import jQuery= module("jquery");

Både plugin1 och jQuery kommer att ha separata versioner av jQuery-gränssnittet, plugin1 lägger inte till något i gränssnittet som definieras i jQuery-modulen.

Jag har försökt namnge modulerna i varje fil samma

export module jQuery {
   // .., jQuery definitions
}

men det fungerar fortfarande inte

Svar #1

Lägg till följande i slutet av filen jquery.d.ts på github/definitelytyped.

declare module "jquery"{ 
 /****
 AJAX
*****/
export function ajax(settings: JQueryAjaxSettings): JQueryXHR;
export function ajax(url: string, settings?: JQueryAjaxSettings): JQueryXHR;

export function  ajaxPrefilter(dataTypes: string, handler: (opts: any, originalOpts: any, jqXHR: JQueryXHR) => any): any;
export function ajaxPrefilter(handler: (opts: any, originalOpts: any, jqXHR: JQueryXHR) => any): any;

export var ajaxSettings: JQueryAjaxSettings;

export function ajaxSetup(options: any);

export function get(url: string, data?: any, success?: any, dataType?: any): JQueryXHR;
export function getJSON(url: string, data?: any, success?: any): JQueryXHR;
export function getScript(url: string, success?: any): JQueryXHR;

export function param(obj: any): string;
export function param(obj: any, traditional: bool): string;

export function post(url: string, data?: any, success?: any, dataType?: any): JQueryXHR;

/*********
 CALLBACKS
**********/
export function Callbacks(flags?: string): JQueryCallback;

/****
 CORE
*****/
export function holdReady(hold: bool): any;
export function (selector: string, context?: any): JQuery;
export function (element: Element): JQuery;
export function (object: { }): JQuery;
export function (elementArray: Element[]): JQuery;
export function (object: JQuery): JQuery;
export function (func: Function): JQuery;
export function (array: any[]): JQuery;
export function (): JQuery;

export function noConflict(removeAll?: bool): Object;

export function when(...deferreds: any[]): JQueryPromise;

/***
 CSS
****/
export function css(e: any, propertyName: string, value?: any);
export function css(e: any, propertyName: any, value?: any);
export var cssHooks: { [key: string]: any; };
export var cssNumber: any;

/****
 DATA
*****/
export function data(element: Element, key: string, value: any): any;
export function data(element: Element, key: string): any;
export function  data(element: Element): any;

export function dequeue(element: Element, queueName?: string): any;

export function hasData(element: Element): bool;

export function queue(element: Element, queueName?: string): any[];
export function queue(element: Element, queueName: string, newQueueOrCallback: any): JQuery;

export function removeData(element: Element, name?: string): JQuery;

/*******
 EFFECTS
********/
export var fx: { tick: () => void; interval: number; stop: () => void; speeds: { slow: number; fast: number; }; off: bool; step: any; };

/******
 EVENTS
*******/
export function proxy(context: any, name: any): any;
export function Deferred(): JQueryDeferred;

/*********
 INTERNALS
**********/
export function error(message: any);

/*************
 MISCELLANEOUS
**************/
export var expr: any;
export var fn: any;  //TODO: Decide how we want to type this
export var  isReady: bool;

/**********
 PROPERTIES
***********/
export var browser: JQueryBrowserInfo;
export var support: JQuerySupport;

/*********
 UTILITIES
**********/
export function contains(container: Element, contained: Element): bool;

export function each(collection: any, callback: (indexInArray: any, valueOfElement: any) => any): any;

export function extend(target: any, ...objs: any[]): Object;
export function extend(deep: bool, target: any, ...objs: any[]): Object;

export function globalEval(code: string): any;

export function grep(array: any[], func: any, invert: bool): any[];

export function inArray(value: any, array: any[], fromIndex?: number): number;

export function isArray(obj: any): bool;
export function isEmptyObject(obj: any): bool;
export function isFunction(obj: any): bool;
export function isNumeric(value: any): bool;
export function isPlainObject(obj: any): bool;
export function isWindow(obj: any): bool;
export function isXMLDoc(node: Node): bool;

export function makeArray(obj: any): any[];

export function map(array: any[], callback: (elementOfArray: any, indexInArray: any) =>any): JQuery;

export function merge(first: any[], second: any[]): any[];

export function noop(): any;

export function now(): number;

export function parseJSON(json: string): Object;

//FIXME: This should return an XMLDocument
export function parseXML(data: string): any;

export function queue(element: Element, queueName: string, newQueue: any[]): JQuery;

export function trim(str: string): string;

export function type(obj: any): string;

export function unique(arr: any[]): any[];
}

Använd då bara:

import $ = module("jquery");

Detta förutsätter att din js-fil för jquery finns i samma katalog och heter jquery.js. Du kan se exemplet jag har i nedladdningssektionen på min blogg.

Svar #2

Typescript kommer inte att importera moduler om de inte exporterar något och om du inte direkt använder det de exporterat, men dessa saker gäller inte för saker som JQuery-plugins som helt enkelt lägger till nya metoder till $. Lösningen är att använda flaggan amd-dependency som dokumenteras här.

Lägg till en rad som denna högst upp i din fil:

///<amd-dependency path="jgrowl" />

Detta kommer att tvinga Typescript att lista det i define-anropet i den kompilerade Javascript. Du behöver också ställa in en sökväg och en shim för din plugin i din require.config, så här:

require.config({
  paths: {
    jquery: "external/jquery-2.1.1",
    jgrowl: "external/jquery.jgrowl-1.4.0.min",
  },
  shim: {
    'jgrowl': { deps: ['jquery'] },
  }
});