Динамический импорт в TypeScript

На чтение2 мин

Обновлено3 месяца назад

Просмотров

TypeScript, надстройка над JavaScript, привносит в JavaScript статическую типизацию, что повышает качество кода и удобство сопровождения. Одной из мощных функций, поддерживаемых в TypeScript и современном JavaScript, является возможность условной или ленивой загрузки модулей с использованием выражений динамического импорта. Эта функция полезна для оптимизации производительности приложения за счет загрузки кода только тогда, когда это необходимо.

Что такое динамический импорт?

Динамический импорт позволяет импортировать модули во время выполнения, а не во время компиляции. Это достигается с помощью функции import(), которая возвращает promise, который преобразуется в объект module. Эта функция является частью предложения ECMAScript и поддерживается в TypeScript.

Синтаксис:

import(moduleSpecifier)

Настройка проекта TypeScript

Шаг 1. Перед запуском примеров убедитесь, что у вас настроен проект на TypeScript. Если нет, вы можете инициализировать его с помощью следующих команд.

mkdir TS

Шаг 2: Перейдите в этот каталог

cd dynamic-imports-example

Шаг 3: Запуск пакета

npm init -y

Шаг 4: Установите необходимые зависимости

npm install typescript @types/node --save-dev

Шаг 5: Запустите проект Typescript

npx tsc --init

Шаг 6: Создайте файл tsconfig.json. Убедитесь, что файл tsconfig.json настроен должным образом для включения системы модулей esnext и других необходимых параметров

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

Структура проекта:

Typescript_project_structure

Шаг 7: настроим условный импорт.

Условный импорт

Динамический импорт полезен, когда вам нужно условно загрузить модуль на основе некоторого условия выполнения. Это может быть полезно для загрузки кода, зависящего от конкретной функции, только при выполнении определенных условий.

Syntax:

if (condition) {
    import('./modulePath').then(module => {
        // Use the module
    });
}

Пример: В этом примере показан динамический импорт файла TypeScript.

JavaScript // index.ts

async function loadFeatureModule(featureEnabled: boolean) {
    if (featureEnabled) {
        const featureModule = await import('./featureModule');
        featureModule.initFeature();
    } else {
        console.log('Feature is disabled.');
    }
}

const isFeatureEnabled = true; 
// This could be based on some runtime condition
loadFeatureModule(isFeatureEnabled);
 JavaScript // featureModule.ts

export function initFeature() {
    console.log('Feature module initialized.');
}

Вывод:

Feature module initialized.

TypeScript и динамический импорт

TypeScript полностью поддерживает динамический импорт и обеспечивает безопасность типов для импортируемых модулей. Вы можете использовать оператор typeof, чтобы получить тип импортируемого модуля.

Syntax:

import('./modulePath');

Пример: В этом примере показан простой динамический импорт файла TypeScript.

JavaScript // index.ts

async function loadTypedModule() {
    const module = await import('./typedModule');
    module.someTypedFunction();
}
loadTypedModule();
 JavaScript // typedModule.ts

export function someTypedFunction() {
    console.log('Typed module function called.');
}

Вывод:

Typed module function called.

Шаг 8: запустите код

tsc index.ts

Примечание: Команда сгенерирует или скомпилирует файл TypeScript, если он будет скомпилирован в файл JavaScript, вы можете запустить этот файл, используя ”node index.js”, чтобы получить выходные данные. в противном случае выходные данные будут показаны напрямую.

#TypeScript