Natuurlijk! Hier is een stapsgewijze gids om effectief TypeScript te integreren in je Svelte-project "Weerapp" en om aangepaste types voor props te gebruiken: 1. TypeScript in Svelte-project installeren Als je nog geen TypeScript hebt geïnstalleerd, voeg het dan toe: ```bash npm install --save-dev typescript svelte-preprocess @tsconfig/svelte ``` 2. Svelte-configuratie aanpassen Maak of update je `svelte.config.js` om svelte-preprocess te gebruiken met TypeScript: ```js import preprocess from 'svelte-preprocess'; export default { preprocess: preprocess({ typescript: true }), // andere configuraties... }; ``` 3. TypeScript-ondersteuning in je project Maak een `tsconfig.json` bestand aan in de root van je project met de volgende inhoud: ```json { "extends": "@tsconfig/svelte/tsconfig.json", "compilerOptions": { "allowJs": true, "checkJs": false, "isolatedModules": true, "esModuleInterop": true, "strict": true, "skipLibCheck": true }, "include": ["src"], "exclude": ["node_modules"] } ``` 4. Bestanden hernoemen naar `.svelte` met `<script lang="ts">` In je Svelte-componenten gebruik je: ```svelte <script lang="ts"> // TypeScript code hier export let temperatuur: number; </script> ``` 5. Aangepaste types voor props definiëren Voor complexe props kun je eigen types of interfaces maken. Bijvoorbeeld: ```ts // types.ts export interface WeerData { temperatuur: number; weersomstandigheden: string; locatie: string; } ``` Gebruik deze in je component: ```svelte <script lang="ts"> import type { WeerData } from './types'; export let data: WeerData; </script> ``` 6. Verbeter je ontwikkelworkflow - **Type-checking:** Dankzij TypeScript krijg je compileerfouten direct tijdens het ontwikkelen. - **Autocompletion:** Je IDE biedt betere suggesties voor props, functies, en data. - **Veiligheid:** Voorkom bugs door expliciete types en interfaces te gebruiken. - **Refactoring:** Gemakkelijker om je code te herstructureren met vertrouwen. 7. Extra tips - Gebruik `@types/` pakketten voor externe bibliotheken. - Schrijf eigen types voor complexe props en data (zoals hierboven). - Overweeg het gebruik van `svelte-check` voor extra statische analyses. Door deze stappen te volgen, zet je een solide basis neer voor een TypeScript-gedreven ontwikkelworkflow binnen je Weerapp-project, inclusief het gebruik van aangepaste types voor props.

Hier is een stapsgewijze handleiding om TypeScript effectief te gebruiken in je Svelte Weerapp project: ## 1. TypeScript installeren en configureren ```bash npm install --save-dev typescript @tsconfig/svelte svelte-preprocess ``` **tsconfig.json**: ```json { "extends": "@tsconfig/svelte/tsconfig.json", "compilerOptions": { "strict": true, "types": ["svelte"] }, "include": ["src/**/*"], "exclude": ["node_modules/*", "__sapper__/*", "public/*"] } ``` **svelte.config.js**: ```javascript import sveltePreprocess from 'svelte-preprocess'; export default { preprocess: sveltePreprocess({ typescript: true }) }; ``` ## 2. Aangepaste types voor props definiëren Maak een **types.ts** bestand in je src-map: ```typescript // src/types.ts // Weerdata types export interface WeerData { temperatuur: number; beschrijving: string; locatie: string; vochtigheid: number; windsnelheid: number; icoon: string; datum: Date; } // Component props types export interface WeerKaartProps { data: WeerData[]; geselecteerdeLocatie: string; opLocatieKlik: (locatie: string) => void; } export interface WeerDetailProps { weerData: WeerData | null; eenheid: 'celsius' | 'fahrenheit'; } export interface ZoekBalkProps { zoekTerm: string; opZoek: (term: string) => void; placeholder?: string; } ``` ## 3. TypeScript in Svelte componenten gebruiken **WeerKaart.svelte**: ```svelte <script lang="ts"> import type { WeerKaartProps } from '../types'; export let data: WeerKaartProps['data'] = []; export let geselecteerdeLocatie: WeerKaartProps['geselecteerdeLocatie'] = ''; export let opLocatieKlik: WeerKaartProps['opLocatieKlik']; // Type-safe functies const berekenGemiddeldeTemp = (): number => { if (data.length === 0) return 0; return data.reduce((acc, curr) => acc + curr.temperatuur, 0) / data.length; }; </script> <div class="weer-kaart"> {#each data as locatie} <button class:actief={locatie.locatie === geselecteerdeLocatie} on:click={() => opLocatieKlik(locatie.locatie)} > {locatie.locatie}: {locatie.temperatuur}°C </button> {/each} </div> ``` **WeerDetail.svelte**: ```svelte <script lang="ts"> import type { WeerDetailProps, WeerData } from '../types'; export let weerData: WeerDetailProps['weerData'] = null; export let eenheid: WeerDetailProps['eenheid'] = 'celsius'; // Type guard voor null-check const heeftWeerData = (data: WeerData | null): data is WeerData => { return data !== null; }; // Type-safe temperatuur conversie const getTemperatuur = (temp: number): number => { return eenheid === 'fahrenheit' ? (temp * 9/5) + 32 : temp; }; </script> {#if heeftWeerData(weerData)} <div class="weer-detail"> <h2>{weerData.locatie}</h2> <p>Temperatuur: {getTemperatuur(weerData.temperatuur)}°{eenheid === 'celsius' ? 'C' : 'F'}</p> <p>{weerData.beschrijving}</p> <img src={weerData.icoon} alt={weerData.beschrijving} /> </div> {:else} <p>Geen weerdata beschikbaar</p> {/if} ``` ## 4. Store types toevoegen **stores.ts**: ```typescript import { writable, derived } from 'svelte/store'; import type { WeerData } from './types'; // Typed stores export const weerDataStore = writable<WeerData[]>([]); export const geselecteerdeLocatie = writable<string>(''); export const temperatuurEenheid = writable<'celsius' | 'fahrenheit'>('celsius'); // Derived store met type safety export const gefilterdeWeerData = derived( [weerDataStore, geselecteerdeLocatie], ([$weerData, $geselecteerdeLocatie]) => { return $weerData.filter(data => $geselecteerdeLocatie === '' || data.locatie === $geselecteerdeLocatie ); } ); ``` ## 5. API calls met TypeScript **weerApi.ts**: ```typescript import type { WeerData } from './types'; export class WeerApiService { private readonly baseUrl = 'https://api.weerservice.com'; async fetchWeerData(locatie: string): Promise<WeerData> { const response = await fetch(`${this.baseUrl}/weer/${locatie}`); if (!response.ok) { throw new Error(`Weerdata ophalen mislukt: ${response.status}`); } const data = await response.json(); // Type assertion met runtime validatie return this.valideerWeerData(data); } private valideerWeerData(data: any): WeerData { if (!data.temperatuur || !data.locatie) { throw new Error('Ongeldige weerdata ontvangen'); } return { temperatuur: Number(data.temperatuur), beschrijving: data.beschrijving || 'Onbekend', locatie: data.locatie, vochtigheid: Number(data.vochtigheid) || 0, windsnelheid: Number(data.windsnelheid) || 0, icoon: data.icoon || '', datum: new Date(data.datum || Date.now()) }; } } ``` ## 6. Package.json scripts toevoegen ```json { "scripts": { "dev": "svelte-kit dev", "build": "svelte-kit build", "check": "svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch" } } ``` ## Voordelen voor je ontwikkelworkflow: 1. **Betere autocomplete** in editors 2. **Compile-time foutdetectie** voor typefouten 3. **Self-documenterende code** door expliciete types 4. **Veiligere refactoring** door type checking 5. **Betere samenwerking** door duidelijke interfaces ## TypeScript checks uitvoeren: ```bash npm run check # Type checking npm run check:watch # Continue type checking ``` Deze setup geeft je een robuuste TypeScript-omgeving voor je Weerapp met volledige type-veiligheid voor props en alle andere data structuren!