Typescript Code Refactoring en Verbeteringen
description
Met deze prompt krijg je concrete verbetersuggesties voor je Typescript code die helpen de code leesbaarder, efficiënter en makkelijker te onderhouden te maken. Het lost problemen op zoals complexe code, slechte structuur en performance issues, en biedt duidelijke voorbeelden zodat je snel betere code schrijft.
prompt
Help me mijn Typescript code te refactoren en verbeteren met focus op <beschrijving van de code of functionaliteit>. Geef suggesties voo ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Ik help je graag met het refactoren en verbeteren van je TypeScript-code, vooral rondom een functie die formulierdata valideert en opslaat. Hieronder geef ik algemene tips, best practices en concrete voorbeelden om de leesbaarheid, onderhoudbaarheid en prestaties te verbeteren.
---
### Algemene tips voor refactoring en verbetering
1. **Scheiding van zorgen (Separation of Concerns):**
Splits validatie en opslag in aparte functies. Dat maakt je code overzichtelijker en makkelijker aan te passen.
2. **Gebruik van duidelijke types:**
Definieer expliciete interfaces of types voor je formulierdata. Hiermee voorkom je fouten en verbeter je de leesbaarheid.
3. **Validatie met hulpfuncties:**
Maak herbruikbare validatiefuncties voor veelgebruikte checks, zoals e-mailvalidatie of required velden.
4. **Asynchrone handling:**
Als opslag asynchroon is (bijvoorbeeld naar een API), gebruik `async/await` en foutafhandeling.
5. **Gebruik van objectmethoden of klassen:**
Overweeg een class of module te gebruiken voor het formulierelement, zodat state en functies gebundeld zijn.
---
### Voorbeeld: Oorspronkelijke (vereenvoudigd) code
```typescript
function validateAndSaveForm(data: any) {
if (!data.name || data.name.trim() === '') {
alert('Naam is verplicht');
return;
}
if (!data.email || !data.email.includes('@')) {
alert('Ongeldig e-mailadres');
return;
}
// Opslaan data
saveData(data);
}
```
---
### Verbeterde versie met herstructurering
```typescript
// 1. Definieer types
interface FormData {
name: string;
email: string;
// andere velden
}
// 2. Validatiefuncties
function isRequired(value: string): boolean {
return value.trim().length > 0;
}
function isValidEmail(email: string): boolean {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
// 3. Validatiefunctie
function validateForm(data: FormData): string[] {
const errors: string[] = [];
if (!isRequired(data.name)) {
errors.push('Naam is verplicht');
}
if (!isRequired(data.email)) {
errors.push('E-mail is verplicht');
} else if (!isValidEmail(data.email)) {
errors.push('Ongeldig e-mailadres');
}
// Voeg meer validaties toe indien nodig
return errors;
}
// 4. Opslaan functie (async voorbeeld)
async function saveData(data: FormData): Promise<void> {
try {
await fetch('/api/save', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
alert('Data succesvol opgeslagen');
} catch (error) {
alert('Fout bij opslaan: ' + error);
}
}
// 5. Main functie
async function handleFormSubmit(data: FormData) {
const errors = validateForm(data);
if (errors.length > 0) {
alert(errors.join('\n'));
return;
}
await saveData(data);
}
```
---
### Aanbevelingen voor verdere verbetering
- **Gebruik van form library:**
Overweeg libraries zoals Formik of React Hook Form voor complexere formulieren, waarmee validatie en state beheer makkelijker worden.
- **Gebruik van enums of constants:**
Voor validatieregels of foutmeldingen, om consistentie te bewaren.
- **Prestaties:**
Validaties kunnen worden geoptimaliseerd door te voorkomen dat onnodige checks worden uitgevoerd. Bijvoorbeeld, validation early exit bij eerste fout.
- **Testen:**
Schrijf unit tests voor validatiefuncties en opslaataken.
---
### Conclusie
Door je validatiefunctie te scheiden van de opslag, gebruik te maken van duidelijke types en herbruikbare validatiefuncties, verbeter je de leesbaarheid en onderhoudbaarheid. Asynchrone opslag wordt overzichtelijker met `async/await`, en je kunt eenvoudiger fouten afvangen en afhandelen.
Heeft je code specifieke onderdelen of complexiteiten waar je extra hulp bij wilt?
provider: deepseek
model: deepseek-chat
Ik help je graag met het refactoren van je TypeScript code voor formuliervalidatie en opslag. Hier zijn concrete suggesties:
## 1. Type Safety verbeteren
**Voor:**
```typescript
function validateForm(data: any) {
// validatie logica
}
```
**Na:**
```typescript
interface FormData {
email: string;
name: string;
age?: number;
terms: boolean;
}
interface ValidationResult {
isValid: boolean;
errors: Record<string, string>;
data?: FormData;
}
```
## 2. Validatielogica modulariseren
**Voor:**
```typescript
function validateForm(data: any) {
const errors = {};
if (!data.email) errors.email = "Email is required";
else if (!isValidEmail(data.email)) errors.email = "Invalid email";
if (!data.name) errors.name = "Name is required";
// ... meer validaties
}
```
**Na:**
```typescript
const validators = {
email: (value: string) => {
if (!value) return "Email is verplicht";
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) return "Ongeldig email formaat";
return null;
},
name: (value: string) => {
if (!value?.trim()) return "Naam is verplicht";
if (value.length < 2) return "Naam moet minimaal 2 karakters bevatten";
return null;
},
terms: (value: boolean) => {
if (!value) return "Je moet de voorwaarden accepteren";
return null;
}
};
function validateForm(data: FormData): ValidationResult {
const errors: Record<string, string> = {};
let isValid = true;
Object.entries(validators).forEach(([field, validator]) => {
const error = validator(data[field as keyof FormData]);
if (error) {
errors[field] = error;
isValid = false;
}
});
return {
isValid,
errors,
data: isValid ? data : undefined
};
}
```
## 3. Async Opslag met Error Handling
**Voor:**
```typescript
async function saveForm(data: any) {
try {
const response = await fetch('/api/form', {
method: 'POST',
body: JSON.stringify(data)
});
return response.json();
} catch (error) {
console.error(error);
}
}
```
**Na:**
```typescript
class FormService {
private async saveToAPI(data: FormData): Promise<void> {
const response = await fetch('/api/form', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
if (!response.ok) {
throw new Error(`Opslag mislukt: ${response.status}`);
}
}
private async saveToLocalStorage(data: FormData): Promise<void> {
localStorage.setItem('formData', JSON.stringify(data));
}
async saveForm(data: FormData, options = { persistLocally: true }): Promise<void> {
try {
await this.saveToAPI(data);
if (options.persistLocally) {
await this.saveToLocalStorage(data);
}
} catch (error) {
console.error('Opslag fout:', error);
throw error;
}
}
}
```
## 4. Hoofdfunctie met Composability
```typescript
class FormHandler {
private formService: FormService;
private validationSchema: typeof validators;
constructor() {
this.formService = new FormService();
this.validationSchema = validators;
}
async processForm(formData: FormData): Promise<{
success: boolean;
errors?: Record<string, string>;
message?: string;
}> {
const validation = this.validateForm(formData);
if (!validation.isValid) {
return {
success: false,
errors: validation.errors
};
}
try {
await this.formService.saveForm(validation.data!);
return {
success: true,
message: 'Formulier succesvol opgeslagen'
};
} catch (error) {
return {
success: false,
message: 'Er ging iets mis bij het opslaan'
};
}
}
private validateForm(data: FormData): ValidationResult {
// Validatie logica zoals eerder
}
}
```
## 5. Gebruik van Utility Functions
```typescript
// utils/validation.ts
export const createValidator = <T>(schema: {
[K in keyof T]: (value: T[K]) => string | null;
}) => {
return (data: T) => {
const errors: Partial<Record<keyof T, string>> = {};
let isValid = true;
Object.entries(schema).forEach(([key, validator]) => {
const error = validator(data[key as keyof T]);
if (error) {
errors[key as keyof T] = error;
isValid = false;
}
});
return { isValid, errors, data: isValid ? data : undefined };
};
};
// Gebruik:
export const validateForm = createValidator<FormData>(validators);
```
## 6. Performance Optimalisaties
```typescript
// Debounce voor frequente validaties
const debounce = <T extends (...args: any[]) => any>(
func: T,
delay: number
): ((...args: Parameters<T>) => void) => {
let timeoutId: NodeJS.Timeout;
return (...args: Parameters<T>) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(null, args), delay);
};
};
// Gebruik voor real-time validatie
const debouncedValidate = debounce(validateForm, 300);
```
## 7. Testbaarheid verbeteren
```typescript
// formHandler.test.ts
describe('FormHandler', () => {
it('should validate email correctly', () => {
const invalidEmail = { email: 'invalid' };
const result = validators.email(invalidEmail.email);
expect(result).toBe('Ongeldig email formaat');
});
it('should save form data successfully', async () => {
const formHandler = new FormHandler();
const validData = { email: 'test@example.com', name: 'Test', terms: true };
const result = await formHandler.processForm(validData);
expect(result.success).toBe(true);
});
});
```
## Belangrijkste verbeteringen:
1. **Type Safety** - Sterke typing met interfaces
2. **Separation of Concerns** - Validatie, opslag en business logic gescheiden
3. **Herbruikbaarheid** - Modulaire validators en services
4. **Error Handling** - Robuuste foutafhandeling
5. **Performance** - Debouncing voor frequente operaties
6. **Testbaarheid** - Eenvoudig te testen componenten
7. **Onderhoudbaarheid** - Duidelijke structuur en documentatie
Deze aanpak maakt je code beter leesbaar, onderhoudbaar en performant terwijl de functionaliteit behouden blijft.