如何使用具有动态导入的类型？答案

【问题标题】：How to use types with dynamic imports?如何使用具有动态导入的类型？
【发布时间】：2019-01-16 10:20:40
【问题描述】：

我在 Angular 7 中使用动态导入来减小初始供应商捆绑包的大小。

import('xlsx').then(XLSX => {
    const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });
})

但XLSX.WorkBook 类型出现错误，提示“找不到命名空间 XLSX”。
XLSX.read 工作正常。

问题：使用动态导入时如何定义类型？

【问题讨论】：

标签： angular typescript dynamic-import

【解决方案1】：

XLSX 只会表示导入的值，而不是类型。

你有两个选择。

使用导入类型：

import('xlsx').then(XLSX => {
    const wb: import('xlsx').WorkBook = XLSX.read(bstr, { type: 'binary' });
})

您可以定义一个类型别名来简化此操作：type WorkBook = import('xlsx').WorkBook

导入类型：

import { WorkBook } from 'xlsx' // Just for the type, will be elided in this example

import('xlsx').then(XLSX => {
    const wb: WorkBook = XLSX.read(bstr, { type: 'binary' });
})

第二个选项更难正确，如果你只在类型中使用静态导入的导入，导入语句应该被省略（即不输出到 JS）。只要您在表达式中使用静态导入中的任何导入（即，将在 JS 中结束的任何位置），导入将不会被忽略。查看更多关于module being elided

【讨论】：

不知道省略模块。效果很好，谢谢！

【解决方案2】：

我不知道你的背景，所以我猜两件事：

您在别处定义了 XLSX 类型，但 XLSX 参数变量隐藏了外部变量。为避免出现阴影，只需为参数变量使用另一个名称（例如，在前面加上下划线）：
```
import('xlsx').then(_XLSX => {
    const wb: XLSX.WorkBook = _XLSX.read(bstr, { type: 'binary' });
})
```
你认为XLSX.WorkBook 是一个类型，但它不是！ XLSX 是一个 javascript 库，而 javascript 没有类型的概念。此外，在使用 TypeScript 时，它会被转译为 javascript，并且有关类型的任何信息都会丢失。这个问题没有解决方案，但可能您必须从其他地方导入类型，例如 DefinetelyTyped。只需在组件中导入类型即可使用。

【讨论】：