TypeScript - 功能在一个元素上

Question

好的，这对我来说有点难以解释。我希望能够做这样的事情在打字稿：

(function() { 
    (function($) { 
     ... 
    })(jQuery); 
}); 

我知道，当我创建一个打字稿“myclass”的构造“的构造函数（$）{...}”和出口该类它得到编译几乎相同，但我怎样才能创建“（jQuery）”参数？我喜欢做的是在jQuery元素上调用myFunction：

$("#myDiv").MyClass.myFunction(); 

所以我有我的类中的元素，并与它一起工作。

Answer 1

你可以强制一个类作为jQuery扩展，但我不推荐它。这是因为JQuery扩展依赖于this是当前JQuery对象，它是当前扩展函数调用的目标。

我建议你使用一个简单的函数。如果需要，可以在该函数内部使用一个类。下面是一个基本的jQuery扩展的打字稿：

// from jquery.d.ts 
interface JQuery{} 
declare var $:{(str:string):JQuery;fn:any;}; 

// Your code: 

// Basic jquery extension in TypeScript 
interface JQuery{ 
    myFunction(); 
} 
$.fn.myFunction = function(){ 
    console.log(this); 
} 

$("#myDiv").myFunction(); 

Answer 2

我相信这是主要的关注问题的分离。你的类应该包含你的jQuery插件的功能，而一个函数应该提供对这个功能的访问。

module MyExtension { 

    var $ = jQuery; 

    export class MyClass { 

     constructor (public $target: JQuery) {} 

     public doSomething() { 

      console.log('MyClass did something to', this.$target); 
     } 
    } 

    export function jqueryPlugin() { 

     return new MyClass(this).doSomething(); 
    } 
} 

if (jQuery) jQuery.fn.extend({ myExtension: MyExtension.jqueryPlugin });