如何使用TypeScript键入类似jQuery的初始化模式？

Question

I'm using a jQuery-like initialization pattern in my library (I've added a few comments about the types I want these functions to accept and return):

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

const fn = jQuery.fn = jQuery.prototype = JQueryConstructor.prototype = {
  constructor: jQuery,
  __jquery: true
};

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

it works in JavaScript, but how do I write it in TypeScript so that it's properly typed?

I have these requirements/problems:

• I don't want to write a separate declaration file (this is the case for jQuery), it must be generated by TypeScript
• The outputted JavaScript by the TypeScript compiler should have basically the same size once minified, size is important for my library
• TypeScript is supposedly a superset of JS, but it looks like I can return arbitrary values from functions called as new Foo () in JavaScript, while TypeScript is complaining that only void functions can be called like that
• I need to be able to extend the prototype and have a proper declaration file generated

I couldn't find a way to solve all these problems, can you help me?

Answer 1

To address your requirements/problems in order:

• We can get the compiler to do this if our code is Typescript compliant with the "declaration": true option
• You have a pretty small example there, but once you get the plumbing right the JS TS generates should be about the same size as the JS
• Typescript is a superset of JS in that any valid JS is syntactically correct TS. Typescript does perform extra semantic checks. One such check is to not allow any function to be called with new or to not allow miss matched types. Although you can still emit JS if you have semantic errors (and by default the compiler will do so) it's recommended you fix the errors.
• Typescript allows all sorts of merging between interfaces and interfaces, interfaces and classes, classes and namespaces all of which are meant to help with type-safe extensibility. You can read more here

My solution to what you want would be to use a class instead of the function JQueryConstructor and use class-interface merging for extensibility. The result would look something like:

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 the code (minified here ) don't differ greatly from yours, Your version is 300bytes, my version compiled to es2015 is 261 bytes and compiled to es5 is 253 bytes (even if I use your longer JQueryConstructor name it's still 297 bytes). Comparing sizes on such a small example might to be all taht relevant but they seem to be comparable.

Based on the above code the following definition is generated:

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;
};

Which will work for any consumers and will allow them to use the same class-interface merging technique to provide extensibility.

Answer 2

Thanks to @titian-cernicova-dragomir I've come up with the following solution, it's somewhat verbose due to having to explicitly define all the interface, but it works:

interface jQuery {
  constructor: typeof jQueryConstructor,
  __jquery: boolean
}

function isJQuery ( x ): x is jQuery {
  return x && x['__jquery'];
}

function jQuery ( selector: string | jQuery ): jQuery {
  if ( isJQuery ( selector ) ) return selector;
  return new jQueryConstructor ( selector );
}

function jQueryConstructor ( selector: string ) {}

const fn = jQuery.fn = jQuery.prototype = jQueryConstructor.prototype = {
  constructor: jQueryConstructor,
  __jquery: true
} as jQuery;


interface jQuery {
  foo ();
}

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