Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to model jQuery.fn.extend using TypeScript

My guess is that the answer to this is "no" but I wanted to check there wasn't something I'd missed.

jQuery has a fn.extend method which allows you to augment the jQuery object with extra methods. Here's an example from the API docs:

jQuery.fn.extend({
  check: function() {
    return this.each(function() {
      this.checked = true;
    });
  },
  uncheck: function() {
    return this.each(function() {
      this.checked = false;
    });
  }
});

// Use the newly created .check() method
$( "input[type='checkbox']" ).check();

I've been filling out the jQuery JSDoc and tests for the DefinitelyTyped project. Previously jQuery.fn was defined as any. To bring it in line with the docs I've been looking at changing it to cover the extend method:

fn: {
    /**
     * Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.
     * 
     * @param object An object to merge onto the jQuery prototype.
     */
    extend(object: any): any;
}

However, I don't think there's a way in TypeScript to model the dynamic rather than static augmentation of methods. This means it's not possible to subsequently use these dynamically augmented methods in your TS unless you either:

  1. cast jQuery to any or
  2. use bracket notation like $("input[type='checkbox']")["check"]();

So my question: is there something I've missed? Is there a better way to model jQuery.fn so TypeScript can pick up that jQueryStatic gets assigned these dynamic methods? As I say, I think the answer is "no" but I wanted to be sure.

like image 383
John Reilly Avatar asked Jan 16 '14 15:01

John Reilly


People also ask

How to extend function in jQuery?

This extend() Method in jQuery is used to merge the contents of two or more objects together into the first object. Parameters: The extend() method accepts four parameter that is mentioned above and described below: deep: This parameter is the merge becomes recursive . target: This parameter is the object to extend.

What is FN extend?

fn. extend() method extends the jQuery prototype ( $. fn ) object to provide new methods that can be chained to the jQuery() function.

What does jQuery FN mean?

fn is an alias for jQuery. prototype which allows you to extend jQuery with your own functions. For Example: $.fn. something = function{}


1 Answers

It is a definitive no.

It would be nice to execute code in the compiler inside the definition but no such syntax exists. This is what I wish it had:


interface Foo{
   bar(member:any):any @ execute { // execute this code inside the compiler language service:
       var keys = compiler.getArgs().keys();
       compiler.getIdentifier('JQueryStatic').addMembers /// you get the point.
   }
}

But it has the potential of making the compilation slow, and would be full of edge cases, not to mention its more work that isn't on the table I presume.

like image 68
basarat Avatar answered Oct 21 '22 17:10

basarat