Moduler i TypeScript
Den här artikeln förklarar moduler i TypeScript.
YouTube Video
Moduler i TypeScript
Moduler i TypeScript är en viktig funktion för att förbättra kodens återanvändbarhet och underhållbarhet. Precis som JavaScript är TypeScript också baserat på ECMAScript 2015 (ES6) modulsystemet, men en viktig funktion är möjligheten att använda TypeScripts typsystem.
Vad är moduler?
En modul är ett system för att gruppera relaterad kod till en enda enhet som kan importeras och återanvändas i andra filer. I TypeScript skapas ett omfång per fil för att kapsla in koden och förhindra att den påverkar andra filer. Detta hjälper till att undvika kodkonflikter och gör underhåll enklare.
Interna och externa moduler
- Interna moduler (Namnrymder): En metod för moduldefinition som användes i TypeScript 1.5 och tidigare, och rekommenderas nu inte längre. Det behandlas nu som en 'namnrymd'.
- Externa moduler: Den nuvarande standarden, baserad på ES6-modulsystemet. Detta avsnitt förklarar främst externa moduler.
Hur man exporterar moduler
När man skapar moduler är exportering nödvändigt för att möjliggöra åtkomst från utsidan. I TypeScript kan du exportera värden, funktioner, klasser, etc. med hjälp av nyckelordet export. Det finns huvudsakligen två typer av export.
Namngivna exporter
Används för att göra flera exporter, vilket tillåter importören att välja och använda specifika.
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}Standardexporter
Används när du vill att hela modulen ska ha en enda standardexport. Standardexporter exporteras utan namn, vilket tillåter importören att ta emot dem med valfritt namn.
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}Hur man importerar moduler
För att använda moduler importerar du värden, funktioner, klasser, etc. från modulen med hjälp av nyckelordet import.
Namngivna importer
När du importerar specifika element från en namngiven export, använd måsvingar {}.
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)}`);Standardimporter
När du importerar en standardexport kan du ta emot den med vilket namn som helst.
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)}`);Importalias
För att undvika namnkonflikter eller förkorta långa namn kan du importera med ett 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)}`);Skillnad mellan moduler och namnrymder
En namnrymd (namespace) är en intern modulstruktur som används i tidig TypeScript för att gruppera kod. ES6-moduler rekommenderas dock numera, och namnrymder är sällan nödvändiga.
Namnrymder kan definieras inom samma fil eller över flera filer, och eftersom de kan expanderas globalt kan hantering av beroenden bli svårt. Moduler har däremot separata scope per fil och tydliga beroenden, vilket gör dem till en modernare och säkrare 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}`);TypeScript-modullösning
I TypeScript finns det två strategier för modullösning.
- Node-modullösning: Standardlösningsmetoden som används i Node.js-miljöer och löser moduler genom att söka inom mappen
node_modules. - Klassisk modullösning: TypeScripts egna lösningsmetod som utför mer flexibel sökning, men används inte ofta nuförtiden.
Vanligtvis används Node-modullösning och den aktiveras som standard om inget annat anges i konfigurationsfilen.
Praktiskt exempel
Slutligen visas ett exempel på implementering och återanvändning av beräkningsfunktioner med hjälp av 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}`);Sammanfattning
TypeScripts modulsystem är ett kraftfullt verktyg för att organisera kod, förbättra återanvändbarhet och öka underhållbarhet. Användning av externa moduler baserade på ES6-moduler rekommenderas, och nyckelorden export och import möjliggör enkel export och import av moduler.
Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.