2

このようなamdモジュールを使用してjQueryをロードできます-TypeScriptでAMDを介してjqueryを要求し ますプラグインがモジュールなしでjqueryインターフェイスを変更する方法も理解しています-TypeScriptでjQueryプラグインを使用します

しかし、AMDモジュールを介してjQueryプラグインをロードするにはどうすればよいですか？そして、jQueryインターフェースを更新しましたか？

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

plugin1とjQueryの両方に別々のバージョンのjQueryインターフェースがあり、plugin1はjqueryモジュールで定義されたインターフェースに追加されません。

各ファイルのモジュールに同じ名前を付けてみました

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

しかし、それでも機能しません

4

3 に答える 3

2

github/definetelytypedのjquery.d.tsファイルの最後に以下を追加します。

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");

これは、jqueryのjsファイルが同じディレクトリにあり、jquery.jsという名前であると想定しています。私のブログのダウンロードセクションで私が持っているサンプルを見ることができます。

于 2012-11-28T19:24:02.927 に答える
2

Typescript は、何かをエクスポートしたり、エクスポートしたものを直接使用したりしない限り、モジュールをインポートしませんが、新しいメソッドを単に $ に追加する JQuery プラグインのようなものには当てはまりません。解決策は、ここに記載されているように amd-dependency フラグを使用することです。

ファイルの先頭に次のような行を追加します。

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

defineこれにより、 Typescript は、コンパイルされた Javascriptの呼び出しでそれを強制的にリストします。次のように、require.config でプラグインのパスと shim を設定する必要もあります。

require.config({
  paths: {
    jquery: "external/jquery-2.1.1",
    jgrowl: "external/jquery.jgrowl-1.4.0.min",
  },
  shim: {
    'jgrowl': { deps: ['jquery'] },
  }
});
于 2014-12-12T01:24:33.963 に答える
0

import ステートメントを使用してロードし、参照を使用して定義ファイルを追加する必要があります。

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

import plugin = module("jquery.templ");
于 2012-11-25T21:39:30.940 に答える