How to extend internal class/prototype of X-Editable jQuery plugin in Typescript?

Question

In my Asp.Net MVC web page I'm using X-Editable jQuery plugin. And I have a custom complex form which extends abstractinput.

In a plain javascript it's declaration looks like the following

$.fn.editableutils.inherit(MyCustomForm, $.fn.editabletypes.abstractinput);

but I need to have it in Typescript (v0.9.5) class and I'm doing it in a naive way like this

export class MyCustomForm extends $.fn.editabletypes.abstractinput { ... }

And it is working, at least it compiles and converts to javascript, but with errors. It's OK for development (debug) to skip these errors, but when I'm publishing the project all those errors are breaking publishing process.

How to extend such structure properly?

Could not find symbol '$'. But I have jquery.d.ts typing included. Even if when I replacing '$' with JQueryStatic I'm getting a new error saying that it can't find 'fn' symbol. And so on. — Eugene G, Dec 22 '13 at 12:03

score 0 · Answer 1 · edited May 23 '17 at 11:56

$.fn.editabletypes.abstractinput is a function but is being used as a type.

If you want to extend Javascript objects in TypeScript your can try this solution: How to extend native JavaScript array in TypeScript

If the implementation of $.fn.editabletypes.abstractinput was in TypeScript, you would have to define interfaces:

interface JQueryFn //*
{
    editabletypes?: XEditableTypes;
}

interface XEditableTypes
{
    abstractinput: XEditableAbstractInput;
}

class XEditableAbstractInput { }

class MyCustomForm extends XEditableAbstractInput
{

}

However $.fn is currently defined as any, so you won't get reliable intellisense.

A Javascript object is not a type. TypeScript types only exist in TypeScript. Don't mix concepts.

How to extend internal class/prototype of X-Editable jQuery plugin in Typescript?

1 Answers1