如何将 plotly.js 导入 TypeScript？

How to import plotly.js into TypeScript?

提问by eXavier

I'm trying to import plotly.jsinto TypeScript. Plotly.js is installed using npm. In my TypeScript file I use

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

import 'plotly.js';

It's OK but I'm getting error on code like Plotly.<member>:

没关系，但我在代码上遇到错误，例如Plotly.<member>：

error TS2304: Cannot find name 'Plotly'

When I try

当我尝试

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

I'm getting

我越来越

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

采纳答案by eXavier

Ended up with:

结束了：

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

(Referring to index-basic.js as I need just the basic functionality, use index.js for the full library.)

（参考 index-basic.js 因为我只需要基本功能，使用 index.js 作为完整库。）

EDIT (Feb 2018):

编辑（2018 年 2 月）：

The preferred way now is adding path into tsconfig.jsonfile, like this:

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

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

and then import in .tsfile like

然后.ts像这样导入文件

import * as Plotly from 'plotly.js';

Note: in the path I included only core.js, which contains scattergraphs, you can import other graphs as you need.

注意：在我只core.js包含的路径中，包含scatter图形，您可以根据需要导入其他图形。

(I'm using it with Angular CLI - Angular 5.2 and Typesript 2.7.1)

（我将它与 Angular CLI 一起使用 - Angular 5.2 和 Typesript 2.7.1）

回答by Ronald Ligteringen

There is a Definitely Typed version available for plotly.js (Github link). This allows you to use the plain Javascript version inside Typescript. Follow these steps to setup your environment:

plotly.js 有一个确定类型的版本（Github 链接）。这允许您在 Typescript 中使用纯 Javascript 版本。请按照以下步骤设置您的环境：

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

Then in your code you can do the following (example taken from Github):

然后在您的代码中，您可以执行以下操作（示例来自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);

Finally you need to convert the Typescript to javascript with tscand prepare the code to be included in you webpage with browserify.

最后，您需要将 Typescript 转换为 javascript，tsc并使用browserify.

This also works now with ionic 2! Make sure you manually add the following packages:

这现在也适用于 ionic 2！确保您手动添加以下包：

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

回答by Roland Jegorov

TS support

TS 支持

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

or

或者

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

and

和

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

??Don't install @types in dependencies since they are used exclusively for development purposes.

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

Problem

问题

Since you add types for plotly.js, you expect to import stuff from plotly.jsinstead of a specific module. This is all good until you want to use it with react i.e. react-plotly + plotly.js??

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

I know you didn't mention React explicitly, but I figured you or anyone else with a similar issue might find this useful.

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

I am not sure about your bundling approaches, however, I'm using Webpack 4 and currently investigating a react-plotly + plotly.js-basic-distcombination.

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

Possible combinations are:

可能的组合是：

• react-plotly + plotly.js-basic-dist– my choice. You can add more bundles if needed
• react-plotly + CDN
• react-plotly + custom bundle

• react-plotly + plotly.js-basic-dist– 我的选择。如果需要，您可以添加更多捆绑包
• react-plotly + CDN
• react-plotly + 自定义包

More about customising plotly bundles.

更多关于自定义 plotly bundles。

This brings the bundle size down significantly and the sun shines upon us once again.

这使包的大小显着减小，阳光再次照耀在我们身上。

BUT...

但...

Since this approach will require a factory and custom dist, these, as of this writing, don't have types

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

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

FIX

使固定

1. Create a @types folder

   

2. Add typeRoots to tsconfig.json

   

1. 创建一个@types 文件夹

   

2. 将 typeRoots 添加到 tsconfig.json

   

N.B.The following approach did fix the types for the above imports, but I still have a failing compilation, which I didn't manage to fix following the accepted answer:

注意以下方法确实修复了上述导入的类型，但我仍然有一个失败的编译，在接受的答案之后我没有设法修复它：

Hope you have a better experience!

希望你有更好的体验！

---

---

UPDATE

更新

I fixed the compiling issue. It was because react-plotly.js was being bundled in the 'dependencies`. For my case vendor deps are handled like this:

我修复了编译问题。这是因为 react-plotly.js 被捆绑在 'dependencies' 中。对于我的案例，供应商部门的处理方式如下：

/**
 * Given an array of files this will produce an object which contains the values for the vendor entry point
 */
function makeVendorEntry(config) {
    const packageJson = require('../package.json');
    const vendorDependencies = Object.keys(packageJson['dependencies']);

    const vendorModulesMinusExclusions = vendorDependencies.filter(vendorModule =>
        config.mainModules.indexOf(vendorModule) === -1 && config.modulesToExclude.indexOf(vendorModule) === -1);

    return vendorModulesMinusExclusions;
}

exports.makeVendorEntry = makeVendorEntry;

Instead I moved react-plotly.jsto the devDependencies and it works fine now.

相反，我转向react-plotly.js了 devDependencies，现在它工作正常。

回答by Pelle Jacobs

If the npm library you are importing does not provide type declarations itself, you'll have to import them yourself. The preferred tool is typings.

如果您要导入的 npm 库本身不提供类型声明，则您必须自己导入它们。首选工具是typings。

For plotly, it seems someone already made a declaration file. So once you have typings installed (npm i -g typings) you can search for the type declaration of plotly (typings search plotly). You'll see that there is a declaration file available on Definitely Typed. After you initialize typings for your project (typings init), you can install the declaration file (typings i --global --save plotly.js).

对于情节，似乎有人已经制作了声明文件。因此，一旦您安装npm i -g typings了typings ( typings search plotly)，您就可以搜索plotly ( )的类型声明。您会看到在绝对类型上有一个可用的声明文件。在为您的项目 ( typings init)初始化类型后，您可以安装声明文件 ( typings i --global --save plotly.js)。

Notice the --global. This specific declaration file is a global declaration file. This means that you don't have to import any types, as the types are available everywhere in your project. Eg.

请注意--global. 这个特定的声明文件是一个全局声明文件。这意味着您不必导入任何类型，因为这些类型在您的项目中随处可用。例如。

// app.ts
let myPlotlyConfig: PlotlyConfig

回答by Priya Gupta

Install plotly.js using NPM:

使用 NPM 安装 plotly.js：

npm install --save plotly.js

Then in component or service wherever you want to use import like:

然后在组件或服务中您想使用导入的任何地方，例如：

import Plotly from 'plotly.js/lib/core';
Plotly.register([
 require('plotly.js/lib/heatmap'),
 require('plotly.js/lib/bar'),
 require('plotly.js/lib/pie') // can include as many plot types as you want
]);

Use plotly lib as below:

使用 plotly lib 如下：

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

Plotly.newPlot('test', data);

回答by ford04

Types for plotly.js basic & Co.

plotly.js basic & Co. 的类型

You can also use types together with the partial npm bundleslike basic or cartesian, starting in v1.39.0. Example for plotly.js basic (contains scatter, pieand bar):

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

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

Add the following in tsconfig.json:

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

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

Above pathsconfig just maps your imported plotly.js-basic-distpackage to those types defined in @types/plotly.js, so you can use them with plotly.js-basic-dist. More Infos:

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

• baseUrl
• paths

• 基本网址
• 路径