2.1 Реэкспорт
Реэкспорт позволяет модулям переэкспортировать значения, импортированные из других модулей. Это удобно для создания модулей, которые объединяют несколько других модулей.
constants.ts
TypeScript
export const PI = 3.14;
export const E = 2.71;
functions.ts
TypeScript
export function add(x: number, y: number): number {
return x + y;
}
export function subtract(x: number, y: number): number {
return x - y;
}
index.ts
TypeScript
// Реэкспорт значений из других модулей
export * from './constants';
export * from './functions';
main.ts
TypeScript
// Импорт значений из модуля, который реэкспортирует значения из других модулей
import { PI, E, add, subtract } from './index';
console.log(`PI: ${PI}`); // Вывод: PI: 3.14
console.log(`E: ${E}`); // Вывод: E: 2.71
console.log(`2 + 3 = ${add(2, 3)}`); // Вывод: 2 + 3 = 5
console.log(`5 - 3 = ${subtract(5, 3)}`); // Вывод: 5 - 3 = 2
В этом примере модуль index.ts реэкспортирует значения из модулей constants.ts и functions.ts, объединяя их для удобства использования.
2.2 Динамический импорт
Динамический импорт позволяет загружать модули асинхронно во время выполнения. Это особенно полезно для оптимизации производительности и уменьшения размера начальной загрузки приложения.
math.ts
TypeScript
export const PI = 3.14;
export function add(x: number, y: number): number {
return x + y;
}
main.ts
TypeScript
// Динамический импорт модуля
async function loadMathModule() {
const math = await import('./math');
console.log(`PI: ${math.PI}`); // Вывод: PI: 3.14
console.log(`2 + 3 = ${math.add(2, 3)}`); // Вывод: 2 + 3 = 5
}
loadMathModule();
В этом примере модуль math.ts загружается асинхронно с использованием динамического импорта в функции loadMathModule.
2.3 Практические советы по использованию модулей
- Разделение логики: разделяйте код на модули, основываясь на функциональности. Это улучшает организацию кода и делает его более поддерживаемым.
- Использование именованных экспортов: отдавайте предпочтение именованным экспортам, когда в модуле есть несколько экспортируемых значений. Это облегчает понимание кода и предотвращает конфликты имен.
- Экспорт по умолчанию для одного основного функционала: используйте экспорт по умолчанию, если в модуле есть одно основное значение или функция. Это делает импорт более простым и понятным.
- Реэкспорт для создания централизованных модулей: используйте реэкспорт для создания модулей, которые объединяют и централизуют экспорты из нескольких других модулей.
- Динамический импорт для оптимизации производительности: используйте динамический импорт для асинхронной загрузки модулей, чтобы уменьшить размер начальной загрузки приложения и улучшить производительность.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ