Как создавать и использовать модули TypeScript

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

Что такое модули TypeScript?

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

Создание модуля TypeScript

Чтобы создать модуль TypeScript, необходимо выполнить следующие шаги:

1. Создайте файл TypeScript: Начните с создания нового файла `.ts` для модуля, например `mathUtils.ts`.
2. Определите и экспортируйте код: Реализуйте функции, классы или переменные в этом файле и используйте ключевое слово export, чтобы сделать их доступными для других модулей.

Пример простого модуля:

// mathUtils.ts

export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

В этом примере функции `add` и `subtract` определены и экспортированы из модуля `mathUtils.ts`.

Импорт и использование модуля TypeScript

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

1. Создайте новый файл TypeScript: Создайте файл, в котором будет использоваться код модуля, например `app.ts`.
2. Импортируйте модуль: Используйте ключевое слово import, чтобы импортировать функции, классы или переменные из модуля.

Пример импорта и использования функций `add` и `subtract`:

// app.ts

import { add, subtract } from './mathUtils';

const sum = add(5, 3);
const difference = subtract(5, 3);

console.log(`Sum: ${sum}`);
console.log(`Difference: ${difference}`);

В этом примере функции `add` и `subtract` импортируются из модуля `mathUtils` и используются в файле `app.ts`.

Экспорт по умолчанию и именованный экспорт

Модули TypeScript поддерживают как экспорт по умолчанию, так и именованный экспорт. Вот краткий обзор:

• Экспорт по умолчанию: Одно значение можно экспортировать как экспорт по умолчанию из модуля с помощью export default.
• Именованные экспорты: Из модуля можно экспортировать несколько значений с помощью именованных экспортов с ключевым словом export.

Пример, демонстрирующий оба типа экспорта:

// shapes.ts

export default class Circle {
  constructor(public radius: number) {}
  
  area(): number {
    return Math.PI * this.radius ** 2;
  }
}

export function getCircleInfo(radius: number): string {
  const circle = new Circle(radius);
  return `A circle with radius ${radius} has an area of ${circle.area()}`;
}

В этом примере `Circle` экспортируется как экспорт по умолчанию, а `getCircleInfo` — это именованный экспорт.

Организация модулей в проекте

Для более крупных проектов с многочисленными модулями организация становится решающей. Рассмотрите следующие советы:

• Структура каталогов: Группируйте связанные модули в каталоги, такие как `models/`, `services/` и `utils/`.
• Файлы индекса: Используйте файлы `index.ts` в каталогах для агрегации и повторного экспорта модулей, упрощая импорт по всему проекту.

Пример структуры каталога:

project/
│
├── src/
│   ├── models/
│   │   ├── index.ts
│   │   └── user.ts
│   └── app.ts

Заключение

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