Om in TypeScript REST API-aanroepen te maken en typeveiligheid te garanderen, kun je gebruik maken van fetch (of een library zoals axios) samen met typed interfaces voor request- en responsegegevens. Hieronder een voorbeeld: 1. Defineer de types voor de response, inclusief optionele en geneste velden: ```typescript interface Gebruiker { id: string; naam: string; email?: string; // optioneel // voorbeeld van een genest veld adres?: { straat: string; stad: string; postcode?: string; // optioneel }; } ``` 2. Maak een functie om de API-aanroep te doen, met behulp van fetch en generieke types: ```typescript async function haalGebruikerOp(userId: string): Promise<Gebruiker> { const response = await fetch(`https://api.example.com/gebruikers/${userId}`); if (!response.ok) { throw new Error(`Fout bij ophalen gebruiker: ${response.status}`); } const data: Gebruiker = await response.json(); return data; } ``` 3. Aanroepen en gebruik: ```typescript async function main() { try { const gebruiker = await haalGebruikerOp('12345'); console.log(`Naam: ${gebruiker.naam}`); if (gebruiker.email) { console.log(`Email: ${gebruiker.email}`); } if (gebruiker.adres) { console.log(`Adres: ${gebruiker.adres.straat}, ${gebruiker.adres.stad}`); if (gebruiker.adres.postcode) { console.log(`Postcode: ${gebruiker.adres.postcode}`); } } } catch (error) { console.error(error); } } ``` Door het gebruik van interfaces zoals `Gebruiker` wordt de response typeveilig gemaakt. Optionele velden worden afgevangen met `?`, en geneste objecten worden correct getypeerd. Op deze manier weet je tijdens ontwikkeling zeker wat je kunt verwachten en wat optioneel is.

Zeker, ik leg uit hoe je typeveilige REST API-aanroepen maakt in TypeScript. Hier is een complete uitleg met voorbeelden: ### 1. Type-definities voor de response ```typescript // Basis user type interface User { id: number; name: string; email?: string; // Optioneel veld } // Response type voor de API call interface ApiResponse<T> { data: T; status: number; message?: string; // Optioneel berichtveld } // Type voor geneste response (bijvoorbeeld wanneer users in een object zitten) interface UserResponse { users: User[]; pagination?: { page: number; totalPages: number; itemsPerPage: number; }; } ``` ### 2. API Service functie met type safety ```typescript class UserService { private baseUrl = 'https://api.jouwdomein.nl/users'; // Haal enkele gebruiker op async getUserById(userId: number): Promise<ApiResponse<User>> { try { const response = await fetch(`${this.baseUrl}/${userId}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data: User = await response.json(); return { data, status: response.status }; } catch (error) { throw new Error(`Failed to fetch user: ${error instanceof Error ? error.message : 'Unknown error'}`); } } // Haal alle gebruikers op met optionele query parameters async getAllUsers(params?: { page?: number; limit?: number }): Promise<ApiResponse<UserResponse>> { try { const queryString = params ? `?${new URLSearchParams(params as Record<string, string>)}` : ''; const response = await fetch(`${this.baseUrl}${queryString}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data: UserResponse = await response.json(); return { data, status: response.status }; } catch (error) { throw new Error(`Failed to fetch users: ${error instanceof Error ? error.message : 'Unknown error'}`); } } } ``` ### 3. Gebruik van de service met type safety ```typescript // Gebruik de service const userService = new UserService(); // Enkele gebruiker ophalen async function displayUser(userId: number) { try { const response = await userService.getUserById(userId); // TypeScript weet nu dat response.data van type User is console.log(`Gebruiker: ${response.data.name}`); // Veilig omgaan met optionele velden if (response.data.email) { console.log(`Email: ${response.data.email}`); } else { console.log('Geen email beschikbaar'); } } catch (error) { console.error('Fout bij ophalen gebruiker:', error); } } // Meerdere gebruikers ophalen met geneste data async function displayUsers() { try { const response = await userService.getAllUsers({ page: 1, limit: 10 }); // Werken met de geneste users array response.data.users.forEach(user => { console.log(`ID: ${user.id}, Naam: ${user.name}`); // Type-safe omgaan met optioneel email const userEmail = user.email ?? 'Geen email'; console.log(`Email: ${userEmail}`); }); // Omgaan met optionele geneste paginatie if (response.data.pagination) { console.log(`Pagina ${response.data.pagination.page} van ${response.data.pagination.totalPages}`); } } catch (error) { console.error('Fout bij ophalen gebruikers:', error); } } ``` ### 4. Alternatief met axios (populair HTTP-client) ```typescript import axios, { AxiosResponse } from 'axios'; interface AxiosApiResponse<T> { data: T; status: number; statusText: string; } const apiClient = axios.create({ baseURL: 'https://api.jouwdomein.nl', timeout: 10000, }); // Type-safe axios request async function getUserSafe(userId: number): Promise<User> { const response: AxiosResponse<User> = await apiClient.get(`/users/${userId}`); return response.data; } // Met error handling async function getUserWithErrorHandling(userId: number): Promise<User | null> { try { const response: AxiosResponse<User> = await apiClient.get(`/users/${userId}`); return response.data; } catch (error) { console.error('Fout bij API-aanroep:', error); return null; } } ``` ### 5. Type guards voor extra safety ```typescript // Type guard om te controleren of object een User is function isUser(obj: any): obj is User { return obj && typeof obj.id === 'number' && typeof obj.name === 'string' && (obj.email === undefined || typeof obj.email === 'string'); } // Gebruik van type guard async function validateUserResponse(response: any): Promise<User> { if (isUser(response.data)) { return response.data; } throw new Error('Ongeldig user response format'); } ``` ### Belangrijke punten: 1. **Type safety**: Alle responses zijn getypt, zodat TypeScript compile-time errors geeft bij incorrect gebruik 2. **Optionele velden**: Gebruik `?` voor optionele properties en nullish coalescing (`??`) of conditional checks 3. **Geneste objecten**: Definieer complete type hierarchies voor complexe responses 4. **Error handling**: Goede error handling met type-safe foutmeldingen 5. **Async/await**: Moderne promise-based aanroepen voor betere leesbaarheid Deze aanpak zorgt voor robuuste, type-veilige API-communicatie met duidelijke contracten tussen frontend en backend.