TypeScript Einführung - JavaScript mit Typsicherheit

Willkommen zu TypeScript! 🎉 In diesem Artikel lernst du, warum TypeScript die moderne Art ist, JavaScript zu schreiben.

Was ist TypeScript?

TypeScript ist JavaScript + Typen. Es ist eine Erweiterung von JavaScript, die vom Microsoft-Team entwickelt wurde.

Die wichtigste Regel: Jeder gültige JavaScript-Code ist auch gültiger TypeScript-Code!

// Das ist JavaScript UND TypeScript
const message = "Hello World"
console.log(message)

Warum TypeScript?

Problem mit JavaScript

JavaScript ist dynamisch typisiert:

// JavaScript
let age = 25
age = "fünfundzwanzig" // Kein Fehler!
age.toFixed(2) // Runtime Error! 💥

Fehler treten erst zur Laufzeit auf, wenn der Nutzer die App benutzt!

Lösung mit TypeScript

TypeScript ist statisch typisiert:

// TypeScript
let age: number = 25
age = "fünfundzwanzig" // ❌ Compile Error!
// Type 'string' is not assignable to type 'number'

Fehler werden sofort im Editor angezeigt, noch vor dem Ausführen!

TypeScript Vorteile

1. Frühe Fehlererkennung

function greet(name: string) {
  return `Hello ${name.toUpperCase()}`
}

greet("Max") // ✅ OK
greet(42) // ❌ Error: Argument of type 'number' is not assignable to parameter of type 'string'

Fehler werden beim Schreiben gefunden, nicht beim Testen!

2. Bessere Autovervollständigung

TypeScript kennt alle Eigenschaften und Methoden:

const user = {
  name: "Max",
  age: 25,
  email: "max@example.com"
}

user. // ← VS Code zeigt: name, age, email
// + alle String-Methoden wenn du name auswählst!

3. Selbstdokumentierender Code

// JavaScript - Was erwartet die Funktion?
function calculatePrice(base, tax, discount) {
  return base * (1 + tax) - discount
}

// TypeScript - Sofort klar!
function calculatePrice(
  base: number,
  tax: number,
  discount: number
): number {
  return base * (1 + tax) - discount
}

4. Refactoring ohne Angst

Bei Änderungen zeigt TypeScript alle betroffenen Stellen:

// Typ ändern
interface User {
  name: string
  age: number
  email: string // ← Neues Feld hinzugefügt
}

// TypeScript zeigt ALLE Stellen wo User verwendet wird
// und wo email fehlt!

5. Größere Projekte

• Bessere Wartbarkeit bei 1000+ Dateien
• Teams arbeiten sicherer zusammen
• Weniger Bugs in Production

TypeScript Setup

Installation

# Global installieren
npm install -g typescript

# Oder nur im Projekt
npm install --save-dev typescript

Dein erstes TypeScript-Programm

1. Erstelle hello.ts:

function greet(name: string): string {
  return `Hello ${name}!`
}

const message = greet("World")
console.log(message)

2. Kompiliere zu JavaScript:

tsc hello.ts

Dies erstellt hello.js:

function greet(name) {
  return "Hello " + name + "!"
}
var message = greet("World")
console.log(message)

3. Führe JavaScript aus:

node hello.js

tsconfig.json - TypeScript konfigurieren

Erstelle tsconfig.json im Projekt-Root:

{
  "compilerOptions": {
    "target": "ES2020",           // Ziel JavaScript-Version
    "module": "commonjs",          // Modul-System
    "strict": true,                // Alle strikten Typ-Checks aktivieren
    "esModuleInterop": true,       // Bessere Modul-Kompatibilität
    "skipLibCheck": true,          // node_modules nicht überprüfen
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",            // Kompilierte Dateien hierhin
    "rootDir": "./src"             // Source-Dateien hier
  },
  "include": ["src/**/*"],         // Welche Dateien kompilieren
  "exclude": ["node_modules"]      // Welche Dateien ignorieren
}

Wichtige Optionen:

• strict: true → Aktiviert alle Typ-Checks (empfohlen!)
• target → Welche JS-Version soll generiert werden
• module → CommonJS für Node.js, ES2020 für Browser
• outDir → Wohin kompilierte Dateien

Kompilieren mit tsconfig.json

# Einmal kompilieren
tsc

# Watch-Mode: Automatisch bei Änderungen
tsc --watch

Dein erstes TypeScript-Projekt

Projekt-Struktur:

my-project/
├── src/
│   └── index.ts
├── dist/           (generiert)
├── tsconfig.json
└── package.json

1. Projekt initialisieren:

mkdir my-ts-project
cd my-ts-project
npm init -y
npm install --save-dev typescript @types/node
npx tsc --init

2. src/index.ts erstellen:

interface User {
  name: string
  age: number
}

function greetUser(user: User): void {
  console.log(`Hello ${user.name}, you are ${user.age} years old!`)
}

const user: User = {
  name: "Max",
  age: 25
}

greetUser(user)

3. package.json Scripts hinzufügen:

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "dev": "tsc --watch"
  }
}

4. Build und Run:

npm run build  # Kompiliert zu dist/
npm start      # Führt aus

TypeScript vs JavaScript

| Feature | JavaScript | TypeScript | |---------|-----------|------------| | Typisierung | Dynamisch | Statisch | | Fehler | Zur Laufzeit | Beim Kompilieren | | Autovervollständigung | Basic | Exzellent | | Refactoring | Riskant | Sicher | | Setup | Keine | Kompilierung nötig | | Learning Curve | Leicht | Mittel | | Große Projekte | Schwer | Gut geeignet |

Wann TypeScript verwenden?

✅ TypeScript verwenden:

• Große Projekte (>5000 Zeilen)
• Team-Projekte
• Langfristige Wartung
• Libraries/Packages
• Backend-Entwicklung (Node.js)
• React/Angular/Vue Apps

❓ JavaScript reicht:

• Kleine Scripts
• Prototypen
• Quick & Dirty Lösungen
• Learning Basics

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,              // Alle aktivieren
    "noImplicitAny": true,       // Kein implizites 'any'
    "strictNullChecks": true,    // null/undefined prüfen
    "strictFunctionTypes": true  // Funktions-Typen streng prüfen
  }
}

function processData(data: any): any {
  return data.value
}

interface Data {
  value: string
}

function processData(data: Data): string {
  return data.value
}

const input = document.getElementById("email") as HTMLInputElement
input.value // Könnte null sein! 💥

const input = document.getElementById("email") as HTMLInputElement | null
if (input) {
  input.value // Sicher!
}

{
  "compilerOptions": {
    "strict": false
  }
}

{
  "compilerOptions": {
    "strict": true
  }
}

Verwandte Module

Voraussetzungen:

• 📚 JavaScript Grundlagen - Kenntnisse in JavaScript sind essentiell für TypeScript

TypeScript in der Praxis:

• ⚛️ React mit TypeScript - Type-safe React Components
• 🅰️ Angular - Angular nutzt TypeScript standardmäßig

Nächste Schritte

Jetzt kennst du TypeScript Basics!

Als Nächstes lernst du:

• Basic Types (string, number, boolean, etc.)
• Interfaces und Type Aliases
• Functions in TypeScript
• Classes und OOP
• Generics für wiederverwendbaren Code

Viel Erfolg! 🚀