如何将plotly.js导入TypeScript？

Question

我正在尝试导入plotly.jsTypeScript.使用Plotly.js安装npm.在我使用的TypeScript文件中

import 'plotly.js';

没关系但我在代码上遇到错误Plotly.<member>:

error TS2304: Cannot find name 'Plotly'

当我尝试

import Plotly = require('plotly.js');

我越来越

error TS2307: Cannot find module 'plotly.js'.

Answer 1

有一个绝对类型的版本可用于plotly.js(Github链接).这允许您在Typescript中使用普通的Javascript版本.请按照以下步骤设置您的环境:

npm install --save plotly.js
npm install --save @types/plotly.js

然后在您的代码中,您可以执行以下操作(从Github获取的示例):

import * as Plotly from 'plotly.js';

const data: Plotly.BarData[] = [
  {
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar'
  }
];

Plotly.newPlot('test', data);

最后,您需要将Typescript转换为javascript tsc并准备要包含在您的网页中的代码browserify.

这也适用于离子2!确保手动添加以下包:

npm install --save glslify
npm install --save mapbox-gl

Answer 2

结束于:

declare function require(moduleName: string): any;
var Plotly = require('plotly.js/lib/index-basic.js');

(参考index-basic.js,因为我只需要基本功能,请使用index.js作为完整的库.)

编辑(2018年2月):

现在首选的方法是将路径添加到tsconfig.json文件中,如下所示:

"compilerOptions": {
    "paths": {
        "plotly.js": [
            "../node_modules/plotly.js/lib/core.js"
        ]
    }
}

然后.ts像文件一样导入文件

import * as Plotly from 'plotly.js';

注意:在我仅core.js包含的路径(包含scatter图形)中,您可以根据需要导入其他图形.

(我在Angular CLI中使用它 - Angular 5.2和Typesript 2.7.1)

Answer 3

plotly.js basic & Co. 的类型

您还可以将类型与部分 npm 包（如基本或笛卡尔）一起使用，从v1.39.0. plotly.js 基本示例（包含scatter,pie和bar）：

npm i plotly.js-basic-dist
npm i -D @types/plotly.js

在 tsconfig.json 中添加以下内容：

"compilerOptions": {
  // make aliases absolute imports relative to the project root
  "baseUrl": "./",                
  "paths": {
    "plotly.js-basic-dist": [
      "node_modules/@types/plotly.js"
    ]
  }
}

上面的paths配置只是将您导入的plotly.js-basic-dist包映射到 中定义的那些类型@types/plotly.js，因此您可以将它们与plotly.js-basic-dist. 更多信息：

• 基本网址
• 路径

Answer 4

TS支持

npm install --save-dev @types/plotly.js`

要么

yarn add --dev @types/plotly.js`

和

import { PlotData } from "plotly.js"; // or whatever you need

?? 不要将@types安装在依赖项中，因为它们仅用于开发目的。

问题

由于您添加了plotly.js的类型，因此您希望从plotly.js而不是特定模块中导入内容。这一切都很好，直到您想将它与react一起使用，即react-plotly + plotly.js？

我知道您没有明确提及React，但是我认为您或其他遇到类似问题的人可能会发现这很有用。

我不确定您的捆绑方法，但是，我使用的是Webpack 4，目前正在研究react-plotly + plotly.js-basic-dist组合。

可能的组合是：

• react-plotly + plotly.js-basic-dist –我的选择。您可以根据需要添加更多捆绑包
• 反应图+ CDN
• 反应密谋+自定义包

有关自定义绘图包的更多信息。

这使捆束的尺寸大大减小，太阳再次照耀着我们。

但...

由于此方法将需要工厂和自定义dist，因此在撰写本文时，这些没有类型

import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);

固定

1. 创建一个@types文件夹

   

2. 将typeRoots添加到tsconfig.json

   

注意：以下方法确实修复了上述导入的类型，但是我仍然编译失败，但是按照可接受的答案，我无法解决该问题：

希望您有更好的体验！

更新

我解决了编译问题。这是因为react-plotly.js被捆绑在“ dependencies”中。对于我来说，供应商部门的处理方式如下：

npm install --save-dev @types/plotly.js`

相反，我转到react-plotly.js了devDependencies，现在可以正常工作了。