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:

npm install --save plotly.js

npm install --save @types/plotly.js

Then in your code you can do the following (example taken from 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 tsc and prepare the code to be included in you webpage with browserify.

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

npm install --save glslify

npm install --save mapbox-gl

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.

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).

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.

// app.ts

let myPlotlyConfig: PlotlyConfig

TS support

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.

Problem

Since you add types for plotly.js, you expect to import stuff from plotly.js instead of a specific module. This is all good until you want to use it with react i.e. 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.

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

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

More about customising 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

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

   
   
   

   

   
   

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:

/**

 * 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.js to the devDependencies and it works fine now.

Install plotly.js using NPM:

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:

const data: Plotly.BarData = [

 {

   x: ['giraffes', 'orangutans', 'monkeys'],

   y: [20, 14, 23],

   type: 'bar'

 }

];



Plotly.newPlot('test', data);

plotly.js types usage with the new distribution packages

If you want to use typescript together with the partial npm bundles, starting in v1.39.0, you can do the following:

As an example, lets assume we just want to use basic functionality of plotly and get along with scatter, pie and bar charts.
So the distribution package plotly.js-basic-dist is the interesting one (significant less bundle size):

npm install plotly.js-basic-dist

Install the @types for plotly:

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

Then, in your project root tsconfig.json simply add the following paths mapping:

"baseUrl": "./",                      

"paths": {

  "plotly.js-basic-dist": [

    "node_modules/@types/plotly.js"

  ]

}

What does it do?

When Typescript resolves module import statements like import Plotly from 'plotly.js-basic-dist', above path mapping is applied. With that, it actually behaves like import Plotly from '<baseUrl>/node_modules/@types/plotly.js' and the compiler can grab the typings. At runtime plotly.js-basic-dist still is served, typescript does not transform the source code via this mechanism.

baseUrl must be specified if paths is and makes all module imports with absolute names relative to it. When "." is set as value, baseUrl
points at your project root directory containing tsconfig.json. So if you have node_modules directly under project root dir, as in most cases, that value should be appropriate (see here and this helpful stack answer).

Hope, that helps.