javascript - TypeScript - 输入一个返回绑定(bind)到类的静态方法的函数

Question

我正在尝试使用 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;
}

您可以像这样使用createClass:

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

我正在努力让这些类型正常工作。这是我目前所拥有的:

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
} => {

如有任何建议，我们将不胜感激。

Answer 1

供 createClass() 签名我想我会使用 overloads ，都用 constructor 来处理此案属性和没有的情况(出于某种原因，仅仅将其设为可选并不能很好地工作)，并放松类型，以便可以毫无困难地编写实现。这是:

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

我使用了很多泛型...一般来说，A是构造函数的参数列表，T是构造函数正在处理的对象类型，并且 M是静态方法对象。我用 ThisType<T> utility type帮助编译器理解 this 的含义里面staticMethods您传递给 createClass() 的方法实现。我不会尝试解释每一行，而是就此保留。

让我们看看它是否有效。这是更一般的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

这里我指定了 constructor function 属性实际上将构造 MyClass 类型的对象，我定义为具有 x 的接口(interface)类型属性string 。你可以看到这是有效的； m已知类型为MyClass ，以及MyClass已知构造函数具有静态方法 test()和anotherTest() 。在这些方法的实现中我们可以使用 this既作为构造函数 ( new this ) 又作为 thing-with-static-methods ( this.test() )。

让我们测试一下 constructor -是-undefined场景:

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

看起来也不错。好的，我希望这可以给你指明方向；祝你好运!

Playground link