Как загрузить модуль аннотаций highcharts в машинописном тексте?

Question

Я пытаюсь воспроизвести это старшие диаграммы, используя аннотации в ответ на машинопись.Как вы можете видеть в живом демо , аннотации не отображаются, и я предполагаю, что это связано с некоторыми проблемами с загрузкой.

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

Answer 1

Похоже, DefinitherTyped не знает о модуле 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, чтобы можно было использовать назначение импорта.

Final CodeSandbox .

Локально я столкнулся с некоторыми проблемами зависимости и должен был отключить правило кавычек tslint, потому что оноблокировал сборку, но в итоге я получил аннотации к работе.Дайте мне знать, если вам нужна помощь с этой частью.