如何编写用于退出 JavaScript 的 Typescript 定义文件

我想使用 React 组件https://github.com/alexkuz/react-json-tree https://github.com/alexkuz/react-json-tree这是在我的 typescript 项目中用 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：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。检查渲染方法Index.

我是一个为现有 JavaScript 库编写定义类型的新手。

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

我能够复制您的错误消息。我认为您导出不正确，导入时 JSONTree 未定义（由运行时错误消息暗示）。

我确实让它可以使用this https://github.com/bespoken/dashboard/blob/master/typings/react-json-tree.d.ts进行中工作的定义：

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 https://github.com/bespoken/dashboard/blob/master/src/pages/LogsPage.tsx#L4:

import JSONTree from "react-json-tree";

// ...

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