为 wrapped 类添加 TypeScript 定义

Question

我正在使用一个名为 react-server 的包，它可以接受 any class 并将在运行时向其添加方法。它期望它包装的 class 具有类似

的接口

interface {
    getElements(): Array<React.Component>
}

并且它会向 class 添加方法，例如 getRequest()，也可以从 class 内部引用。

想象一个页面 class 像：

class SimplePage {
  getElements() {
    // Right now, this wouldn't compile, because this.getRequest() is
    // not an available method.
    const request: Request = this.getRequest();
    // ...
  }
}

鉴于 this.getRequest() 在编译时实际上并不存在，并且 react-server 实际上并没有提供任何我可以从我的定义中引用的真实 classes 或接口文件，有没有什么方法可以创建一个我可以使用的定义，它指出某些东西实际上是 Page 类型，并且可以使用这些方法？

理想情况下，我希望能够在某处的定义文件 (.d.ts) 中提供这些内容，以便我可以在任何使用 react-server 的应用程序中引用它们。我也很乐意这样做，而不是每次我想引用该方法时都被迫将 this 强制转换为其他内容。

Answer 1

你有2个我能想到的选项。
给定以下接口：

interface ExtendedPage {
    getRequest(): Request;
}

(1) this parameter:

class SimplePage {
    getElements(this: SimplePage & ExtendedPage) {
        const request: Request = this.getRequest();
        // ...
    }
}

(2) 使用替代属性实现接口 (like with mixins):

class SimplePage implements ExtendedPage {
    getElements() {
        const request: Request = this.getRequest();
        // ...
    }

    getRequest: () => Request;
}

编辑

您可以声明一个 class 并扩展它：

declare class ExtendedPage {
    getRequest(): Request;
}

class SimplePage extends ExtendedPage {
    ...
}

为 wrapped 类添加 TypeScript 定义

Adding TypeScript definitions for wrapped classes

types

typescript

reactjs

react-server

编辑

为 wrapped 类 添加 TypeScript 定义

Adding TypeScript definitions for wrapped classes

types

typescript

reactjs

react-server

编辑

为 wrapped 类添加 TypeScript 定义