reactjs - איך לטעון את מודול ההערות של Highcharts ב-React TypeScript?

אני מנסה לשחזר את ה-highcharts הזה באמצעות הערות ב-React עם TypeScript. כפי שאתה יכול לראות בדמו חי, ההערות לא מוצגות, ואני מניח שזה נגרם כתוצאה מבעיות טעינה.

import * as React from "react";
import * as Highcharts from "highcharts";
import * as Annotations from "highcharts/modules/annotations";

תשובה #1

הנה הקישור הרשמי כיצד להשתמש במודולים של Highchart

בדוגמת הקוד הזו מוצג כיצד לייבא רכיבי Highchart

import Highcharts from 'highcharts'
import AnnotationsFactory from "highcharts/modules/annotations";
import HighchartsReact from 'highcharts-react-official'

// init the module
AnnotationsFactory(Highcharts);

לאחר הייבוא עליך להשתמש ברכיב HighchartsReact ולהוסיף שם את קונפיגורציית ההערות שלך.

בצורה זו אפשר להשתמש בכל מודול עבורו.

תשובה #2

נראה ש-DefinitelyTyped אינו יודע על המודול highcharts/modules/annotations. לכן, תחילה, צור קובץ נפרד declarations.d.ts עם:

declare module "highcharts/modules/annotations";

בקובץ demo.tsx:

import * as Highcharts from "highcharts";
import AnnotationsFactory = require("highcharts/modules/annotations");
AnnotationsFactory(Highcharts);

והוסף as any אחרי אובייקט ההגדרות הגדול שמועבר ל-Highcharts.chart כדי ש-TypeScript לא יתלונן על המאפיין annotations. (מה שאתה עושה נראה תקין בזמן ריצה אך אינו מוכר על ידי ההגדרות הישנות.)

לבסוף, ב-tsconfig.json, שנה את האפשרות module מ-esnext ל-commonjs כדי שתוכל להשתמש בהקצאת import.

קוד סנדבוקס סופי.

במחשב המקומי, נתקלתי בכמה בעיות תלות והייתי צריך לבטל את כלל tslint quotemark כי הוא חסם את הבנייה, אבל בסופו של דבר הצלחתי לגרום להערות לעבוד. תן לי לדעת אם אתה צריך עזרה עם החלק הזה.