如何使用延迟加载模块的命名空间答案

【问题标题】：How to use namespace of lazy loaded modules如何使用延迟加载模块的命名空间
【发布时间】：2020-10-27 09:41:32
【问题描述】：

我有一个使用 AmCharts 库的 Angular 应用程序。为了使用图表，我想延迟加载 AmCharts，他们建议使用 Promise 来实现。我遇到的问题是类型推断似乎不起作用，我想指定我正在创建的常量的类型。

Promise.all([
        import("@amcharts/amcharts4/core"),
        import("@amcharts/amcharts4/charts"),
        import("@amcharts/amcharts4/themes/animated"),
      ]).then((modules) => {
        const am4core = modules[0];
        const am4charts = modules[1];
        const am4themes_animated = modules[2].default;

        ...

        const valueAxis: am4charts.ValueAxis = chart.yAxes.push(
          new am4charts.ValueAxis()
        );

如果我在顶部导入模块，valueAxis 声明将起作用，但现在我在am4charts.ValueAxis 的am4charts 上收到错误，该命名空间不存在。有什么办法可以让它工作吗？

【问题讨论】：

标签： angular typescript-typings amcharts

【解决方案1】：

在打字稿中你可以import only the types，它似乎在做这个伎俩

所以在我的代码中我现在有：

import type * as am4chartsTypes from "@amcharts/amcharts4/charts";
import type * as am4coreTypes from "@amcharts/amcharts4/core";
...


export class Chart {
  private chart?: am4chartsTypes.XYChart;

  ngAfterViewInit() {
    ... 
    
    this.chart = am4core.create(
        this.chartWrapper.id,
        am4charts.XYChart
    );
    ...
  }

}

【讨论】：