Jak tworzyć i używać modułów TypeScript

Moduły TypeScript oferują ustrukturyzowane podejście do organizowania i zarządzania kodem. Moduły umożliwiają enkapsulację kodu w osobnych plikach, co zwiększa łatwość utrzymania, możliwość ponownego użycia i testowalność. Ten przewodnik wyjaśnia proces tworzenia i używania modułów TypeScript.

Czym są moduły TypeScript?

Moduły TypeScript to pojedyncze pliki, które eksportują i importują elementy kodu, takie jak klasy, funkcje i zmienne. Dzięki zastosowaniu modułów kod można podzielić na łatwe do opanowania części, co ułatwia lepszą kontrolę nad interakcjami między różnymi częściami kodu.

Tworzenie modułu TypeScript

Aby utworzyć moduł TypeScript, należy wykonać następujące kroki:

1. Utwórz plik TypeScript: Zacznij od utworzenia nowego pliku `.ts` dla modułu, takiego jak `mathUtils.ts`.
2. Zdefiniuj i wyeksportuj kod: Zaimplementuj funkcje, klasy lub zmienne w tym pliku i użyj słowa kluczowego export, aby udostępnić je innym modułom.

Przykład prostego modułu:

// mathUtils.ts

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

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

W tym przykładzie funkcje `add` i `subtract` są zdefiniowane i wyeksportowane z modułu `mathUtils.ts`.

Importowanie i używanie modułu TypeScript

Aby wykorzystać kod z modułu TypeScript w innym pliku, należy go zaimportować. Obejmuje to:

1. Utwórz nowy plik TypeScript: Wygeneruj plik, w którym będzie używany kod modułu, np. `app.ts`.
2. Importuj moduł: Użyj słowa kluczowego import, aby pobrać funkcje, klasy lub zmienne z modułu.

Przykład importowania i używania funkcji `dodaj` i `odejmij`:

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

W tym przykładzie funkcje `add` i `subtract` zostały zaimportowane z modułu `mathUtils` i użyte w pliku `app.ts`.

Domyślne i nazwane eksporty

Moduły TypeScript obsługują zarówno domyślne, jak i nazwane eksporty. Oto krótki przegląd:

• Domyślne eksporty: Pojedynczą wartość można wyeksportować jako domyślny eksport z modułu za pomocą export default.
• Nazwane eksporty: Za pomocą nazwanych eksportów ze słowem kluczowym export można eksportować wiele wartości z modułu.

Przykład ilustrujący oba typy eksportu:

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

W tym przykładzie `Circle` jest eksportowane jako domyślny eksport, podczas gdy `getCircleInfo` jest nazwanym eksportem.

Organizowanie modułów w projekcie

W przypadku większych projektów z wieloma modułami organizacja staje się kluczowa. Rozważ następujące wskazówki:

• Struktura katalogów: Grupuj powiązane moduły w katalogach, takich jak `models/`, `services/` i `utils/`.
• Pliki indeksów: Użyj plików `index.ts` w katalogach, aby agregować i ponownie eksportować moduły, upraszczając importowanie w ramach projektu.

Przykładowa struktura katalogów:

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

Wniosek

Moduły TypeScript są kluczową funkcją organizacji i zarządzania kodem. Tworząc i używając modułów, kod może być modułowy, łatwy w utrzymaniu i skalowalny. Zrozumienie, jak eksportować i importować kod, a także jak strukturyzować projekt, zwiększa skuteczność rozwoju TypeScript.