Typescript Module Importeren en Exporteren Uitleg
description
Met deze prompt leer je hoe je effectieve module structuren in Typescript maakt, wat helpt bij het organiseren van je code, bevordert hergebruik en onderhoudbaarheid, en problemen met scope en afhankelijkheden voorkomt.
prompt
Leg uit hoe ik modules kan importeren en exporteren in Typescript voor <beschrijving van ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
In TypeScript kun je modules gebruiken om code georganiseerd en herbruikbaar te maken. Hieronder leg ik uit hoe je modules kunt importeren en exporteren, met voorbeelden voor functies zoals gebruikerslogin, registratie en sessiebeheer, inclusief zowel named als default exports.
**1. Exporteren van functies in modules**
*Named exports:*
Je kunt meerdere functies of variabelen exporteren door ze te markeren met `export`. Bijvoorbeeld:
```typescript
// auth.ts
export function loginUser(username: string, password: string): boolean {
// Logica voor gebruikerslogin
return true; // Voorbeeld
}
export function registerUser(username: string, password: string): boolean {
// Logica voor gebruikersregistratie
return true; // Voorbeeld
}
```
*Default export:*
Je kunt één hoofdfunctionaliteit exporteren als default:
```typescript
// session.ts
export default class SessionManager {
startSession(userId: string): void {
// Start sessie
}
endSession(): void {
// Beëindig sessie
}
}
```
**2. Importeren van modules**
*Importeren van named exports:*
Gebruik accolades `{}`:
```typescript
import { loginUser, registerUser } from './auth';
loginUser('gebruiker', 'wachtwoord');
registerUser('nieuwgebruiker', 'wachtwoord123');
```
*Importeren van een default export:*
Je kunt een alias geven of de naam gebruiken die je wilt:
```typescript
import SessionManager from './session';
const sessie = new SessionManager();
sessie.startSession('user123');
```
*Combineren van named en default imports:*
```typescript
import SessionManager, { loginUser } from './sessionAuth';
const sessie = new SessionManager();
sessie.startSession('user123');
loginUser('gebruiker', 'wachtwoord');
```
**Samenvatting:**
- Gebruik `export` voor named exports.
- Gebruik `export default` voor één hoofdexport per module.
- Importeer named exports met `{}` en default exports zonder.
Door deze structuur kun je overzichtelijk en flexibel omgaan met modules voor login, registratie en sessiebeheer in TypeScript.
provider: deepseek
model: deepseek-chat
Zeker, hier is een uitleg over het importeren en exporteren van modules in TypeScript voor gebruikersauthenticatie:
## 1. Aanmaken van de Auth Module
**auth.ts** (of **auth.tsx** voor React):
```typescript
// Named exports voor individuele functies
export const loginUser = (email: string, password: string): boolean => {
// Login logica
console.log(`Inloggen met: ${email}`);
return true;
};
export const registerUser = (userData: {
email: string;
password: string;
name: string;
}): boolean => {
// Registratie logica
console.log(`Registreren: ${userData.name}`);
return true;
};
export const manageSession = (): { isValid: boolean; userId?: string } => {
// Sessie beheer
return { isValid: true, userId: '123' };
};
// Default export voor de hoofd AuthService class
class AuthService {
private currentUser: string | null = null;
constructor() {
this.initialize();
}
private initialize(): void {
console.log('Auth service geïnitialiseerd');
}
public logout(): void {
this.currentUser = null;
console.log('Uitgelogd');
}
public getCurrentUser(): string | null {
return this.currentUser;
}
}
export default AuthService;
```
## 2. Importeren in andere bestanden
**app.ts**:
```typescript
// Named imports voor specifieke functies
import { loginUser, registerUser, manageSession } from './auth';
// Default import voor de hoofdclass
import AuthService from './auth';
// Gebruik van named exports
const loginSuccess = loginUser('gebruiker@email.nl', 'wachtwoord123');
console.log(loginSuccess);
const session = manageSession();
console.log(session.isValid);
// Gebruik van default export
const authService = new AuthService();
authService.logout();
// Alternatieve import syntax
import * as AuthModule from './auth';
// Gebruik via module namespace
const registerSuccess = AuthModule.registerUser({
email: 'nieuw@email.nl',
password: 'secret',
name: 'Jan Jansen'
});
```
## 3. Gecombineerde imports
**main.ts**:
```typescript
// Combineer default en named imports
import AuthService, { loginUser, manageSession } from './auth';
// Type imports voor type safety
import type { UserSession } from './types';
// Gebruik in een React component (voorbeeld)
class LoginComponent {
async handleLogin(email: string, password: string): Promise<void> {
try {
const success = loginUser(email, password);
if (success) {
const auth = new AuthService();
// Verdere logica
}
} catch (error) {
console.error('Login mislukt:', error);
}
}
}
```
## 4. Type Definitions (optioneel)
**types.ts**:
```typescript
export interface UserData {
email: string;
password: string;
name: string;
}
export interface UserSession {
isValid: boolean;
userId?: string;
expiresAt?: Date;
}
export interface LoginCredentials {
email: string;
password: string;
rememberMe?: boolean;
}
```
## 5. Gebruik met async functies
**async-auth.ts**:
```typescript
// Async functies met named exports
export const asyncLogin = async (credentials: {
email: string;
password: string;
}): Promise<boolean> => {
// Async login logica
return true;
};
export const asyncRegister = async (userData: any): Promise<string> => {
// Async registratie
return 'user-id';
};
```
## Belangrijke punten:
- **Named exports**: Gebruik voor individuele functies/constanten
- **Default export**: Gebruik voor de hoofdclass/main functionality
- **Type imports**: Gebruik `import type` voor pure type imports
- **Path resolving**: Zorg voor correcte relative paths (`./` voorzelfde directory)
Deze structuur zorgt voor goede code organization en type safety in je authenticatie module.