Kapitel 10: Modularisierung und Engineering

🎯 Lernziele

In diesem Kapitel lernen Sie:

• ✅ Module exportieren (export)
• ✅ Module importieren (import)
• ✅ Typen exportieren und importieren
• ✅ Declaration Files (.d.ts)
• ✅ Typen für Drittanbieter-Bibliotheken
• ✅ TypeScript + Vite Projekt erstellen
• ✅ TypeScript + Vue/React verwenden

---

10.1 Exportieren (export)

📖 Einfache Definition

export macht Variablen, Funktionen, Klassen, Interfaces in anderen Dateien verfügbar.

💻 Code-Beispiel

// math.ts

// 1. Benannte Exporte (Named Exports)
export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

export const PI: number = 3.14159;

export interface Point {
  x: number;
  y: number;
}

export class Calculator {
  multiply(a: number, b: number): number {
    return a * b;
  }
}

// 2. Standard-Export (Default Export)
// Jede Datei kann höchstens einen default Export haben
export default function greet(name: string): string {
  return `Hallo, ${name}!`;
}

---

10.2 Importieren (import)

📖 Einfache Definition

import bringt exportierte Werte/Typen in die aktuelle Datei.

💻 Code-Beispiel

// main.ts

// 1. Benannte Importe (Named Imports)
import { add, subtract, PI, Point, Calculator } from './math';

console.log(add(5, 3));        // Ausgabe: 8
console.log(subtract(5, 3));   // Ausgabe: 2
console.log(PI);                // Ausgabe: 3.14159

const point: Point = { x: 10, y: 20 };
const calc = new Calculator();
console.log(calc.multiply(5, 3));  // Ausgabe: 15

// 2. Standard-Import (Default Import)
import greet from './math';  // Keine geschweiften Klammern!

console.log(greet("Max"));  // Ausgabe: Hallo, Max!

// 3. Alles importieren als Objekt
import * as math from './math';

console.log(math.add(5, 3));  // Ausgabe: 8
console.log(math.PI);          // Ausgabe: 3.14159

---

10.3 Typen exportieren und importieren

💻 Code-Beispiel

// types.ts

// Typen exportieren
export interface User {
  id: number;
  name: string;
  email: string;
}

export type ID = string | number;

export enum UserRole {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST"
}

// main.ts

// Typen importieren
import { User, ID, UserRole } from './types';

const user: User = {
  id: 1,
  name: "Max",
  email: "max@example.com"
};

const id: ID = 123;
const role: UserRole = UserRole.Admin;

⚠️ Wichtig

Typen müssen mit export exportiert werden, um in anderen Dateien verwendet zu werden!

---

10.4 Declaration Files (.d.ts)

📖 Einfache Definition

.d.ts Dateien (Declaration Files) enthalten nur Typinformationen, keinen JavaScript-Code.

💡 Warum nötig?

Wenn Sie eine JavaScript-Bibliothek verwenden, wei TypeScript nicht, welche Typen sie hat. .d.ts Dateien lösen dieses Problem.

💻 Code-Beispiel

// my-library.js (JavaScript-Bibliothek)
function greet(name) {
  return `Hallo, ${name}!`;
}

module.exports = { greet };

// my-library.d.ts (Declaration File)
declare function greet(name: string): string;

export = { greet };

Jetzt kann TypeScript die Bibliothek typsicher verwenden!

---

10.5 @types Pakete

📖 Einfache Definition

Viele beliebte JavaScript-Bibliotheken haben offizielle Typdefinitionen im @types Scope.

💻 Code-Beispiel

# Typdefinitionen für Node.js installieren
npm install --save-dev @types/node

# Typdefinitionen für Express installieren
npm install --save-dev @types/express

# Typdefinitionen für Jest installieren
npm install --save-dev @types/jest

🎨 Praxis-Beispiel

// Ohne @types/node
const fs = require('fs');
fs.readFile();  // TypeScript weiß nicht, welche Parameter!

// Mit @types/node
import * as fs from 'fs';
fs.readFileSync('file.txt', 'utf-8');  // ✅ Vollständige Typprüfung!

---

10.6 Eigene Declaration Files schreiben

💻 Code-Beispiel

// my-module.js
function doSomething(options) {
  // ...
}

module.exports = { doSomething };

// my-module.d.ts (im selben Verzeichnis)
declare function doSomething(options: {
  name: string;
  age: number;
  callback: () => void;
}): void;

export = { doSomething };

---

10.7 TypeScript + Vite Projekt erstellen

Schritt 1: Vite-Projekt erstellen

# Vite-Projekt erstellen
npm create vite@latest my-ts-project -- --template vanilla-ts

# Oder React + TypeScript
npm create vite@latest my-react-ts -- --template react-ts

# Oder Vue + TypeScript
npm create vite@latest my-vue-ts -- --template vue-ts

Schritt 2: Projektstruktur

my-ts-project/
├── src/
│   ├── main.ts          ← TypeScript-Datei
│   ├── types.ts         ← Eigene Typdefinitionen
│   └── components/      ← Komponenten
│       └── Button.ts
├── tsconfig.json        ← TypeScript-Konfiguration
├── vite.config.ts       ← Vite-Konfiguration
└── package.json

Schritt 3: tsconfig.json für Vite

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"]
}

---

10.8 TypeScript + React

💻 Code-Beispiel

// src/App.tsx

import React from 'react';

// Props Interface
interface GreetProps {
  name: string;
  age?: number;
}

// React Komponente mit TypeScript
const Greet: React.FC<GreetProps> = ({ name, age }) => {
  return (
    <div>
      <h1>Hallo, {name}!</h1>
      {age && <p>Du bist {age} Jahre alt.</p>}
    </div>
  );
};

export default Greet;

💻 Verwendung

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App name="Max" age={25} />
  </React.StrictMode>
);

---

10.9 TypeScript + Vue 3

💻 Code-Beispiel

<!-- src/App.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue';

// Typisierte Reactive Variables
const count = ref<number>(0);
const message = ref<string>('Hallo Welt');

// Computed Property mit Typ
const doubleCount = computed<number>(() => count.value * 2);

// Funktion mit Typen
function increment(): void {
  count.value++;
}

// Interface für Props
interface Props {
  title: string;
  count?: number;
}

// Props definieren
const props = withDefaults(defineProps<Props>(), {
  count: 0
});
</script>

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
  <p>Doppelt: {{ doubleCount }}</p>
  <button @click="increment">Erhöhen</button>
</template>

---

10.10 Praxis: Modulare TypeScript-Anwendung

💻 Vollständiges Beispiel

// src/types/user.ts
export interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}

// src/api/userApi.ts
import type { User } from '../types/user';

const API_URL = 'https://api.example.com/users';

export async function getUsers(): Promise<User[]> {
  const response = await fetch(API_URL);
  return response.json();
}

export async function getUserById(id: number): Promise<User> {
  const response = await fetch(`${API_URL}/${id}`);
  return response.json();
}

// src/main.ts
import type { User } from './types/user';
import { getUsers } from './api/userApi';

async function displayUsers(): Promise<void> {
  const users: User[] = await getUsers();
  
  users.forEach((user: User) => {
    console.log(`Benutzer: ${user.name} (${user.email})`);
  });
}

displayUsers();

---

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Exportieren (export) – Macht Werte/Typen verfügbar
• ✅ Importieren (import) – Bringt Werte/Typen in die Datei
• ✅ Typen exportieren/importieren – Interfaces, Type Aliases, Enums
• ✅ Declaration Files (.d.ts) – Typinformationen für JS-Bibliotheken
• ✅ @types Pakete – Offizielle Typdefinitionen installieren
• ✅ TypeScript + Vite – Moderne Projektstruktur
• ✅ TypeScript + React/Vue – Typsichere Frontend-Entwicklung

---

🎯 Nächstes Kapitel

Im Kapitel 11 lernen wir praktische Fallstudien (Real-world Projects)!

👉 Weiter zu Kapitel 11: Praxis-Projekte

---

❓ Häufig gestellte Fragen

F: Soll ich default export oder named export verwenden?

A: Es wird empfohlen, named exports zu verwenden (bessere Tree-Shaking, einfachere Refactoring).

F: Woher bekomme ich Typdefinitionen für eine JS-Bibliothek?

A:

1. Suchen Sie auf https://www.typescriptlang.org/dt/search
2. Installieren Sie mit npm install --save-dev @types/<library-name>
3. Wenn keine existieren: Schreiben Sie eine eigene .d.ts Datei

F: Kann ich TypeScript in einem bestehenden JS-Projekt verwenden?

A: Ja! Benennen Sie .js Dateien in .ts um und kompilieren Sie schrittweise.

---

🎉 Herzlichen Glückwunsch! Sie haben Kapitel 10 abgeschlossen!