reactjs - 如何编写Typescript定义文件以退出JavaScript

我想使用React组件https://github.com/alexkuz/react-json-tree
在我的打字稿项目中用JavaScript编写的。

根据示例，用法在Javascript中非常简单：

import JSONTree from 'react-json-tree'

// Inside a React component:
const json = {
  array: [1, 2, 3],
  bool: true,
  object: {
    foo: 'bar'
  }
}

<JSONTree data={json} />

为了使此示例运行，我写道：

/// <reference path="../ambient/react/index.d.ts" />

declare namespace ReactJsonTree{
    interface JSONTreeProps{
        data: any;
    }

    class JSONTree extends __React.Component<JSONTreeProps, void>{}
}

declare module "react-json-tree" {
    export = ReactJsonTree;
}

现在可以使用协调功能，但可以将其用作

import {JSONTree} from "react-json-tree";
...
<JSONTree data={somedata} />

我收到运行时错误：


  SCRIPT5022：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。检查Index的渲染方法。
  
  警告：React.createElement：type不能为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。检查Index的渲染方法。


我是将定义类型写入现有JavaScript库的新手。

那么有人可以给我一个有用的建议吗？

最佳答案

我能够复制您的错误消息。我认为您没有正确导出，导入时JSONTree是未定义的（运行时错误消息也有此提示）。

我确实将其与this正在进行的定义一起使用：

declare namespace ReactJsonTree {

    interface JSONTreeProps{
        data: any;
        hideRoot?: boolean;
        invertTheme?: boolean;
        theme?: any | string;
    }

    class JSONTree extends React.Component<JSONTreeProps, any> {}
}

declare module "react-json-tree" {
    export default  ReactJsonTree.JSONTree;
}

由于这是一个default导出，因此我像this一样导入它：

import JSONTree from "react-json-tree";

// ...

<JSONTree data={this.props.logs} />