Як створювати та використовувати модулі 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.