Moduły w TypeScript
Ten artykuł wyjaśnia moduły w TypeScript.
YouTube Video
Moduły w TypeScript
Moduły w TypeScript są ważną funkcją zwiększającą możliwość ponownego wykorzystania i utrzymywania kodu. Podobnie jak JavaScript, TypeScript opiera się na systemie modułów ECMAScript 2015 (ES6), ale kluczową cechą jest możliwość wykorzystania systemu typów TypeScript.
Czym są moduły?
Moduł to system grupowania powiązanego kodu w jedną jednostkę, która może być importowana i ponownie używana w innych plikach. W TypeScript każdemu plikowi przypisywany jest zakres, który kapsułkuje kod i zapobiega jego wpływowi na inne pliki. To pomaga uniknąć kolizji kodu i ułatwia jego utrzymanie.
Moduły wewnętrzne i zewnętrzne
- Moduły wewnętrzne (Przestrzenie nazw): Metoda definiowania modułów używana w TypeScript 1.5 i wcześniej, obecnie niezalecana. Obecnie jest traktowana jako 'przestrzeń nazw'.
- Moduły zewnętrzne: Aktualny standard oparty na systemie modułów ES6. Ta sekcja głównie wyjaśnia moduły zewnętrzne.
Jak eksportować moduły
Podczas tworzenia modułów konieczne jest eksportowanie, aby umożliwić dostęp z zewnątrz. W TypeScript można eksportować wartości, funkcje, klasy itp., używając słowa kluczowego export. Głównie istnieją dwa typy eksportów.
Eksporty nazwane
Używane do tworzenia wielu eksportów, umożliwiając stronie importującej wybór i użycie określonych elementów.
1// mathUtils.ts
2export const pi: number = 3.14159;
3
4export function add(x: number, y: number): number {
5 return x + y;
6}
7
8export function subtract(x: number, y: number): number {
9 return x - y;
10}Eksporty domyślne
Używane, gdy chcesz, aby cały moduł miał jeden domyślny eksport. Eksporty domyślne są eksportowane bez nazwy, umożliwiając stronie importującej ich odbiór pod dowolną nazwą.
1// calculator.ts
2export default class Calculator {
3 add(x: number, y: number): number {
4 return x + y;
5 }
6
7 subtract(x: number, y: number): number {
8 return x - y;
9 }
10}Jak importować moduły
Aby używać modułów, importujesz wartości, funkcje, klasy itp. z modułu za pomocą słowa kluczowego import.
Importy nazwane
Podczas importowania konkretnych elementów z nazwanych eksportów używaj nawiasów klamrowych {}.
1// main.ts
2import { pi, add, subtract } from './mathUtils';
3
4console.log(`Value of pi: ${pi}`);
5console.log(`Addition: ${add(10, 5)}`);
6console.log(`Subtraction: ${subtract(10, 5)}`);Importy domyślne
Podczas importowania domyślnego eksportu możesz użyć dowolnej nazwy.
1// main.ts
2import Calculator from './calculator';
3
4const calculator = new Calculator();
5console.log(`Addition: ${calculator.add(10, 5)}`);
6console.log(`Subtraction: ${calculator.subtract(10, 5)}`);Alias importu
Aby uniknąć konfliktów nazw lub skrócić długie nazwy, możesz importować z aliasem.
1// main.ts
2import { add as addition, subtract as subtraction } from './mathUtils';
3
4console.log(`Addition: ${addition(10, 5)}`);
5console.log(`Subtraction: ${subtraction(10, 5)}`);Różnica między modułami a przestrzeniami nazw
Przestrzeń nazw (namespace) to wewnętrzna struktura modułu używana we wczesnych wersjach TypeScript do grupowania kodu. Jednak teraz zaleca się stosowanie modułów ES6, a przestrzenie nazw są rzadko potrzebne.
Przestrzenie nazw mogą być definiowane w tym samym pliku lub w wielu plikach, a ponieważ można je rozszerzać globalnie, zarządzanie zależnościami może stać się trudne. W przeciwieństwie do tego moduły mają oddzielne zakresy dla każdego pliku i wyraźne zależności, co czyni je bardziej nowoczesną i bezpieczną metodą.
1// Example of a namespace
2namespace Geometry {
3 export function calculateArea(radius: number): number {
4 return Math.PI * radius * radius;
5 }
6}
7
8// Can be used directly without importing the module (not recommended)
9const area: number = Geometry.calculateArea(5);
10console.log(`Area: ${area}`);Rozwiązywanie modułów w TypeScript
W TypeScript istnieją dwie strategie rozwiązywania modułów.
- Rozwiązywanie modułów Node: Standardowa metoda używana w środowiskach Node.js, która rozwiązuje moduły, przeszukując folder
node_modules. - Klasyczne rozwiązywanie modułów: Własna metoda TypeScript, która oferuje bardziej elastyczne wyszukiwanie, ale nie jest obecnie często używana.
Zazwyczaj używa się rozwiązywania modułów Node, które jest domyślnie włączone, chyba że w pliku konfiguracyjnym określono inaczej.
Praktyczny przykład
Na koniec pokazano przykład implementacji i ponownego użycia funkcji obliczeniowych przy użyciu modułów.
mathUtils.ts
1export const pi: number = 3.14159;
2
3export function multiply(x: number, y: number): number {
4 return x * y;
5}
6
7export function divide(x: number, y: number): number {
8 if (y === 0) {
9 throw new Error("Cannot divide by zero");
10 }
11 return x / y;
12}calculator.ts
1import { multiply, divide } from './mathUtils';
2
3export default class Calculator {
4 multiplyNumbers(x: number, y: number): number {
5 return multiply(x, y);
6 }
7
8 divideNumbers(x: number, y: number): number {
9 return divide(x, y);
10 }
11}main.ts
1import Calculator from './calculator';
2
3const calculator = new Calculator();
4
5const result1: number = calculator.multiplyNumbers(10, 5);
6console.log(`Multiplication: ${result1}`);
7
8const result2: number = calculator.divideNumbers(10, 2);
9console.log(`Division: ${result2}`);Podsumowanie
System modułów TypeScript to potężne narzędzie do organizacji kodu, zwiększania jego wielokrotnego użycia i poprawy utrzymania. Zaleca się korzystanie z modułów zewnętrznych opartych na modułach ES6, a użycie słów kluczowych export i import umożliwia łatwe eksportowanie i importowanie modułów.
Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.