Question

我想使用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：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。检查Index的呈现方法。

警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。检查Index的呈现方法。

我是为现有JavaScript库编写defintion typings的新手。

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

Answer 1

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

我确实让它与mentioned by mospans正在进行的工作定义一起工作：

$('.faq_toggle')

由于它是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; }导出，因此我将其导入为this：

default

如何编写用于退出JavaScript的Typescript Definition File

1 个答案: