Angular 延迟加载模块的类型提示

在

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

amchart

位于主捆绑包中。

---

我可以在编辑器中延迟加载模块并提供类型提示吗？

这是一个好问题

这更多的是一个TypeScript/IDE问题，例如，我能够找到这一点，它描述了暗示静态/动态导入之间的区别：

静态：

[…].d.ts文件是运行时存在内容的静态表示，可以从TypeScript代码生成，也可以为未在ts中编写的库手动编写

动态：

并不是所有的东西都可以推断出来——捕捉精确的行为需要运行你的程序

那么，我们如何在编码时强制TS知道我们的类型呢，这仅适用于您的IDE，以下是它在您的情况下的工作方式：

private am4core:typeof import（“@amcharts/amcharts4/core”）；
私有am4charts：导入类型（“@amcharts/amcharts4/charts”）；
私有am4themesAnimated:typeof import（'@amcharts/amcharts4/themes/animated'）。默认值；

现在您应该得到代码提示：

const core=this.am4core；
常量图表=this.am4charts；
const animatedTheme=this.am4themesAnimated；
console.log（'loaded'，core，charts，animatedTheme）；
核心。使用主题（动画主题）；
const chart=core.create（'chartdiv'，charts.XYChart）；

屏幕截图（我使用VS代码）：

---

希望这有帮助

感谢anwser-我认为我正在使用的webStorm不支持它：/这是可能的。我还没有使用WebStorm（简单试用过）。去年年底，我从Atom切换到VS代码。我能够得到我精心挑选的几乎所有的功能，甚至是我自己定制的，还有一些。如果你不喜欢webStorm，试试VS代码。你可能已经设置好了，但这里有一个页面。不知道这是否有帮助。请记住，此功能在TS 2.9+中。

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