Question

我正在将动态导入与Angular 7结合使用，以减小初始供应商捆绑包的大小。

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

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

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

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

第二种选择比较棘手，如果仅使用静态导入类型中的导入，则应该省略import语句（即不输出到JS）。一旦您在表达式中使用了静态导入中的任何导入（即，将在JS中结束的任何位置），导入就不会被忽略。进一步了解module being elided

Answer 2

我不知道您的情况，所以我想两件事：

您在其他地方定义了XLSX类型，但是XLSX参数变量遮盖了外部变量。为避免阴影，只需对参数变量使用其他名称（例如，在下划线前添加）：
```
import('xlsx').then(_XLSX => {
    const wb: XLSX.WorkBook = _XLSX.read(bstr, { type: 'binary' });
})
```
您认为XLSX.WorkBook是一种类型，但事实并非如此！ XLSX是一个javascript库，而javascript没有类型的概念。同样，在使用TypeScript时，它会被转译为javascript，并且有关类型的所有信息都会丢失。没有解决此问题的方法，但是可能您必须从其他地方导入类型，例如DefinetelyTyped。只需在您的组件中导入类型，便可以使用它。

如何在动态导入中使用类型？

2 个答案: