如何通過Typescript和React使用第三方庫（gridstack.js）

Question

也許我缺少Typescript和/或React的一些基本概念，但是我無法使以下內容起作用：

1. 我正在使用React / Typescript Boilerplate作為我的應用程序模板。 （這里沒有問題）。

2. 另一方面，我正在使用一個名為GridStack.js的普通JS庫，該庫通過$.fn.gridstack(options)擴展了jQuery。 當您將該庫導入簡單的HTML頁面時，只需調用$('.grid-stack').gridstack(options)對其進行初始化。 （仍然沒有問題）。

3. 然后， 我的目標是為gridstack.js創建一個TypeScript / React包裝器，該包裝器可以在我的樣板中使用 。 這是我遇到的問題。 我在打字稿和React之間有點迷路，我什至為React和Gridstack.js類型找到了一個包裝器，但是我無法使所有內容一起工作。 這就是為什么我決定嘗試創建自己的包裝程序但仍然沒有成功的原因。 特別是在哪里導入react-gridstack或gridstack以使其工作。

有人可以解釋我在想什么嗎？ 到目前為止，這是我的代碼：

gridstackWrapper.tsx ：

import * as React from 'react';
import * as $ from 'jquery';

export default class extends React.Component {
    public shouldComponentUpdate() {
        return false;
    }

    public componentDidMount() {
        $(this.refs.gridstack).addClass('a-new-class');  // THIS WORKS

        // ERROR: TypeError: $(...).gridstack is not a function
        // So basically $.fn.gridstack(options) is not working
        $(this.refs.gridstack).gridstack(this.gridstackOptions);
    }

    public render() {
        return (
            <div ref="gridstack" className="grid-stack" />
        );
    }

    private gridstackOptions = {
        float: false,
        animate: true,
        resizable: {handles: 'se, sw'},
        verticalMargin: 12,
        placeholderText: 'Move Control Here',
        minWidth: 767,
    };
}

index.tsx ：

import * as React from 'react';
import GridstackWrapper from './gridstackWrapper';

class About extends React.Component<any, any> {
  public render() {
    return (
      <GridstackWrapper />
    );
  }
}

export { About }

package.json ：

"devDependencies": {
    "@types/gridstack": "0.0.38",
    "@types/jquery": "3.2.12",
    "@types/jqueryui": "1.11.36",
    "@types/lodash": "4.14.74",
}
"dependencies": {
    "gridstack": "0.3.0",
    "jquery": "3.2.1",
    "jquery-ui": "1.12.1",
    "lodash": "4.17.4"
}

我們將不勝感激任何幫助，尤其是如果我缺少有關React和Typescript的任何基本概念時。

提前致謝！

Answer 1

您需要安裝gridstack的類型定義。

運行npm install --save-dev @types/gridstack 。

這將從DefinitelyTyped安裝.d.ts文件。