In TypeScript helpen modules en namespaces je om je code overzichtelijk, herbruikbaar en conflictvrij te houden. Hier is een overzicht van hoe je ze effectief kunt gebruiken: **Modules:** Modules in TypeScript worden gerealiseerd door bestanden te gebruiken waarin je functies, klassen, interfaces enzovoort exporteert en vervolgens importeert in andere bestanden. Dit bevordert hergebruik en scheiding van concerns. *Voorbeeld:* *In `shared.ts`:* ```typescript export function logMessage(message: string): void { console.log(`Shared log: ${message}`); } export class Utility { static formatDate(date: Date): string { return date.toISOString(); } } export interface User { id: number; name: string; } ``` *In een ander bestand, bijvoorbeeld `app.ts`:* ```typescript import { logMessage, Utility, User } from './shared'; const user: User = { id: 1, name: 'Jan' }; logMessage(`Gebruiker: ${user.name}`); console.log(`Gecentraliseerde datum: ${Utility.formatDate(new Date())}`); ``` **Namespaces:** Namespaces worden gebruikt om groepen van code binnen hetzelfde bestand of project te organiseren, vooral handig om naamconflicten te voorkomen zonder dat je meerdere bestanden hoeft te gebruiken. Ze worden vooral in oudere code of in globale scripts gebruikt. *Voorbeeld:* ```typescript namespace Auth { export class UserManager { login(username: string, password: string): boolean { // login logica return true; } } export function logout(): void { // logout logica } } namespace Utils { export function formatDate(date: Date): string { return date.toLocaleDateString(); } } ``` *Gebruik binnen dezelfde scope:* ```typescript const authManager = new Auth.UserManager(); authManager.login('jan', 'wachtwoord'); console.log(Utils.formatDate(new Date())); ``` **Verschil en gebruik:** - Gebruik modules (bestanden met `import`/`export`) voor grotere projecten en wanneer je code in meerdere bestanden wilt organiseren. - Gebruik namespaces vooral om naamconflicten te voorkomen binnen dezelfde globale scope of in scripts zonder module-systemen. **Samenvatting:** - Exporteren functies, klassen, interfaces via `export`. - Importeren via `import { ... } from '...'`. - Gebruik namespaces met `namespace` en `export` binnen hetzelfde bestand om logische groepen te maken en naamconflicten te voorkomen. Door deze technieken te combineren, kun je een schaalbare, overzichtelijke en herbruikbare webapplicatie opbouwen met gedeelde functionaliteiten en zonder naamconflicten.

Zeker! Hier is een uitgebreide uitleg over het gebruik van modules en namespaces in TypeScript voor webapplicaties: ## Modules in TypeScript ### Basis export/import ```typescript // mathUtils.ts export function add(a: number, b: number): number { return a + b; } export const PI = 3.14159; export interface Point { x: number; y: number; } ``` ```typescript // main.ts import { add, PI, Point } from './mathUtils'; const result = add(5, 3); const point: Point = { x: 10, y: 20 }; ``` ### Default exports ```typescript // Logger.ts export default class Logger { static log(message: string): void { console.log(`[LOG]: ${message}`); } } ``` ```typescript // Gebruik van default export import Logger from './Logger'; Logger.log('Hallo wereld!'); ``` ### Namespace imports ```typescript // Gebruik van namespace import import * as MathUtils from './mathUtils'; const result = MathUtils.add(10, 5); ``` ## Namespaces voor naamconflicten voorkomen ### Basis namespace ```typescript // shapes/Circle.ts namespace Shapes { export class Circle { constructor(public radius: number) {} area(): number { return Math.PI * this.radius ** 2; } } } ``` ```typescript // shapes/Square.ts namespace Shapes { export class Square { constructor(public side: number) {} area(): number { return this.side ** 2; } } } ``` ### Gebruik van namespaces ```typescript // main.ts /// <reference path="shapes/Circle.ts" /> /// <reference path="shapes/Square.ts" /> const circle = new Shapes.Circle(5); const square = new Shapes.Square(4); console.log(circle.area()); // 78.54 console.log(square.area()); // 16 ``` ## Geavanceerde voorbeelden ### Geneste namespaces ```typescript namespace Application { export namespace Utils { export class Validator { static isEmail(email: string): boolean { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); } } export namespace Formatters { export function formatCurrency(amount: number): string { return `€${amount.toFixed(2)}`; } } } } // Gebruik const isValid = Application.Utils.Validator.isEmail('test@example.com'); const formatted = Application.Utils.Formatters.formatCurrency(99.99); ``` ### Modules met namespaces combineren ```typescript // api/UserService.ts export namespace API { export interface User { id: number; name: string; email: string; } export class UserService { static getUser(id: number): Promise<User> { // API call implementatie return Promise.resolve({ id, name: 'John Doe', email: 'john@example.com' }); } } } ``` ```typescript // Gebruik met import import { API } from './api/UserService'; const userService = new API.UserService(); userService.getUser(1).then(user => { console.log(user.name); }); ``` ## Configuratie in tsconfig.json ```json { "compilerOptions": { "module": "ESNext", "moduleResolution": "node", "target": "ES2020", "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true } } ``` ## Best practices 1. **Gebruik modules** voor moderne projecten (aanbevolen) 2. **Namespaces** zijn handig voor legacy code of wanneer je globale scope wilt vermijden 3. **Consistente naamgeving** voor imports 4. **Barrel files** voor het groeperen van exports: ```typescript // index.ts (barrel file) export * from './mathUtils'; export * from './stringUtils'; export * from './dateUtils'; ``` ```typescript // Gebruik van barrel file import { add, formatDate, capitalize } from './utils'; ``` Deze aanpak zorgt voor: - ✅ Herbruikbare code - ✅ Voorkomen van naamconflicten - ✅ Betere onderhoudbaarheid - ✅ Duidelijke code-organisatie - ✅ Eenvoudige testing Kies modules voor nieuwe projecten en overweeg namespaces wanneer je werkt met bestaande codebases of specifieke organisatiebehoeften hebt.