Как использовать типы с динамическим импортом?

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

Этот второй вариант более сложен, чтобы получить право, если вы используете только импорт из статического импорта в типах, оператор импорта должен быть исключен (т.е. не выводится в JS). Как только вы используете какой-либо импорт из статического импорта в выражении (т. Е. Любую позицию, которая окажется в JS), импорт не будет отменен. Подробнее о модуле

Answer 2

Я не знаю вашего контекста, поэтому я предполагаю две вещи:

1. Вы определили тип XLSX в другом месте, но переменная параметра XLSX скрывает внешнюю переменную. Чтобы избежать затенения, просто используйте другое имя для переменной параметра (например, добавьте подчеркивание):

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

2. Ты так думаешь XLSX.WorkBook это тип, но это не так! XLSX - это библиотека javascript, и у javascript нет понятия типа. Также при использовании TypeScript он передается в javascript, и любая информация о типе теряется. Для этой проблемы нет решения, но, вероятно, вам придется импортировать тип из другого места, например, DefinetelyTyped. Просто импортируйте тип в ваш компонент, и вы сможете его использовать.