Hvordan importere plotly.js til TypeScript?

Jeg prøver å importere plotly.js til TypeScript. Plotly.js er installert ved hjelp av npm. I TypeScript-filen min bruker jeg

import 'plotly.js';

Det er greit, men jeg får en feil på kode som Plotly.<member>:

error TS2304: Cannot find name 'Plotly'

Når jeg prøver

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

Jeg får

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

Svar #1

Det finnes en Definitely Typed-versjon tilgjengelig for plotly.js (Github-link). Dette lar deg bruke den vanlige Javascript-versjonen inne i Typescript. Følg disse trinnene for å sette opp miljøet ditt:

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

Da kan du i koden din gjøre følgende (eksempel hentet fra 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);

Til slutt må du konvertere Typescript til javascript med tsc og forberede koden for å inkluderes på nettsiden din med browserify.

Dette fungerer nå også med Ionic 2! Sørg for at du manuelt legger til følgende pakker:

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

Svar #2

Typer for plotly.js grunnleggende & Co.

Du kan også bruke typer sammen med de delvise npm-pakkene som basic eller cartesian, fra og med v1.39.0. Eksempel for plotly.js basic (inneholder scatter, pie og bar):

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

Legg til følgende i tsconfig.json:

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

Ovenstående paths-konfigurasjon kobler bare ditt importerte plotly.js-basic-dist-pakke til de typene som er definert i @types/plotly.js, slik at du kan bruke dem med plotly.js-basic-dist. Mer informasjon:

  • baseUrl
  • stier

Svar #3

Endte opp med:

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

(Refererer til index-basic.js siden jeg bare trenger den grunnleggende funksjonaliteten, bruk index.js for hele biblioteket.)

REDIGER (februar 2018):

Den foretrukne måten nå er å legge til sti i tsconfig.json-filen, slik:

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

og deretter importer i .ts-filen som

import * as Plotly from 'plotly.js';

Merk: i stien inkluderte jeg kun core.js, som inneholder scatter-diagrammer, du kan importere andre diagrammer etter behov.

(Jeg bruker det med Angular CLI - Angular 5.2 og TypeScript 2.7.1)

Relaterte artikler