TypeScript - 键入一个返回绑定到类的静态方法的函数

Question

I'm trying to type the following code using TypeScript:

const createClass = ({ constructor, staticMethods }) => {
  // constructor can be undefined, in which case we use an empty func
  const ReturnClass = constructor || function () {};

  Object.keys(staticMethods).forEach(methodName => {
    ReturnClass[methodName] = staticMethods[methodName].bind(ReturnClass);
  });

  return ReturnClass;
}

You would use createClass like so:

const MyClass = createClass({
  constructor: function () {
    console.log("hello");
  },
  staticMethods: {
    test() {
      return new this(); // should return a new instance of MyClass
    }
  }
});

MyClass.test(); // should log to console and return new instance of MyClass

I'm struggling to get the types working. This is what I've currently got:

const createEntity = <T, U>({
  constructor,
  staticMethods
}: {
  constructor: T => void; // not sure what to do here
  staticMethods: U;       // how can I make U refer to an object of methods?
}): {
  new(...T): any,         // I saw that this is how you do a constructor, but I'm unsure
  ...U                    // not sure how to spread U
} => {

Any advice would be greatly appreciated.

Answer 1

For the signature of createClass() I think I would use overloads , both to handle the case with a constructor property and the case without (for some reason just making it optional doesn't work well), and to loosen the types so that the implementation can be written without much difficulty. Here it is:

function createClass<
    A extends any[],
    T extends object,
    M extends Record<keyof M, Function>>(arg:
        {
            constructor: ((this: T, ...args: A) => void),
            staticMethods: M & ThisType<M & (new (...args: A) => T)>
        }):
    (((new (...args: A) => T) & M));

function createClass<
    M extends Record<keyof M, Function>>(arg:
        {
            staticMethods: M & ThisType<M & (new () => object)>
        }):
    (((new () => object) & M));

function createClass({ constructor, staticMethods }:
    { constructor?: Function, staticMethods: Record<string, Function> }
) {
    const ReturnClass = (constructor || function () { }) as
        (Function & Record<string, Function>)
    Object.keys(staticMethods).forEach(methodName => {
        ReturnClass[methodName] = staticMethods[methodName].bind(ReturnClass);
    });

    return ReturnClass;
}

I'm using a lot of generics... generally, A is the list of arguments to the constructor, T is the object type the constructor is dealing with, and M is the static methods object. I use the ThisType<T> utility type to help the compiler understand what you mean by this inside the staticMethods method implementations you pass to createClass() . Instead of trying to explain each line, I'll leave it at that.

Let's see if it works. Here's a more general MyClass :

interface MyClass {
    x: string;
}
const MyClass = createClass({
    constructor: function (this: MyClass) {
        console.log("hello");
        this.x = "hey";
    },
    staticMethods: {
        test() {
            return new this();
        },
        anotherTest() {
            this.test();
        }
    }
});

const m = MyClass.test(); // hello
console.log(m.x); // hey
MyClass.anotherTest(); // hello

Here I've specified that the constructor function property will actually be constructing an object of type MyClass , an interface I defined as having an x property of type string . You can see that this works; m is known to be of type MyClass , and the MyClass constructor is known to have static methods test() and anotherTest() . And inside the implementation of these methods we can use this both as the constructor ( new this ) and the thing-with-static-methods ( this.test() ).

And let's just test the constructor -is- undefined scenario:

const EmptyCtor = createClass({
    staticMethods: {
        test() {
            console.log("goodbye");
            return new this();
        }
    }
});
const e = EmptyCtor.test(); // goodbye
console.log(typeof e); // object

Also looks good. Okay, I hope this helps give you direction; good luck!

Playground link