是功能且具有名稱空間的模塊的打字稿定義？

Question

我正在嘗試為*.d.ts -grid-layout提出一個*.d.ts文件。 如其index.js文件所示，它導出一個函數React.Component的子類，稱為ReactGridLayout ：

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

要求：

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

它還會導出其他一些分隔為名稱空間的內容：

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

因此，它執行單個出口和多個出口。

我嘗試了Typescript網站上描述的“ 模塊中的單個復雜對象”方法以及GitHub上的此聲明文件，但沒有成功。

更新

現在忽略其他內容，我對ReactGridLayout定義如下所示：

// 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 ... */

}

哪個編譯。 但是，它生成如下的Javascript：

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

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

什么時候應該是：

React.createElement(react_grid_layout_1, null, ...    

Answer 1

因為react-grid-layout是直接“而不是default ”導出ReactGridLayout類，所以您不能export default （您已經看到了發生的情況）。 我認為您必須解析為export =語法，但是這似乎將您限制為僅導出一件事。 解決此問題的一種方法是利用TypeScript的聲明合並。 導出具有相同名稱的類和名稱空間。 react-grid-layout在做什么或多或少。

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（轉譯）

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

順便說一句：您可能會發現看一下react-grid-layout的ES6代碼更加容易。