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

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.Просто импортируйте тип в ваш компонент, и вы сможете его использовать.