Если вы уже прошли путь 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

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

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

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

// 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}`);
});