Natuurlijk! Hier is een overzicht van hoe je TypeScript kunt gebruiken voor het valideren van gebruikersgegevens, inclusief voorbeelden van typeguards, aangepaste validatiefuncties en het afhandelen van runtime errors met duidelijke feedback. 1. Data structuur definiëren met interfaces Begin met het definiëren van een interface voor de gebruiker: ```typescript interface NieuweGebruiker { naam: string; email: string; wachtwoord: string; } ``` 2. Basis typeguards maken Typeguards helpen bij het controleren of een object aan bepaalde voorwaarden voldoet. Bijvoorbeeld: ```typescript function isString(value: any): value is string { return typeof value === 'string'; } ``` 3. Validatiefuncties schrijven Voor elke eigenschap kun je specifieke validaties maken, bijvoorbeeld: ```typescript function isValidNaam(naam: any): boolean { return isString(naam) && naam.trim().length > 0; } function isValidEmail(email: any): boolean { if (!isString(email)) return false; const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); } function isValidWachtwoord(wachtwoord: any): boolean { if (!isString(wachtwoord)) return false; return wachtwoord.length >= 8; // Voorbeeld: wachtwoord minimaal 8 tekens } ``` 4. Validatie toepassen en fouten afhandelen Je kunt een functie maken die een gegevensobject valideert en errors afgeeft: ```typescript function valideerGebruiker(data: any): NieuweGebruiker { if (typeof data !== 'object' || data === null) { throw new Error('Geen geldig gegevensobject.'); } const { naam, email, wachtwoord } = data; if (!isValidNaam(naam)) { throw new Error('Ongeldige naam: vul een geldige naam in.'); } if (!isValidEmail(email)) { throw new Error('Ongeldig emailadres.'); } if (!isValidWachtwoord(wachtwoord)) { throw new Error('Wachtwoord moet minimaal 8 tekens bevatten.'); } return { naam, email, wachtwoord }; } ``` 5. Runtime errors afvangen met try-catch Bij gebruik van de validatiefunctie: ```typescript try { const nieuweGebruiker = valideerGebruiker(invoerData); console.log('Gebruiker gevalideerd:', nieuweGebruiker); // Verder verwerken, bijvoorbeeld opslaan in database } catch (error) { if (error instanceof Error) { console.error('Fout bij validatie:', error.message); // Geef duidelijke feedback aan gebruiker } else { console.error('Onverwachte fout:', error); } } ``` Door deze aanpak zorg je dat je gegevens gecontroleerd worden op de juiste types en inhoud, en dat gebruikers duidelijke feedback krijgen bij fouten. Hiermee maak je je applicatie veiliger en gebruiksvriendelijker.

Zeker! Hier is een uitgebreide uitleg over TypeScript-validatie voor gebruikersregistratie: ## 1. Type Definitions ```typescript interface UserInput { name: string; email: string; password: string; } interface ValidatedUser { name: string; email: string; password: string; } interface ValidationError { field: string; message: string; } type ValidationResult = | { success: true; data: ValidatedUser } | { success: false; errors: ValidationError[] }; ``` ## 2. Type Guards ```typescript // Type guard om te controleren of object UserInput vorm heeft function isUserInput(obj: any): obj is UserInput { return ( typeof obj === 'object' && typeof obj.name === 'string' && typeof obj.email === 'string' && typeof obj.password === 'string' ); } // Type guard voor email format function isValidEmail(email: string): boolean { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email); } ``` ## 3. Custom Validatiefuncties ```typescript function validateName(name: string): ValidationError | null { if (name.trim().length === 0) { return { field: 'name', message: 'Naam is verplicht' }; } if (name.length < 2) { return { field: 'name', message: 'Naam moet minimaal 2 karakters bevatten' }; } if (name.length > 50) { return { field: 'name', message: 'Naam mag maximaal 50 karakters bevatten' }; } return null; } function validateEmail(email: string): ValidationError | null { if (email.trim().length === 0) { return { field: 'email', message: 'E-mailadres is verplicht' }; } if (!isValidEmail(email)) { return { field: 'email', message: 'Ongeldig e-mailadres formaat' }; } return null; } function validatePassword(password: string): ValidationError | null { if (password.length < 8) { return { field: 'password', message: 'Wachtwoord moet minimaal 8 karakters bevatten' }; } if (!/[A-Z]/.test(password)) { return { field: 'password', message: 'Wachtwoord moet minimaal 1 hoofdletter bevatten' }; } if (!/[0-9]/.test(password)) { return { field: 'password', message: 'Wachtwoord moet minimaal 1 cijfer bevatten' }; } return null; } ``` ## 4. Hoofdvalidatiefunctie ```typescript function validateUserInput(input: unknown): ValidationResult { // Runtime type checking if (!isUserInput(input)) { return { success: false, errors: [{ field: 'general', message: 'Ongeldig invoerformaat' }] }; } const errors: ValidationError[] = []; // Valideer individuele velden const nameError = validateName(input.name); const emailError = validateEmail(input.email); const passwordError = validatePassword(input.password); if (nameError) errors.push(nameError); if (emailError) errors.push(emailError); if (passwordError) errors.push(passwordError); if (errors.length > 0) { return { success: false, errors }; } return { success: true, data: { name: input.name.trim(), email: input.email.toLowerCase().trim(), password: input.password } }; } ``` ## 5. Error Handling met Duidelijke Feedback ```typescript class ValidationError extends Error { constructor(public errors: ValidationError[]) { super('Validatiefout'); this.name = 'ValidationError'; } } async function registerUser(userData: unknown): Promise<void> { try { const validationResult = validateUserInput(userData); if (!validationResult.success) { throw new ValidationError(validationResult.errors); } // Gebruik de gevalideerde data const validatedData = validationResult.data; // Voer registratie logica uit console.log('Registreren gebruiker:', validatedData); } catch (error) { if (error instanceof ValidationError) { // Toon gebruikersvriendelijke foutmeldingen error.errors.forEach(err => { console.error(`Fout in ${err.field}: ${err.message}`); }); // Of toon in UI: // alert(error.errors.map(err => `${err.field}: ${err.message}`).join('\n')); } else { console.error('Onverwachte fout:', error); } throw error; } } ``` ## 6. Gebruiksvoorbeeld ```typescript // Voorbeeld van gebruik const userInput = { name: 'Jan', email: 'jan@example.com', password: 'SterkWachtwoord123' }; // Valideer en verwerk const result = validateUserInput(userInput); if (result.success) { console.log('Geldige gebruiker:', result.data); // Verstuur naar API of database } else { console.log('Validatiefouten:'); result.errors.forEach(error => { console.log(`- ${error.field}: ${error.message}`); }); } // Of met try-catch try { await registerUser(userInput); console.log('Registratie succesvol!'); } catch (error) { if (error instanceof ValidationError) { // Toon fouten aan gebruiker error.errors.forEach(err => { console.log(`${err.field}: ${err.message}`); }); } } ``` ## Belangrijke punten: - **Runtime validatie**: Controleer altijd data bij runtime, niet alleen compile-time - **Duidelijke feedback**: Geef specifieke foutmeldingen per veld - **Type safety**: Gebruik TypeScript types voor compile-time checks - **Security**: Nooit vertrouwen op client-side validatie alleen - **User experience**: Toon fouten in begrijpelijke taal voor eindgebruikers Deze aanpak combineert TypeScript's statische type checking met runtime validatie voor betrouwbare dataverwerking.