So schreiben Sie Typescript-Definitionsdatei für das Beenden von JavaScript

Question

Ich möchte die React-Komponente https://github.com/alexkuz/react-json-tree verwenden, die in JavaScript in meinem Typoskript-Projekt geschrieben wurde.

Die Nutzung ist gemäß dem Beispiel sehr einfach in 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} /> 

Nur dieses Beispiel zum Laufen zu bringen Ich schrieb:

/// <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; 
} 

Die basierte Zusammenstellung arbeitet jetzt aber, als

mit

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

Ich bekomme die Laufzeitfehler:

SCRIPT5022: Der Elementtyp ist ungültig: erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten), aber erhalten: undefiniert. Überprüfen Sie die Rendermethode von Index.

Warnung: React.createElement: type sollte nicht null, undefined, boolean oder Zahl sein. Es sollte eine Zeichenfolge (für DOM-Elemente) oder eine ReactClass (für zusammengesetzte Komponenten) sein. Überprüfen Sie die Rendermethode von Index.

Ich bin eine neue Schreibdefinition in bestehenden JavaScript-Bibliotheken.

Also kann mir jemand einen hilfreichen Rat geben?

Answer 1

Ich konnte Ihre Fehlermeldung replizieren. Ich glaube nicht, dass Sie korrekt exportieren, JSONTree ist nicht definiert, wenn Sie es importieren (auf die Laufzeitfehlermeldung hingewiesen).

Ich habe es mit this work-in-progress-Definition zu arbeiten:

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

Und da es ein default Export ich es dann importieren wie this:

import JSONTree from "react-json-tree"; 

// ... 

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