Question

我试图找出如何为react-highlight（类Highlightable，请参阅here）编写类型定义，以便扩展 Highlightable并添加自定义功能。由于最初的Highlightable JS-class是 React.Component 的子类，我还需要在我的类型定义中使用 React.Component 的所有方法。解决这个问题的最佳方法是什么？

这是使用NPM和webpack。我跟随this tutorial。

我尝试导入并使用这样的组件：

import {Highlightable} from "highlightable";

然后：

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

我的目标是能够说：

class MyHighlightable extends Highlightable { ...}

并覆盖方法。这就是我想要一个类型定义的原因。

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

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

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

当然，Typescript会抱怨 React.Component 超类中缺少的方法：

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.

将Highlightable导入输出到控制台确认它未定义。从明确类型上的React类型定义复制和粘贴方法定义也没有帮助（仍然未定义）。

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

Answer 1

解决，灵感来自this post。我的typedefinition现在看起来像这样：

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

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

如何在typescript中为子类（React.Component）编写类型定义？

1 个答案: