Question

对于NextJS应用程序，我想创建一个App（_app.tsx）类增强器，但是我无法使其工作来调用传递的基本应用程序类的静态方法。

interface Constructor<T> {
  new (...args: any[]): T;
  prototype: T;
}

class MockNextApp<P={}>{
    props: P;
    static getInitialProps = (ctx: {}) => {foo:"bar"}

    constructor(props: P) {
        this.props = props;
    }
}

function enhanceApp<T extends Constructor<MockNextApp>>(Base: T) {
    return class extends Base{
        static getInitialProps = (ctx: {}) => {
            return Base.getInitialProps();
        }
    }
}

打字稿错误，显示为：

Property 'getInitialProps' does not exist on type 'T'.

您可以查看示例here。

Answer 1

使用Constructor意味着这将是一个返回MockNextApp的构造函数，但这并没有说明Base应该具有的任何其他静态属性。

我们可以使用内联类型，该内联类型既包含构造函数签名，又包含您在函数中所需的额外静态属性：

class MockNextApp<P={}>{
    props: P;
    static getInitialProps = (ctx: {}) => ({foo:"bar"}) // I think you mean to return an object literal, without the (), the arrow function actually returns void.

    constructor(props: P) {
        this.props = props;
    }
}

function enhanceApp<T extends {
    new(...args: any[]): MockNextApp;
    getInitialProps(): { foo: string }
}>(Base: T) {
    return class extends Base{
        static getInitialProps = (ctx: {}) => {
            return Base.getInitialProps();
        }
    }
}

Typescript类增强器和静态方法

1 个答案: