Modules in TypeScript
Dit artikel legt modules in TypeScript uit.
YouTube Video
Modules in TypeScript
Modules in TypeScript zijn een belangrijke functie om de herbruikbaarheid en het onderhoud van code te verbeteren. Net als JavaScript is TypeScript ook gebaseerd op het ECMAScript 2015 (ES6) modulesysteem, maar een belangrijk kenmerk is het vermogen om gebruik te maken van het typesysteem van TypeScript.
Wat zijn Modules?
Een module is een systeem om gerelateerde code te groeperen in één eenheid die kan worden geïmporteerd en hergebruikt in andere bestanden. In TypeScript wordt er per bestand een scope gecreëerd om de code te kapselen, zodat deze geen invloed heeft op andere bestanden. Dit helpt codebotsingen te voorkomen en maakt onderhoud eenvoudiger.
Interne en Externe Modules
- Interne Modules (Namespaces): Een module-definiëringsmethode die werd gebruikt in TypeScript 1.5 en eerder, nu niet meer aanbevolen. Het wordt nu behandeld als een 'namespace'.
- Externe Modules: De huidige standaard, gebaseerd op het ES6-modulesysteem. Deze sectie legt voornamelijk externe modules uit.
Hoe Modules te Exporteren
Bij het maken van modules is exporteren noodzakelijk om toegang van buitenaf mogelijk te maken. In TypeScript kun je waarden, functies, klassen, enz. exporteren met behulp van het sleutelwoord export. Er zijn voornamelijk twee soorten exports.
Genoemde Exports
Wordt gebruikt voor meerdere exports, waardoor de importzijde specifieke items kan selecteren en gebruiken.
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}Standaard Exports
Wordt gebruikt wanneer je wilt dat de hele module één standaardexport heeft. Standaardexports worden geëxporteerd zonder naam, waardoor de importzijde deze met elke gewenste naam kan ontvangen.
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}Hoe modules te importeren
Om modules te gebruiken, importeer je waarden, functies, klassen, enz. vanuit de module met behulp van het sleutelwoord import.
Genoemde imports
Bij het importeren van specifieke elementen van een genoemde export, gebruik je accolades {}.
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)}`);Standaard imports
Bij het importeren van een standaardexport kun je het ontvangen onder elke naam.
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-aliassen
Om naamconflicten te vermijden of lange namen te verkorten, kun je importeren met een 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)}`);Verschil tussen modules en namespaces
Een namespace (namespace) is een interne modulestructuur die in het vroege TypeScript werd gebruikt om code te groeperen. ES6-modules worden tegenwoordig aanbevolen, en namespaces zijn zelden nodig.
Namespaces kunnen binnen hetzelfde bestand of over meerdere bestanden worden gedefinieerd, en omdat ze globaal kunnen worden uitgebreid, kan het beheren van afhankelijkheden lastig worden. Daarentegen hebben modules afzonderlijke scopes per bestand en duidelijke afhankelijkheden, waardoor het een meer moderne en veilige methode is.
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 module-resolutie
In TypeScript zijn er twee strategieën voor module-resolutie.
- Node module-resolutie: De standaard resolutiemethode die wordt gebruikt in Node.js-omgevingen en modules oplost door te zoeken in de map
node_modules. - Klassieke module-resolutie: TypeScripts eigen resolutiemethode die flexibeler zoekt, maar tegenwoordig niet veel wordt gebruikt.
Meestal wordt Node module-resolutie gebruikt, en deze is standaard ingeschakeld, tenzij anders gespecificeerd in het configuratiebestand.
Praktisch voorbeeld
Ten slotte wordt een voorbeeld getoond van het implementeren en hergebruiken van berekeningsfuncties met behulp van modules.
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}- Dit bestand definieert wiskundige nut functies en biedt herbruikbare basis rekenkundige bewerkingen.
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}- Dit bestand definieert en exporteert de klasse van de Calculator. Het inkapselt de calculator functionaliteit intern met behulp van functies geïmporteerd uit MathUtils.
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}`);- Dit bestand is het beginpunt van de toepassing. Het maakt een instantie van de klasse van de rekenmachine, voert vermenigvuldiging en verdeling, en logt de resultaten naar de console.
Samenvatting
Het TypeScript-module systeem is een krachtig hulpmiddel voor het organiseren van code, het verbeteren van herbruikbaarheid en het vergroten van onderhoudbaarheid. Het gebruik van externe modules gebaseerd op ES6-modules wordt aanbevolen, en met behulp van de sleutelwoorden export en import kun je eenvoudig modules exporteren en importeren.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.