如何在 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 包装器，而不是可以在我的样板中使用。这是我遇到问题的地方。我在打字稿和反应之间有点迷失，我什至找到了wrapper for React 和Gridstack.js typings，但我不能让所有东西一起工作。这就是为什么我决定尝试创建自己的包装器但仍然没有成功的原因。特别是在哪里导入 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 文件。