วิธีการนำเข้า plotly.js เข้าไปใน TypeScript?

ฉันกำลังพยายามนำเข้า 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'.

คำตอบ #1

มีเวอร์ชัน Definitely Typed สำหรับ plotly.js (ลิงก์ Github) สิ่งนี้ช่วยให้คุณสามารถใช้เวอร์ชัน Javascript ธรรมดาภายใน Typescript ทำตามขั้นตอนเหล่านี้เพื่อตั้งค่าสภาพแวดล้อมของคุณ:

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

สุดท้ายคุณจำเป็นต้องแปลง Typescript เป็น javascript ด้วย tsc และเตรียมโค้ดเพื่อนำไปใส่ในเว็บเพจของคุณด้วย browserify.

นี่ก็ใช้ได้กับ Ionic 2 แล้ว! ตรวจสอบให้แน่ใจว่าคุณเพิ่มแพ็กเกจต่อไปนี้ด้วยตัวเอง:

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

คำตอบ #2

ประเภทสำหรับ plotly.js พื้นฐาน & Co.

คุณยังสามารถใช้ประเภทร่วมกับแพ็กเกจ npm แบบบางส่วนเช่น basic หรือ cartesian ตั้งแต่ v1.39.0 ตัวอย่างสำหรับ plotly.js basic (มี 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 ได้ ข้อมูลเพิ่มเติม:

• URL หลัก
• เส้นทาง

คำตอบ #3

ลงเอยด้วย:

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

(อ้างอิงถึง index-basic.js เพราะฉันต้องการเพียงฟังก์ชันพื้นฐาน ใช้ index.js สำหรับไลบรารีเต็มรูปแบบ)

แก้ไข (ก.พ. 2018):

วิธีที่แนะนำตอนนี้คือการเพิ่ม path ลงในไฟล์ 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 และ Typescript 2.7.1)