Typescript Integratie met Externe API's en Data Fetching
description
Met deze prompt leer je hoe je externe API's integreert in je Typescript-projecten met behoud van typeveiligheid, wat helpt bugs te voorkomen en de code robuuster maakt. Het behandelt zowel GET- als POST-verzoeken met voorbeelden van type-annotaties en foutafhandeling, wat het ontwikkelproces efficiënter maakt dan alternatieven zonder typecontrole.
prompt
Leg uit hoe ik Typescript kan gebruiken om veilig en efficiënt data op te halen van externe API's voor <beschrijving van de API of data die je wilt oph ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hieronder vind je een uitleg over hoe je TypeScript kunt gebruiken om veilig en efficiënt data op te halen van een externe API, zoals voor weersgegevens, inclusief voorbeelden met `fetch` en `axios`, inclusief type-annotaties en foutafhandeling.
---
## 1. Stap 1: Definieer de types voor de API-respons
Allereerst maak je TypeScript-interfaces voor de structuur van de gegevens die je van de API verwacht. Bijvoorbeeld, voor weersgegevens:
```typescript
interface WeatherData {
city: string;
temperature: number;
description: string;
humidity: number;
windSpeed: number;
}
```
---
## 2. Stap 2: Data ophalen met `fetch`
Hier is een voorbeeld van een GET-verzoek met `fetch`, inclusief type-annotatie en foutafhandeling:
```typescript
async function fetchWeather(city: string): Promise<WeatherData | null> {
const apiKey = 'JOUW_API_KEY';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&appid=${apiKey}&units=metric`;
try {
const response = await fetch(url);
if (!response.ok) {
console.error(`Fout bij ophalen gegevens: ${response.status} ${response.statusText}`);
return null;
}
const data = await response.json();
// Transformeer API-data naar ons type
const weatherData: WeatherData = {
city: data.name,
temperature: data.main.temp,
description: data.weather[0].description,
humidity: data.main.humidity,
windSpeed: data.wind.speed
};
return weatherData;
} catch (error) {
console.error('Netwerkfout:', error);
return null;
}
}
```
**Gebruik:**
```typescript
fetchWeather('Amsterdam').then(data => {
if (data) {
console.log(`Weer in ${data.city}: ${data.temperature}°C, ${data.description}`);
}
});
```
---
## 3. Stap 3: Data versturen met `fetch` (POST)
Stel dat je bijvoorbeeld je favoriete stad wilt opslaan op een server via POST:
```typescript
interface FavoriteCity {
city: string;
userId: string;
}
async function saveFavoriteCity(favorite: FavoriteCity): Promise<boolean> {
try {
const response = await fetch('https://jouw-api.com/favorites', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(favorite)
});
if (response.ok) {
return true;
} else {
console.error(`Fout bij opslaan: ${response.status} ${response.statusText}`);
return false;
}
} catch (error) {
console.error('Netwerkfout:', error);
return false;
}
}
```
**Gebruik:**
```typescript
saveFavoriteCity({ city: 'Amsterdam', userId: 'user123' }).then(success => {
if (success) {
console.log('Favoriete stad opgeslagen!');
}
});
```
---
## 4. Stap 4: Gebruik maken van `axios`
`axios` biedt een gebruiksvriendelijkere manier om HTTP-verzoeken te doen. Installeer eerst:
```bash
npm install axios
```
Voorbeeld met `axios`:
```typescript
import axios from 'axios';
async function fetchWeatherWithAxios(city: string): Promise<WeatherData | null> {
const apiKey = 'JOUW_API_KEY';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&appid=${apiKey}&units=metric`;
try {
const response = await axios.get(url);
const data = response.data;
const weatherData: WeatherData = {
city: data.name,
temperature: data.main.temp,
description: data.weather[0].description,
humidity: data.main.humidity,
windSpeed: data.wind.speed
};
return weatherData;
} catch (error) {
if (axios.isAxiosError(error)) {
console.error('Axios fout:', error.response?.status, error.message);
} else {
console.error('Onbekende fout:', error);
}
return null;
}
}
```
---
## Samenvatting
- Definieer duidelijke TypeScript-interfaces voor API-gegevens.
- Gebruik `async/await` voor leesbare asynchrone code.
- Voeg foutafhandeling toe voor netwerk- en API-fouten.
- Gebruik `fetch` of `axios` afhankelijk van je voorkeur.
- Zorg dat je API-sleutels veilig worden bewaard en niet in de frontend wordt hardcoded.
---
Wil je nog een voorbeeld voor een specifieke API of meer details?
provider: deepseek
model: deepseek-chat
Zeker! Hier is een uitgebreide uitleg over het veilig ophalen van weersdata met TypeScript:
## 1. Type-definities voor Weersdata
```typescript
// types/weather.ts
export interface WeatherData {
name: string;
main: {
temp: number;
feels_like: number;
humidity: number;
pressure: number;
};
weather: Array<{
main: string;
description: string;
icon: string;
}>;
wind: {
speed: number;
deg: number;
};
}
export interface WeatherError {
cod: string;
message: string;
}
export interface WeatherRequest {
city: string;
units?: 'metric' | 'imperial';
lang?: string;
}
```
## 2. GET-verzoek met fetch
```typescript
// services/weatherService.ts
import { WeatherData, WeatherError, WeatherRequest } from '../types/weather';
const API_KEY = process.env.WEATHER_API_KEY;
const BASE_URL = 'https://api.openweathermap.org/data/2.5';
export async function getWeatherData(
request: WeatherRequest
): Promise<WeatherData> {
try {
const params = new URLSearchParams({
q: request.city,
appid: API_KEY!,
units: request.units || 'metric',
lang: request.lang || 'nl'
});
const response = await fetch(`${BASE_URL}/weather?${params}`);
if (!response.ok) {
const errorData: WeatherError = await response.json();
throw new Error(`Weather API error: ${errorData.message}`);
}
const data: WeatherData = await response.json();
return data;
} catch (error) {
if (error instanceof Error) {
throw new Error(`Failed to fetch weather data: ${error.message}`);
}
throw new Error('Unknown error occurred while fetching weather data');
}
}
```
## 3. GET-verzoek met Axios
```typescript
// services/weatherServiceAxios.ts
import axios, { AxiosResponse, AxiosError } from 'axios';
import { WeatherData, WeatherError, WeatherRequest } from '../types/weather';
const API_KEY = process.env.WEATHER_API_KEY;
const BASE_URL = 'https://api.openweathermap.org/data/2.5';
const weatherApi = axios.create({
baseURL: BASE_URL,
timeout: 10000,
params: {
appid: API_KEY,
units: 'metric',
lang: 'nl'
}
});
export async function getWeatherDataAxios(
request: WeatherRequest
): Promise<WeatherData> {
try {
const response: AxiosResponse<WeatherData> = await weatherApi.get('/weather', {
params: {
q: request.city
}
});
return response.data;
} catch (error) {
const axiosError = error as AxiosError<WeatherError>;
if (axiosError.response) {
throw new Error(
`Weather API error (${axiosError.response.status}): ${axiosError.response.data.message}`
);
} else if (axiosError.request) {
throw new Error('Network error: Could not reach weather service');
} else {
throw new Error(`Request error: ${axiosError.message}`);
}
}
}
```
## 4. POST-verzoek voor batch-verwerking
```typescript
// types/batchWeather.ts
export interface BatchWeatherRequest {
cities: string[];
units?: 'metric' | 'imperial';
}
export interface BatchWeatherResponse {
results: WeatherData[];
errors: Array<{ city: string; error: string }>;
}
// services/batchWeatherService.ts
export async function getBatchWeatherData(
request: BatchWeatherRequest
): Promise<BatchWeatherResponse> {
try {
const response = await fetch('/api/weather/batch', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${API_KEY}`
},
body: JSON.stringify(request)
});
if (!response.ok) {
throw new Error(`Batch request failed: ${response.statusText}`);
}
const data: BatchWeatherResponse = await response.json();
return data;
} catch (error) {
throw new Error(`Batch weather request failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
}
}
```
## 5. Gebruik in componenten
```typescript
// components/WeatherDisplay.tsx
import React, { useState, useEffect } from 'react';
import { getWeatherData } from '../services/weatherService';
import { WeatherData } from '../types/weather';
const WeatherDisplay: React.FC<{ city: string }> = ({ city }) => {
const [weather, setWeather] = useState<WeatherData | null>(null);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchWeather = async () => {
try {
setLoading(true);
setError(null);
const data = await getWeatherData({ city });
setWeather(data);
} catch (err) {
setError(err instanceof Error ? err.message : 'Onbekende fout');
} finally {
setLoading(false);
}
};
fetchWeather();
}, [city]);
if (loading) return <div>Weerdata laden...</div>;
if (error) return <div>Fout: {error}</div>;
if (!weather) return <div>Geen data beschikbaar</div>;
return (
<div>
<h2>Weer in {weather.name}</h2>
<p>Temperatuur: {weather.main.temp}°C</p>
<p>Gevoelstemperatuur: {weather.main.feels_like}°C</p>
<p>Beschrijving: {weather.weather[0].description}</p>
</div>
);
};
```
## 6. Type-safe hook voor React
```typescript
// hooks/useWeather.ts
import { useState, useEffect } from 'react';
import { getWeatherData } from '../services/weatherService';
import { WeatherData } from '../types/weather';
export function useWeather(city: string) {
const [data, setData] = useState<WeatherData | null>(null);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const weatherData = await getWeatherData({ city });
setData(weatherData);
setError(null);
} catch (err) {
setError(err instanceof Error ? err.message : 'Onbekende fout');
setData(null);
} finally {
setLoading(false);
}
};
if (city) {
fetchData();
}
}, [city]);
return { data, loading, error };
}
```
## Belangrijke veiligheidsmaatregelen:
1. **Environment variables** voor API keys
2. **Type guards** voor runtime type checking
3. **Error boundaries** voor netwerkfouten
4. **Timeout** configuratie
5. **Rate limiting** implementatie
6. **Input validatie** voor stadnamen
Deze aanpak zorgt voor type-veiligheid, goede foutafhandeling en efficiënte data-ophaling!