Если вы уже прошли путь TypeScript, то знаете, что он — это замечательный инструмент для добавления типовой безопасности в ваш JavaScript код. Но когда ваш проект растет, становится сложно управлять всеми этими файлами и компонентами. Вот где на помощь приходят модули!

Преимущества разделения модулей

• Читаемость: Код становится более структурированным и легче понимается.
• Масштабируемость: Легче добавлять новые функции без необходимости изменять существующий код.
• Поддерживаемость: Упрощается отладка и тестирование, так как каждая часть кода изолирована.
• Переиспользование кода: Модули можно легко переиспользовать в других проектах.

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

Экспорт и импорт

Первое, что нам нужно понять — это как экспортировать и импортировать функции, классы и переменные из одного модуля в другой. В TypeScript это делается с помощью ключевых слов export и import.

Допустим, у нас есть файл utils.ts с функцией, которую мы хотим использовать в другом файле:

// utils.ts
export function greet(name: string): void {
    console.log(`Hello, ${name}!`);
}

Теперь мы можем импортировать эту функцию в другом файле, например, в app.ts:

// app.ts
import { greet } from './utils';

greet('Alice'); // Выведет: Hello, Alice!

Дефолтный экспорт

Помимо именованных экспортов, TypeScript поддерживает дефолтный экспорт. Это позволяет экспортировать один элемент по умолчанию из модуля.

Давайте создадим модуль math.ts, который экспортирует функцию для вычисления суммы чисел:

// math.ts
export default function add(a: number, b: number): number {
    return a + b;
}

Теперь мы можем импортировать эту функцию как дефолтный экспорт в другом файле:

// app.ts
import add from './math';

console.log(add(2, 3)); // Выведет: 5

Псевдонимы импорта и экспорта

Иногда имена экспортируемых элементов могут быть слишком длинными или неудобными для использования. В таких случаях можно использовать псевдонимы.

// math.ts
function multiply(a: number, b: number): number {
    return a * b;
}

export { multiply as times };

Теперь мы можем импортировать эту функцию под новым именем:

// app.ts
import { times } from './math';

console.log(times(2, 3)); // Выведет: 6

Работа с модулями Node.js

Если вы разрабатываете приложения для среды выполнения Node.js, вы также можете использовать CommonJS синтаксис для импорта и экспорта модулей. TypeScript понимает и поддерживает этот синтаксис:

// math.ts
function divide(a: number, b: number): number {
    return a / b;
}

module.exports = divide;

Подключение модуля:

// app.ts
const divide = require('./math');

console.log(divide(6, 2)); // Выведет: 3

Динамическая загрузка модулей

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

// app.ts
async function main() {
    const mathModule = await import('./math');
    const result = mathModule.default(4, 5);
    console.log(result); // Выведет: 9
}

main();

Это особенно полезно в больших приложениях, где загрузка всех модулей сразу может замедлить старт приложения.

Экспорт и импорт типов

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

// types.ts
export interface User {
    name: string;
    age: number;
}

Подключение типа:

// app.ts
import { User } from './types';

const user: User = {
    name: 'Alice',
    age: 30
};

Это позволяет явно указать ожидаемую структуру данных и предотвратить ошибки во время выполнения.

Разделение модулей в TypeScript

Когда проект становится крупнее, важно поддерживать его структуру чистой и организованной. Разделение модулей помогает управлять сложностью, делая код более читаемым, поддерживаемым и масштабируемым. Давайте рассмотрим типовой пример организации модулей в TypeScript на примере приложения для работы с пользователями и продуктами.

Типовая структура проекта

Предположим, у нас есть проект с функционалом для управления пользователями и продуктами. Вот как может выглядеть его структура:

src/
├── models/
│   ├── user.ts
│   └── product.ts
├── services/
│   ├── userService.ts
│   └── productService.ts
├── controllers/
│   ├── userController.ts
│   └── productController.ts
├── utils/
│   └── validation.ts
├── types/
│   ├── userTypes.ts
│   └── productTypes.ts
└── index.ts

Описание каталогов и файлов в данном проекте:

• src/: Корневая папка с исходным кодом проекта.
• models/: Папка для моделей данных.
• user.ts: Определяет структуру данных пользователя и содержит логику, связанную с пользователями.
• product.ts: Определяет структуру данных продукта и содержит логику, связанную с продуктами.
• services/: Папка для сервисов (бизнес-логика).
• userService.ts: Содержит бизнес-логику для управления пользователями, такие как создание, обновление и удаление пользователей.
• productService.ts: Содержит бизнес-логику для управления продуктами, такие как добавление, обновление и удаление продуктов.
• controllers/: Папка для контроллеров (обработка HTTP-запросов).
• userController.ts: Обрабатывает HTTP-запросы, связанные с пользователями, и вызывает методы из UserService.
• productController.ts: Обрабатывает HTTP-запросы, связанные с продуктами, и вызывает методы из ProductService.
• utils/: Папка для утилит и вспомогательных функций.
• validation.ts: Содержит вспомогательные функции для валидации данных.
• types/: Папка для типов и интерфейсов.
• userTypes.ts: Содержит типы и интерфейсы, связанные с пользователями.
• productTypes.ts: Содержит типы и интерфейсы, связанные с продуктами.
• index.ts: Главный файл проекта, точка входа в приложение, где происходит инициализация и запуск основных компонентов.

Вот пример того, как может выглядеть файл index.ts для проекта с вышеописанной структурой:

import express from 'express';
import { createUser, getUser, updateUser, deleteUser } from './controllers/userController';
import { createProduct, getProduct, updateProduct, deleteProduct } from './controllers/productController';

const app = express();
app.use(express.json());

// Маршруты для пользователей
app.post('/users', createUser);
app.get('/users/:id', getUser);
app.put('/users/:id', updateUser);
app.delete('/users/:id', deleteUser);

// Маршруты для продуктов
app.post('/products', createProduct);
app.get('/products/:id', getProduct);
app.put('/products/:id', updateProduct);
app.delete('/products/:id', deleteProduct);

// Запуск сервера
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});