Как загрузить плагин JQuery через модуль AMD с помощью Typescript

Добавьте следующее в конец файла jquery.d.ts на github / definetelytyped.

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[];
}

Тогда просто используйте:

import $ = module("jquery");

Предполагается, что ваш файл js для jquery находится в том же каталоге и называется jquery.js. Вы можете увидеть имеющийся у меня образец в разделе загрузок моего блога.

Typescript не будет импортировать модули, если они не экспортируют что-либо, и если вы напрямую не используете то, что они экспортировали, но это неверно для таких вещей, как плагины JQuery, которые просто добавляют новые методы в $. Решение состоит в использовании флага amd-dependency, как описано в здесь.

Добавьте такую ​​строку вверху файла:

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

Это заставит Typescript перечислить его в вызове define в скомпилированном Javascript. Вам также необходимо указать путь и прокладку для вашего плагина в файле require.config, например:

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

Вам нужно будет загрузить его с помощью оператора импорта и добавить файл определения со ссылкой.

///<reference path="jquery.templ.d.ts" />

import plugin = module("jquery.templ");