1

react-grid-layout*.d.tsのファイルを作成しようとしています。そのindex.jsファイルが示すように、関数をエクスポートします -呼び出されたのサブクラス:React.ComponentReactGridLayout

// 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, ...
4

1 に答える 1

2

これは、クラスを実行できないのではなくreact-grid-layout、クラスを「直接」エクスポートしているためです(何が起こるかは既に確認済みです)。構文を解決する必要があると思いますが、エクスポートするものは 1 つだけに制限されているようです。これを解決する 1 つの方法は、TypeScript の宣言のマージを利用することです。クラスと名前空間を同じ名前でエクスポートします。それは多かれ少なかれ何をしているのかです。ReactGridLayoutdefaultexport defaultexport =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;
}

ところで: の ES6 コードを見た方が簡単かもしれませんreact-grid-layout。

于 2016-06-28T16:10:47.843 に答える