Moduler i TypeScript
Denne artikel forklarer moduler i TypeScript.
YouTube Video
Moduler i TypeScript
Moduler i TypeScript er en vigtig funktion for at forbedre kode-genbrug og vedligeholdelse. Ligesom JavaScript er TypeScript også baseret på ECMAScript 2015 (ES6) modul-systemet, men en nøglefunktion er evnen til at udnytte TypeScripts typesystem.
Hvad er moduler?
Et modul er et system til at gruppere relateret kode i en enkelt enhed, der kan importeres og genbruges i andre filer. I TypeScript oprettes et scope per fil for at kapsle koden ind, så den ikke påvirker andre filer. Dette hjælper med at undgå kodekollisioner og gør vedligeholdelse lettere.
Interne og eksterne moduler
- Interne moduler (Namespaces): En metode til moduldefinition anvendt i TypeScript 1.5 og tidligere, men som nu ikke anbefales længere. Det behandles nu som et 'namespace.'.
- Eksterne moduler: Den nuværende standard baseret på ES6-modul-systemet. Dette afsnit forklarer hovedsageligt eksterne moduler.
Sådan eksporterer man moduler
Når man opretter moduler, er det nødvendigt at eksportere for at give adgang udefra. I TypeScript kan du eksportere værdier, funktioner, klasser osv. ved hjælp af nøgleordet export. Der er hovedsageligt to typer eksporter.
Navngivne eksporter
Anvendes til at lave flere eksporter, så import-siden kan vælge og bruge specifikke.
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}Standard eksporter
Anvendes, når du ønsker, at hele modulet skal have en enkelt standard eksport. Standard eksporter eksporteres uden et navn, hvilket gør det muligt for import-siden at modtage dem med et vilkårligt navn.
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}Sådan importeres moduler
For at bruge moduler importerer du værdier, funktioner, klasser osv. fra modulet ved hjælp af nøgleordet import.
Navngivne importeringer
Når du importerer specifikke elementer fra en navngiven eksport, skal du bruge krøllede parenteser {}.
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)}`);Standardimporteringer
Når du importerer en standardeksport, kan du modtage den med et hvilket som helst navn.
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)}`);Import-aliasser
For at undgå navnekonflikter eller forkorte lange navne kan du importere med et alias.
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)}`);Forskellen mellem moduler og navnerum
Et navnerum (namespace) er en intern modulstruktur brugt i tidlige TypeScript-versioner til at gruppere kode sammen. Dog anbefales ES6-moduler nu, og navnerum er sjældent nødvendige.
Navnerum kan defineres i samme fil eller på tværs af flere filer, og fordi de kan udvides globalt, kan det blive vanskeligt at administrere afhængigheder. Moduler har derimod adskilte scopes pr. fil og klare afhængigheder, hvilket gør dem til en mere moderne og sikker metode.
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}`);TypeScript-modulopløsning
I TypeScript er der to strategier for modulopløsning.
- Node-modulopløsning: Den standard metode, der bruges i Node.js-miljøer til at opløse moduler ved at søge i
node_modules-mappen. - Klassisk modulopløsning: TypeScripts egen opløsningsmetode, der udfører mere fleksibel søgning, men sjældent bruges i dag.
Typisk bruges Node-modulopløsning og er aktiveret som standard, medmindre andet er angivet i konfigurationsfilen.
Praktisk eksempel
Endelig vises et eksempel på implementering og genbrug af beregningsfunktioner ved hjælp af moduler.
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}`);Sammendrag
TypeScript-modulsystemet er et kraftfuldt værktøj til at organisere kode, forbedre genbrugelighed og øge vedligeholdelsesvenligheden. Anvendelse af eksterne moduler baseret på ES6-moduler anbefales, og brugen af nøgleordene export og import tillader nem eksport og import af moduler.
Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.