我正在尝试将 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'.
【问题讨论】：
标签： typescript plotly
有一个可用于 plotly.js (Github link) 的绝对类型版本。这允许您在 Typescript 中使用纯 Javascript 版本。请按照以下步骤设置您的环境：
npm install --save plotly.js
npm install --save-dev @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 准备要包含在您的网页中的代码。
这现在也适用于 ionic 2！确保您手动添加以下包：
npm install --save glslify
npm install --save mapbox-gl
【讨论】：
import Plotly from 'plotly.js';，因为图书馆有一行export as namespace Plotly;
结束了：
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 一起使用）
【讨论】：
var Plotly = require('plotly.js/dist/plotly.js')，它也可以正常工作。你知道，两者有什么不同吗？
vertx 相关的错误。我的最终解决方案是 @eXavier 添加（2018 年 2 月）但 "../node_modules/plotly.js/lib/index-basic.js"（core.js 不足以呈现基本图表）。
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 组合。
可能的组合有：
更多关于customising plotly bundles。
这大大减小了捆绑包的大小，阳光再次照耀着我们。
但是……
由于这种方法需要工厂和自定义 dist，因此在撰写本文时，这些还没有类型
import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);
注意以下方法确实修复了上述导入的类型，但我仍然有一个失败的编译，我没有按照接受的答案修复它：
希望你有更好的体验！
我修复了编译问题。这是因为 react-plotly.js 被捆绑在“依赖项”中。对于我的案例，供应商部门的处理方式如下：
/**
* 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，它现在可以正常工作了。
【讨论】：
您还可以将类型与partial npm bundles 一起使用，例如基本或笛卡尔，从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 一起使用。更多信息：
【讨论】：
"extends" to fix its build process 进行一些技巧：正在对您的 tsconfig.json 文件进行以下更改：不得设置 compilerOptions.paths（不支持别名导入）我>。但这种诡计也很有效。
如果您要导入的 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
【讨论】：
使用 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);
【讨论】：
找不到模块“plotly.js/dist/plotly.js”的声明文件。 'C:/Users/spriy28/TEST2/tst/node_modules/plotly.js/dist/plotly.js' 隐含了一个 'any' 类型。
要消除错误，请使用这个。
在 tsconfig json 文件中添加noImplicitAny: false 以消除错误。
【讨论】：