Question

也许我错过了一些关于Typescript和/或React的基本概念，但我无法让以下工作：

我使用React/Typescript Boilerplate作为我的应用模板。（这里没问题）。
另一方面，我使用名为GridStack.js的普通JS库，使用$.fn.gridstack(options)扩展jQuery。将此库导入简单的HTML页面时，只需通过调用$('.grid-stack').gridstack(options)对其进行初始化即可。（仍然没有问题）。
然后我的目标是为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个文件。

如何使用Typescript和React使用第三方库（gridstack.js）

1 个答案: