I'm looking for a way to implement a jQuery-style initialization pattern using TypeScript - how can I

Question

I'm looking for a way to implement a jQuery-style initialization pattern using TypeScript - how can I

My library utilizes a jQuery-like initialization pattern, along with some specific requirements for the types it should accept and return:

function JQueryInitializer ( selector /*: string | INSTANCE_OF_JQUERY*/ ) {
  if ( selector.__jquery ) return selector;
}
function initJQuery ( selector/*: string | INSTANCE_OF_JQUERY*/ )/*: INSTANCE_OF_JQUERY*/ {
  return new JQueryInitializer( selector );
}

const plugin = initJQuery.fn = initJQuery.prototype = JQueryInitializer.prototype = {
  constructor: initJQuery,
  __jquery: true
};

plugin.customFunction = function () {};
initJQuery( '*' ).customFunction; // => Function
const $mockObject = { __jquery: true, customFunction() {} };
initJQuery( $mockObject ) === $mockObject; // => true

Although it functions correctly in JavaScript, I am unsure how to properly type it in TypeScript.

Here are the challenges I'm facing:

I prefer not to create a separate declaration file as is done with jQuery, rather have TypeScript generate it
The minified outputted JavaScript size after compilation must remain relatively the same, maintaining code efficiency for my library
In JavaScript, I can return arbitrary values from functions called with new Foo(), whereas TypeScript restricts this behavior to only void functions
I need the ability to extend the prototype and ensure a well-defined generated declaration file

I haven't been able to resolve all these issues simultaneously. Any assistance would be greatly appreciated!

javascript jquery typescript

Answer 1

Answer №1

To tackle the issues you've presented in a systematic manner:

If we ensure our code is compliant with `Typescript` by setting the `declaration` option to true, the compiler can handle this task
Although the example you provided is small, once the initial setup is correct, the generated JS TS should be similar in size to plain JavaScript
Typescript serves as an extension of JS, where any valid JS code is also syntactically correct in TS. However, Typescript conducts additional semantic checks such as disallowing calling functions with `new` or mismatched types. It is advised to rectify semantic errors before compiling to JS.
Typescript offers various merging possibilities between interfaces, classes, and namespaces for achieving type-safe extensibility. Further information can be found here

In my proposed solution, I suggest utilizing a class instead of the function `JQueryConstructor` and implementing class-interface merging for enhanced extensibility. The revised approach would resemble:

class JQuery{
    __jquery!: boolean; // Just the declaration
    constructor(selector: string | JQuery)  {
        if(typeof selector !== 'string' && selector.__jquery) return selector;
    }
}
JQuery.prototype.__jquery = true;

function foo() { };
interface JQuery {
    foo: typeof foo
}
JQuery.prototype.foo = foo;



function jQuery(selector: string | JQuery): JQuery {
    return new JQuery(selector);
}


jQuery('*').foo; // => Function
const $mocked = { __jquery: true, foo() { } };
jQuery($mocked) === $mocked; // => true

The minified versions of both codes don't exhibit significant differences. On this compact example, your version occupies 300 bytes while my revised version compiled to es2015 uses 261 bytes and when compiled to es5, it amounts to 253 bytes (even with the longer name `JQueryConstructor`, it's still at 297 bytes). Although comparing sizes on such a small scale may not be entirely relevant, they appear comparable.

Following the above code, the subsequent definition is produced:

declare class JQuery {
    __jquery: boolean;
    constructor(selector: string | JQuery);
}
declare function foo(): void;
interface JQuery {
    foo: typeof foo;
}
declare function jQuery(selector: string | JQuery): JQuery;
declare const $mocked: {
    __jquery: boolean;
    foo(): void;
};

This generated definition will cater to all users and enable them to implement the same class-interface merging technique for extending functionality.

Answer 2

To tackle the issues you've presented in a systematic manner:

If we ensure our code is compliant with `Typescript` by setting the `declaration` option to true, the compiler can handle this task
Although the example you provided is small, once the initial setup is correct, the generated JS TS should be similar in size to plain JavaScript
Typescript serves as an extension of JS, where any valid JS code is also syntactically correct in TS. However, Typescript conducts additional semantic checks such as disallowing calling functions with `new` or mismatched types. It is advised to rectify semantic errors before compiling to JS.
Typescript offers various merging possibilities between interfaces, classes, and namespaces for achieving type-safe extensibility. Further information can be found here

In my proposed solution, I suggest utilizing a class instead of the function `JQueryConstructor` and implementing class-interface merging for enhanced extensibility. The revised approach would resemble:

class JQuery{
    __jquery!: boolean; // Just the declaration
    constructor(selector: string | JQuery)  {
        if(typeof selector !== 'string' && selector.__jquery) return selector;
    }
}
JQuery.prototype.__jquery = true;

function foo() { };
interface JQuery {
    foo: typeof foo
}
JQuery.prototype.foo = foo;



function jQuery(selector: string | JQuery): JQuery {
    return new JQuery(selector);
}


jQuery('*').foo; // => Function
const $mocked = { __jquery: true, foo() { } };
jQuery($mocked) === $mocked; // => true

The minified versions of both codes don't exhibit significant differences. On this compact example, your version occupies 300 bytes while my revised version compiled to es2015 uses 261 bytes and when compiled to es5, it amounts to 253 bytes (even with the longer name `JQueryConstructor`, it's still at 297 bytes). Although comparing sizes on such a small scale may not be entirely relevant, they appear comparable.

Following the above code, the subsequent definition is produced:

declare class JQuery {
    __jquery: boolean;
    constructor(selector: string | JQuery);
}
declare function foo(): void;
interface JQuery {
    foo: typeof foo;
}
declare function jQuery(selector: string | JQuery): JQuery;
declare const $mocked: {
    __jquery: boolean;
    foo(): void;
};

This generated definition will cater to all users and enable them to implement the same class-interface merging technique for extending functionality.

Answer 3

Answer №2

With the help of @titian-cernicova-dragomir, I have devised a solution that may seem lengthy because it requires explicitly defining all interfaces, but it gets the job done:

interface CustomjQuery {
  constructor: typeof jQueryConstructor,
  __customjquery: boolean
}

function checkIfCustomJQuery ( x ): x is CustomjQuery {
  return x && x['__customjquery'];
}

function CustomjQuery ( selector: string | CustomjQuery ): CustomjQuery {
  if (checkIfCustomJQuery(selector)) return selector;
  return new jQueryConstructor(selector);
}

function jQueryConstructor ( selector: string ) {}

const customFn = CustomjQuery.fn = CustomjQuery.prototype = jQueryConstructor.prototype = {
  constructor: jQueryConstructor,
  __customjquery: true
} as CustomjQuery;


interface CustomjQuery {
  foo ();
}

customFn.foo = function () {};
CustomjQuery('*').foo; // => Function
const $mocked = { __customjquery: true, foo () {} } as CustomjQuery;
CustomjQuery($mocked) === $mocked; // => true
CustomjQuery('*') instanceof CustomjQuery; // => true

Answer 4

With the help of @titian-cernicova-dragomir, I have devised a solution that may seem lengthy because it requires explicitly defining all interfaces, but it gets the job done:

interface CustomjQuery {
  constructor: typeof jQueryConstructor,
  __customjquery: boolean
}

function checkIfCustomJQuery ( x ): x is CustomjQuery {
  return x && x['__customjquery'];
}

function CustomjQuery ( selector: string | CustomjQuery ): CustomjQuery {
  if (checkIfCustomJQuery(selector)) return selector;
  return new jQueryConstructor(selector);
}

function jQueryConstructor ( selector: string ) {}

const customFn = CustomjQuery.fn = CustomjQuery.prototype = jQueryConstructor.prototype = {
  constructor: jQueryConstructor,
  __customjquery: true
} as CustomjQuery;


interface CustomjQuery {
  foo ();
}

customFn.foo = function () {};
CustomjQuery('*').foo; // => Function
const $mocked = { __customjquery: true, foo () {} } as CustomjQuery;
CustomjQuery($mocked) === $mocked; // => true
CustomjQuery('*') instanceof CustomjQuery; // => true

I'm looking for a way to implement a jQuery-style initialization pattern using TypeScript - how can I

Answer №1

Answer №2

Similar questions

Utilize Boolean operators such as AND, OR, and NOT to locate specific keywords within a text, mirroring the search capabilities

Javascript code that enables me to specify the type of weather

Vuetify Autocomplete that allows for adding values not in the predefined list

Endless loop in React Native with an array of objects using the useEffect hook

Issue with converting form data to JSON format

What is the proper way to type a collection and put it into action?

Tips on combining multiple HTML tags within a single div element

Retrieving JSON information stored in a JavaScript variable

Altering the hover functionality for dynamically created class elements

Is it necessary for the version of the @types packages in TypeScript to match their non-types packages?

Retrieving data for a route resolver involves sending HTTP requests, where the outcome of the second request is contingent upon the response from the first request

Unable to change the color of InputBase component's placeholder in React.js

The requirement of the second parameter being optional or required will depend on the value of the first

Accessing a form by inputting a personal identification number

Leverage TypeScript generics to link props with state in a React class-based component

Bring in exclusively typescript module declarations

Error in NextJS: The name 'NextApplicationPage' cannot be found

Firefox seems to handle webpages smoothly, whereas IE struggles to display them properly

Using checkboxes to filter a list within a ReactiveForm can result in a rendering issue

angular2 variable turns null during post request, synchronization breakdown