Hoe kan ik een type-veilige routeringsoplossing implementeren in mijn TypeScript-toepassing voor {{routering_type}}?
description
Door deze prompt te volgen, zullen gebruikers de betrouwbaarheid en onderhoudbaarheid van hun routeringslogica verbeteren, runtime-fouten verminderen en de algehele kwaliteit van de toepassing verhogen.
prompt
try_prompt
Help me begrijpen hoe ik type-veilige routing kan maken en beheren in mijn TypeScript-toepassing voor {{routering_type}}. Geef gedetailleerde stappen, codev ... more
generate_helper
...
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Het maken van type-veilige routing in een TypeScript-client-side applicatie kan je helpen om fouten te voorkomen en de ontwikkelervaring te verbeteren. Hier is een uitgebreide gids met stappen, codevoorbeelden en beste praktijken:
1. **Gebruik een routing bibliotheek die TypeScript ondersteunt**
Populaire keuze: [React Router v6+](https://reactrouter.com/) voor React-projecten, of [Wouter](https://github.com/molefrog/wouter) voor lichte oplossingen. Voor niet-React projecten kun je ook een eigen eenvoudige router maken.
2. **Definieer je route types**
Maak een `Routes` type dat alle routes en hun parameters beschrijft:
```typescript
// Defineer alle routes en hun parameters
type Routes = {
home: undefined;
userProfile: { userId: string };
settings: undefined;
productDetails: { productId: number };
};
```
3. **Maak een helper voor route-URL's**
Omdat je type-safety wilt voor het genereren van URLs, maak je een functie die routes bouwt:
```typescript
// Type voor route namen
type RouteName = keyof Routes;
// Functie om URL te genereren
function generatePath<Route extends RouteName>(
route: Route,
params: Routes[Route]
): string {
switch (route) {
case 'home':
return '/';
case 'userProfile':
return `/user/${(params as { userId: string }).userId}`;
case 'settings':
return '/settings';
case 'productDetails':
return `/product/${(params as { productId: number }).productId}`;
default:
return '/';
}
}
```
4. **Type-veilig route navigatie**
Gebruik de `generatePath` functie bij het navigeren:
```typescript
const userId = 'abc123';
const userProfileUrl = generatePath('userProfile', { userId });
// Voor React Router
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate(userProfileUrl);
```
5. **Type-veilig route matching en parameter parsing**
Bij het ontvangen van de URL, parse je de route en koppel je het aan je typesysteem:
```typescript
// Bijvoorbeeld met React Router v6
import { useParams, useMatch, matchPath } from 'react-router-dom';
function MyComponent() {
const match = useMatch('/user/:userId');
if (match && match.params) {
const { userId } = match.params as { userId: string };
// Nu is userId getypeerd als string
}
}
```
Voor meer geavanceerde routing kun je een eigen parser schrijven die de URL's matcht en parameters teruggeeft met juiste types.
6. **Gebruik een eigen route-definitie en parser**
Voor volledige controle en typeveiligheid, kun je een route-definitie gebruiken:
```typescript
// Route definitie
const routesConfig = {
home: "/",
userProfile: "/user/:userId",
settings: "/settings",
productDetails: "/product/:productId"
} as const;
type RoutesConfig = typeof routesConfig;
type ExtractParams<Path extends string> =
Path extends `${infer _}:${infer Param}/${infer Rest}`
? { [k in Param]: string } & ExtractParams<Rest>
: Path extends `${infer _}:${infer Param}`
? { [k in Param]: string }
: {};
function matchRoute<Path extends keyof RoutesConfig>(
pathname: string,
routeKey: Path
): Routes[Path] | undefined {
const routePattern = routesConfig[routeKey];
// Gebruik bijvoorbeeld path-to-regexp of een eigen parser
// voor complexere matching
// Hier is een eenvoudige inline matching:
const regexStr = routePattern.replace(/:\w+/g, '([^/]+)');
const regex = new RegExp(`^${regexStr}$`);
const match = pathname.match(regex);
if (!match) return undefined;
// Extract parameters
const paramNames = Array.from(routePattern.matchAll(/:(\w+)/g)).map(m => m[1]);
const params = paramNames.reduce((acc, name, index) => {
acc[name] = match![index + 1];
return acc;
}, {} as Record<string, string>);
return {
route: routeKey,
params: params as any, // hier zou je het verder kunnen typen
} as any;
}
```
7. **Beste praktijken**
- **Gebruik `as const`** bij je route definities voor betere type-inferentie.
- **Gebruik helper functies** voor het genereren en parsen van routes.
- **Voorkom 'magic strings'** door je routes centraal te definiëren.
- **Gebruik TypeScript generics** om de types automatisch te laten afleiden.
- **Documenteer je route types** zodat het duidelijk is welke parameters vereist zijn.
- **Overweeg third-party bibliotheken** zoals `path-to-regexp` voor complexere matching en URL-constructie.
---
**Samenvatting**
Door je routes en parameters te definiëren in vaste types, en helper functies te maken voor het genereren en matchen van routes, kun je volledige type-veiligheid garanderen. Zo voorkom je fouten zoals verkeerd gespelde routes of onjuiste parameters, en verbeter je de onderhoudbaarheid van je code.
Als je meer specifieke codevoorbeelden of hulp voor een bepaald framework nodig hebt, laat het gerust weten!
provider: deepseek
model: deepseek-chat
Zeker! Ik help je bij het opzetten van type-veilige routing in je TypeScript-applicatie. Hier is een complete handleiding met stappen, codevoorbeelden en best practices.
## 1. Route Definities en Types
Eerst definiëren we onze routes met bijbehorende parameters:
```typescript
// types/routes.ts
export interface RouteParams {
'/': never; // Geen parameters
'/gebruikers': never;
'/gebruikers/:id': { id: string };
'/profiel/:userId/instellingen': { userId: string; tab?: string };
'/producten/:categorie/:productId': { categorie: string; productId: string };
'/zoek': { q: string; pagina?: number };
}
export type RoutePath = keyof RouteParams;
```
## 2. Type-veilige Router Implementatie
```typescript
// utils/router.ts
import { RouteParams, RoutePath } from './types/routes';
class TypeSafeRouter {
// Navigeer naar een route met type-veilige parameters
navigate<T extends RoutePath>(
path: T,
params: RouteParams[T]
): void {
const url = this.buildUrl(path, params);
window.history.pushState({}, '', url);
this.dispatchNavigationEvent(url);
}
// Bouw URL met parameters
private buildUrl<T extends RoutePath>(
path: T,
params: RouteParams[T]
): string {
let url: string = path;
// Vervang route parameters
Object.entries(params as object).forEach(([key, value]) => {
if (url.includes(`:${key}`)) {
url = url.replace(`:${key}`, encodeURIComponent(String(value)));
}
});
// Voeg query parameters toe
const queryParams = new URLSearchParams();
Object.entries(params as object).forEach(([key, value]) => {
if (!url.includes(`:${key}`) && value !== undefined) {
queryParams.append(key, String(value));
}
});
const queryString = queryParams.toString();
return queryString ? `${url}?${queryString}` : url;
}
// Parse huidige URL
getCurrentParams<T extends RoutePath>(path: T): RouteParams[T] | null {
const currentPath = window.location.pathname;
const pattern = this.pathToRegex(path);
const match = currentPath.match(pattern);
if (!match) return null;
const params: any = {};
const paramNames = this.extractParamNames(path);
paramNames.forEach((name, index) => {
params[name] = decodeURIComponent(match[index + 1]);
});
// Parse query parameters
const urlParams = new URLSearchParams(window.location.search);
urlParams.forEach((value, key) => {
if (!paramNames.includes(key)) {
// Type conversie voor query parameters
params[key] = this.parseQueryParam(value);
}
});
return params as RouteParams[T];
}
private pathToRegex(path: string): RegExp {
const pattern = path.replace(/:\w+/g, '([^/]+)');
return new RegExp(`^${pattern}$`);
}
private extractParamNames(path: string): string[] {
const matches = path.match(/:\w+/g) || [];
return matches.map(match => match.slice(1));
}
private parseQueryParam(value: string): string | number | boolean {
// Probeer te parseren als number
if (/^\d+$/.test(value)) return parseInt(value, 10);
// Probeer te parseren als boolean
if (value === 'true') return true;
if (value === 'false') return false;
// Anders als string
return value;
}
private dispatchNavigationEvent(url: string): void {
window.dispatchEvent(new PopStateEvent('popstate'));
}
}
export const router = new TypeSafeRouter();
```
## 3. React Hook voor Type-veilige Navigatie
```typescript
// hooks/useNavigation.ts
import { useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { RouteParams, RoutePath } from '../types/routes';
import { router } from '../utils/router';
export const useTypeSafeNavigate = () => {
const reactNavigate = useNavigate();
const navigate = useCallback(<T extends RoutePath>(
path: T,
params: RouteParams[T]
) => {
const url = router.buildUrl(path, params);
reactNavigate(url);
}, [reactNavigate]);
return navigate;
};
```
## 4. Route Component met Type Safety
```typescript
// components/TypeSafeLink.tsx
import React from 'react';
import { Link } from 'react-router-dom';
import { RouteParams, RoutePath } from '../types/routes';
import { router } from '../utils/router';
interface TypeSafeLinkProps<T extends RoutePath> {
to: T;
params: RouteParams[T];
children: React.ReactNode;
className?: string;
}
export function TypeSafeLink<T extends RoutePath>({
to,
params,
children,
className
}: TypeSafeLinkProps<T>) {
const href = router.buildUrl(to, params);
return (
<Link to={href} className={className}>
{children}
</Link>
);
}
```
## 5. Gebruik in Componenten
```typescript
// components/UserProfile.tsx
import React from 'react';
import { useTypeSafeNavigate } from '../hooks/useNavigation';
import { TypeSafeLink } from './TypeSafeLink';
export const UserProfile: React.FC = () => {
const navigate = useTypeSafeNavigate();
const handleViewProfile = () => {
// Type-veilige navigatie - TypeScript zal fouten aangeven bij verkeerde parameters
navigate('/profiel/:userId/instellingen', {
userId: '12345',
tab: 'privacy'
});
};
const handleSearch = () => {
navigate('/zoek', {
q: 'typescript',
pagina: 2
});
};
return (
<div>
{/* Type-veilige link */}
<TypeSafeLink
to="/gebruikers/:id"
params={{ id: '67890' }}
className="profile-link"
>
Bekijk Gebruiker
</TypeSafeLink>
<button onClick={handleViewProfile}>
Naar Instellingen
</button>
<button onClick={handleSearch}>
Zoeken
</button>
</div>
);
};
```
## 6. Route Validatie Middleware
```typescript
// middleware/routeValidation.ts
import { RouteParams, RoutePath } from '../types/routes';
export function validateRouteParams<T extends RoutePath>(
path: T,
params: unknown
): params is RouteParams[T] {
const requiredParams = extractRequiredParams(path);
for (const param of requiredParams) {
if (!(params as any)?.[param]) {
console.error(`Ontbrekende vereiste parameter: ${param}`);
return false;
}
}
return true;
}
function extractRequiredParams(path: string): string[] {
const matches = path.match(/:\w+/g) || [];
return matches.map(match => match.slice(1));
}
// Gebruik in router
class ValidatedRouter extends TypeSafeRouter {
navigate<T extends RoutePath>(
path: T,
params: RouteParams[T]
): void {
if (!validateRouteParams(path, params)) {
throw new Error(`Ongeldige parameters voor route: ${path}`);
}
super.navigate(path, params);
}
}
```
## 7. Best Practices en Aanbevelingen
### 1. Centrale Route Definitie
```typescript
// Best practice: Exporteer route constanten
export const ROUTES = {
HOME: '/',
USERS: '/gebruikers',
USER_DETAIL: '/gebruikers/:id',
PROFILE_SETTINGS: '/profiel/:userId/instellingens',
PRODUCTS: '/producten/:categorie/:productId',
SEARCH: '/zoek'
} as const;
```
### 2. Custom Hooks voor Veelgebruikte Routes
```typescript
// hooks/useUserNavigation.ts
export const useUserNavigation = () => {
const navigate = useTypeSafeNavigate();
return {
goToUser: (id: string) => navigate('/gebruikers/:id', { id }),
goToProfileSettings: (userId: string, tab?: string) =>
navigate('/profiel/:userId/instellingen', { userId, tab }),
goToSearch: (query: string, page?: number) =>
navigate('/zoek', { q: query, pagina: page })
};
};
```
### 3. Error Boundaries voor Route Fouten
```typescript
// components/RouteErrorBoundary.tsx
import React from 'react';
interface State {
hasError: boolean;
}
export class RouteErrorBoundary extends React.Component<
{ children: React.ReactNode },
State
> {
public state: State = { hasError: false };
static getDerivedStateFromError(_: Error): State {
return { hasError: true };
}
componentDidCatch(error: Error) {
console.error('Route navigatie fout:', error);
}
render() {
if (this.state.hasError) {
return <div>Er is een fout opgetreden tijdens navigatie.</div>;
}
return this.props.children;
}
}
```
## 8. Gebruik in je App
```typescript
// App.tsx
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { RouteErrorBoundary } from './components/RouteErrorBoundary';
import { UserProfile } from './components/UserProfile';
import { UserSettings } from './components/UserSettings';
const App: React.FC = () => {
return (
<BrowserRouter>
<RouteErrorBoundary>
<Routes>
<Route path="/gebruikers/:id" element={<UserProfile />} />
<Route
path="/profiel/:userId/instellingen"
element={<UserSettings />}
/>
<Route path="/zoek" element={<SearchResults />} />
</Routes>
</RouteErrorBoundary>
</BrowserRouter>
);
};
export default App;
```
## Voordelen van deze aanpak:
1. **Compile-time type checking** - Fouten worden gevonden voor runtime
2. **Autocomplete** in IDEs voor route namen en parameters
3. **Refactoring-safe** - Wijzigingen in routes worden overal doorgevoerd
4. **Consistente parameter handling** - Altijd de juiste types
5. **Betere developer experience** - Minder runtime errors
Deze implementatie zorgt ervoor dat je volledige type-veiligheid hebt tijdens ontwikkeling, terwijl je de flexibiliteit behoudt van dynamische routing in je applicatie.