如何将plotly.js导入TypeScript？

Question

我尝试将plotly.js导入TypeScript。 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 link）。这允许您在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);

最后，您需要使用tsc将Typescript转换为javascript，并使用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

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-plotly + plotly.js ☹️

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

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

可能的组合是：

• react-plotly + plotly.js-basic-dist –我的选择。您可以根据需要添加更多捆绑包
• react-plotly + CDN
• react-plotly + custom bundle

有关customising plotly bundles的更多信息。

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

但是...

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

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

FIX

1. 创建一个@types文件夹

   

2. 将tsRoots添加到tsconfig.json

   

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

希望您有更好的体验！

---

更新

我解决了编译问题。这是因为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;

相反，我将react-plotly.js移至devDependencies，现在可以正常使用了。

Answer 4

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

对于情节来说，似乎有人已经制作了一份声明文件。因此，一旦安装了类型（npm i -g typings），您就可以搜索plotly（typings search plotly）的类型声明。您会看到Definitely Typed上有可用的声明文件。初始化项目的输入（typings init）后，您可以安装声明文件（typings i --global --save plotly.js）。

注意--global。此特定声明文件是全局声明文件。这意味着您不必导入任何类型，因为类型在项目的任何位置都可用。例如

// app.ts
let myPlotlyConfig: PlotlyConfig

Answer 5

使用NPM安装plotly.js：

npm install --save plotly.js

然后在组件或服务中的任何位置使用导入，如：

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
]);

使用如下的plotly lib：

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

Plotly.newPlot('test', data);

Answer 6

找不到模块“plotly.js/dist/plotly.js”的声明文件。 'C:/Users/spriy28/TEST2/tst/node_modules/plotly.js/dist/plotly.js' 隐式具有 'any' 类型。

要消除错误，请使用它。

在 tsconfig json 文件中添加 noImplicitAny: false 以消除错误。

Answer 7

plotly.js使用新的分发程序包键入用法

如果要与partial npm bundles一起使用打字稿，从v1.39.0开始，可以执行以下操作：

作为示例，假设我们只想使用plotly的基本功能并与scatter，pie和bar图表相处。 因此，分发软件包plotly.js-basic-dist是有趣的软件包（捆绑包的大小明显减少了）：

npm install plotly.js-basic-dist

为@plotly安装@types：

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

然后，只需在项目根tsconfig.json中添加以下paths映射：

"baseUrl": "./",                      
"paths": {
  "plotly.js-basic-dist": [
    "node_modules/@types/plotly.js"
  ]
}

它有什么作用？

当Typescript解析import之类的模块import Plotly from 'plotly.js-basic-dist'语句时，将应用上述路径映射。这样，它实际上就像import Plotly from '<baseUrl>/node_modules/@types/plotly.js'一样，编译器可以抓取类型。在运行时plotly.js-basic-dist仍被提供，打字稿不会通过这种机制来转换源代码。

如果baseUrl是

paths，则必须指定

"."并使所有模块导入都具有相对于它的绝对名称。将baseUrl设置为值时，tsconfig.json 指向包含node_modules的项目根目录。因此，在大多数情况下，如果您直接在项目根目录下有{{1}}，则该值应该合适（请参阅here和此有用的stack answer）。

希望，会有所帮助。