Typescript-Definition für ein Modul, das eine Funktion ist und Namespaces hat?

Question

Ich versuche, eine *.d.ts Datei für React-Grid-Layout zu erstellen. Wie der index.js Datei zeigt exportiert es eine Funktion - eine Unterklasse von React.ComponentReactGridLayout genannt:

// react-grid-layout/index.js 
module.exports = require('./build/ReactGridLayout').default; 
module.exports.utils = require('./build/utils'); 
// ... 

Erfordern:

var ReactGridLayout = require('react-grid-layout'); 
console.log(ReactGridLayout); 
// --> function ReactGridLayout(props , context) { ... 

exportiert es auch einige andere Sachen in Namespaces getrennt:

for (var f in ReactGridLayout) { 
    if (ReactGridLayout.hasOwnProperty(f)) { 
    console.log(f); 
    } 
} 
// --> utils 
// ... 

So ist es ein einziger Export und mehrere Exporte.

Ich versuchte den Single Complex Object in Modules Ansatz beschrieben auf der Typoskript-Website und this declaration file on GitHub, aber ohne viel Erfolg.

aktualisieren

Ignorieren der andere Sachen für jetzt meine Definition für ReactGridLayout sieht wie folgt aus:

// react-grid-layout.d.ts 
declare module 'react-grid-layout' { 

    import * as React from 'react'; 

    export default class ReactGridLayout<P,S> extends React.Component<P,S> { 

    containerHeight():void; 

    onWidthChange(width:number):void; 

    /* more methods here ... */ 

} 

Welche kompiliert. Allerdings erzeugt es Javascript wie:

var react_grid_layout_1 = require('react-grid-layout'); 

React.createElement(react_grid_layout_1.default, null, ... 

Wenn es sein sollte:

React.createElement(react_grid_layout_1, null, ...  

Answer 1

Da die react-grid-layout ist die ReactGridLayout Klasse exportieren „direkt“ und nicht als default Sie können nicht tun ein export default (Sie‘ hab gesehen was schon passiert). Ich denke, dass Sie zu export = Syntax auflösen müssen, die jedoch scheint, Sie zu beschränken, nur eine Sache zu exportieren. Eine Möglichkeit, dies zu lösen, besteht darin, das Zusammenführen von TypScript-Deklarationen zu verwenden. Exportieren Sie eine Klasse und einen Namespace mit demselben Namen. Es ist mehr oder weniger was react-grid-layout tut.

main.tsx

import * as React from 'react' 
import * as ReactGridLayout from 'react-grid-layout' 

var grid = new ReactGridLayout(null, null); 
var responsiveGrid = new ReactGridLayout.ResponsiveReactGridLayout(null, null); 

<ReactGridLayout></ReactGridLayout> 
//<ReactGridLayout.ResponsiveReactGridLayout></ReactGridLayout.ResponsiveReactGridLayout> 

main.js (transpiled)

"use strict"; 
var React = require('react'); 
var ReactGridLayout = require('react-grid-layout'); 
var grid = new ReactGridLayout(null, null); 
var responsiveGrid = new ReactGridLayout.ResponsiveReactGridLayout(null, null); 
React.createElement(ReactGridLayout, null); 
//<ReactGridLayout.ResponsiveReactGridLayout></ReactGridLayout.ResponsiveReactGridLayout> 

types.d.ts

declare module 'react-grid-layout' { 

    import * as React from 'react'; 

    class ReactGridLayout extends React.Component<ReactGridLayout.Props, ReactGridLayout.State> { 
     // members 
    } 

    namespace ReactGridLayout { 
     export interface State { 
      activeDrag?: any; // declare LayoutItem, etc.. 
      // etc... 
     } 

     export interface Props { 
      className?: string 
      // etc... 
     } 

     export class ResponsiveReactGridLayout extends React.Component<any, any> 
     { 
      // etc 
     } 
    } 

    export = ReactGridLayout; 
} 

BTW: Sie m Es ist einfacher, sich den ES6-Code react-grid-layout anzusehen.