JavaScriptを終了するためのTypescript定義ファイルの書き方

Question

Reactコンポーネントを使用します。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; 
} 

compiliationは今

としてそれを使用しますが、動作します

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

実行時エラーが発生しました：

SCRIPT5022：要素タイプが無効です：文字列（組み込みコンポーネント用）またはクラス/関数（複合コンポーネント用）が必要ですが、未定義です。 Indexのレンダリング方法を確認してください。

警告：React.createElement：typeは、null、未定義、ブール値、または数値であってはなりません。これは文字列（DOM要素の場合）またはReactClass（複合コンポーネントの場合）でなければなりません。 Indexのレンダリング方法を確認してください。

私は既存のJavaScriptライブラリへの記述タイピングを書きました。

だから誰でも私に助言を与えることができますか？

Answer 1

エラーメッセージを再現できました。あなたが正しくエクスポートしているとは思わないが、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} />