javascript - 如何在 typescript 中编写子类(React.Component)的类型定义？

Question

我正在尝试弄清楚如何为react-highlight(类Highlightable，请参阅here)编写类型定义，以便扩展Highlightable并添加自定义功能。由于原始的Highlightable JS 类是React.Component 的子类，因此我还需要在类型定义中使用React.Component 的所有方法。解决这个问题的最佳方法是什么？

这是使用 NPM 和 webpack。我正在关注this tutorial .

我尝试像这样导入和使用该组件:

import {Highlightable} from "highlightable";

然后:

<Highlightable
enabled={true}
highlightStyle={{
...

我的目标是能够说:

class MyHighlightable extends Highlightable { ...}

并覆盖方法。这就是为什么我想要一个类型定义。

我设法通过添加 declare module "highlightable"; 来进行简单的导入工作。到 index.d.ts文件位于src/@types/highlightable中。

当我现在尝试添加这样的类定义时:

 declare module "highlightable" {
   export class Highlightable {
   }
}

Typescript 当然会提示 React.Component 父类(super class)中缺少方法:

TS2607: JSX element class does not support attributes 
because it does not have a 'props' property.

因此，当使用空类主体扩展时 export class Highlightable extends React.Component<T,T> { ，在 index.d.ts并添加方法定义等。一切都会编译，但我在运行时收到此错误:

Uncaught Error: Element type is invalid: expected a string (for 
built-in components) or a 
class/function (for composite components) but got: undefined.

将突出显示的导入输出到控制台可确认其未定义。从 Definately typed 上的 React 类型定义复制并粘贴方法定义也没有帮助(仍然未定义)。

如何解决这个问题并为子类提供类型定义？如果不可能，我该如何解决它？

Answer 1

已解决，灵感来自 this post 。我的类型定义现在如下所示:

declare namespace HighlightableNs {
    class Highlightable extends React.Component<any, any> {
    }
}

declare module "highlightable" {
    export default HighlightableNs.Highlightable;
}

子类化时，我使用默认导入:

import Highlightable from "highlightable";

export class HighlightableColorMarked extends Highlightable {

现在可以正常导入自定义类了:

import {HighlightableColorMarked} from "./wordselection/HighlightableColorMarked";

如果有人知道为什么这是必要的或者有更优雅的解决方案，请随时发帖。