Тип подсказки лениво загруженных модулей

Question

В angular Я хочу лениво загрузить некоторые модули, такие как amcharts.Я знаю, как это сделать, но как насчет подсказок типа в редакторе?

Вот мой код:

import {AfterViewInit, Component, NgZone, OnInit} from '@angular/core';
// import * as am4core from '@amcharts/amcharts4/core';
// import * as am4charts from '@amcharts/amcharts4/charts';
// import am4themes_animated from '@amcharts/amcharts4/themes/animated';

@Component({
  selector: 'app-wykres',
  templateUrl: './wykres.component.html',
})
export class WykresComponent implements OnInit, AfterViewInit {
  private am4core: any;
  private am4charts: any;
  private am4themesAnimated: any;
  chart: any;


  constructor(private zone: NgZone) {
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      this.loadAmcharts()
        .then(() => {
          console.log('loaded', this.am4charts, this.am4themesAnimated, this.am4core);

          this.am4core.useTheme(this.am4themesAnimated);

          let chart = this.am4core.create('chartdiv', this.am4charts.XYChart);

          chart.paddingRight = 20;

          let data = [];
          let visits = 10;
          for (let i = 1; i < 366; i++) {
            visits += Math.round(
              (Math.random() < 0.5 ? 1 : -1) * Math.random() * 10
            );
            data.push({
              date: new Date(2018, 0, i),
              name: 'name' + i,
              value: visits
            });
          }

          chart.data = data;

          let dateAxis = chart.xAxes.push(new this.am4charts.DateAxis());
          dateAxis.renderer.grid.template.location = 0;

          let valueAxis = chart.yAxes.push(new this.am4charts.ValueAxis());
          valueAxis.tooltip.disabled = true;
          valueAxis.renderer.minWidth = 35;

          let series = chart.series.push(new this.am4charts.LineSeries());
          series.dataFields.dateX = 'date';
          series.dataFields.valueY = 'value';

          series.tooltipText = '{valueY.value}';
          chart.cursor = new this.am4charts.XYCursor();

          let scrollbarX = new this.am4charts.XYChartScrollbar();
          scrollbarX.series.push(series);
          chart.scrollbarX = scrollbarX;

          this.chart = chart;
        });
    });
  }

  private async loadAmcharts(): Promise<any> {
    this.am4core = await import('@amcharts/amcharts4/core');
    this.am4charts = await import('@amcharts/amcharts4/charts');
    this.am4themesAnimated = await import('@amcharts/amcharts4/themes/animated').then(resp => {
      return resp.default;
    });
  }
}

В loadAmcharts Я загружаю модули и присваиваю их свойствам.Но это тип любого.

Если я прокомментирую:

import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';

amchart в основном комплекте.Могу ли я лениво загрузить модуль и получить подсказки типа в редакторе?

Answer 1

Это хороший вопрос.

Это скорее проблема TypeScript / IDE, например, мне удалось найти эту проблему , которая описывает разницу между подсказками статического / динамического импорта:

static:

[...] .d.ts файлы представляют собой статическое представление того, что существует во время выполнения, и могут быть получены из кода TypeScript или написаны вручную для библиотек, которыене были написаны в TS.

динамический:

Не все может быть просто выведено - для получения точного поведения потребуется буквально запустить вашу программу.

Так как же заставить TS знать, что такое наши типы, пока мы кодируем? В TypeScript 2.9 появилась функция "import types" , которая предназначена только для вашей IDE, вот как это может работать в вашем случае:

  private am4core: typeof import ('@amcharts/amcharts4/core');
  private am4charts: typeof import ('@amcharts/amcharts4/charts');
  private am4themesAnimated: typeof import ('@amcharts/amcharts4/themes/animated').default;

Теперь вы должны получить подсказку кода:

    const core = this.am4core;
    const charts = this.am4charts;
    const animatedTheme = this.am4themesAnimated;

    console.log('loaded', core, charts, animatedTheme);

    core.useTheme(animatedTheme);

    const chart = core.create('chartdiv', charts.XYChart);

снимок экрана (я использую VS Code):

Надеюсь, это поможет!