TypeScript Anfänger 20 min

TypeScript Setup

Richte deine TypeScript-Entwicklungsumgebung ein und erstelle dein erstes TypeScript-Projekt.

Aktualisiert:

TypeScript Setup

Bevor wir mit TypeScript programmieren können, müssen wir unsere Entwicklungsumgebung einrichten. In diesem Kapitel lernst du verschiedene Wege, TypeScript zu nutzen.

Voraussetzungen

Du brauchst:

  1. Node.js - JavaScript-Laufzeitumgebung
  2. npm - Paketmanager (kommt mit Node.js)
  3. VS Code - Empfohlener Editor (oder ein anderer Code-Editor)

Node.js installieren

Falls noch nicht geschehen, lade Node.js von nodejs.org herunter und installiere es.

Überprüfe die Installation:

node --version   # z.B. v20.0.0
npm --version    # z.B. 10.0.0

TypeScript global installieren

Die einfachste Methode für den Einstieg:

npm install -g typescript

Überprüfe die Installation:

tsc --version   # z.B. Version 5.3.0

tsc steht für “TypeScript Compiler”.

Dein erstes TypeScript-Projekt

Projekt erstellen

# Neuen Ordner erstellen
mkdir mein-ts-projekt
cd mein-ts-projekt

# npm-Projekt initialisieren
npm init -y

# TypeScript als Dev-Abhängigkeit installieren
npm install --save-dev typescript

TypeScript konfigurieren

Erstelle eine TypeScript-Konfigurationsdatei:

npx tsc --init

Dies erstellt eine tsconfig.json mit Standardeinstellungen. Die wichtigsten Optionen:

{
  "compilerOptions": {
    // Ziel-JavaScript-Version
    "target": "ES2020",

    // Modul-System
    "module": "ESNext",

    // Strikte Typ-Überprüfung (empfohlen!)
    "strict": true,

    // Ausgabe-Ordner
    "outDir": "./dist",

    // Source-Maps für Debugging
    "sourceMap": true
  },
  "include": ["src/**/*"]
}

Projekt-Struktur

Erstelle diese Struktur:

mein-ts-projekt/
├── src/
│   └── index.ts
├── dist/           (wird automatisch erstellt)
├── package.json
└── tsconfig.json

Erste TypeScript-Datei

Erstelle src/index.ts:

// Einfache Typ-Annotation
const greeting: string = "Hallo TypeScript!";

// Funktion mit Typen
function add(a: number, b: number): number {
    return a + b;
}

// Interface definieren
interface Person {
    name: string;
    age: number;
}

// Funktion mit Interface
function greet(person: Person): string {
    return `Hallo ${person.name}, du bist ${person.age} Jahre alt!`;
}

// Testen
console.log(greeting);
console.log(add(5, 3));
console.log(greet({ name: "Max", age: 25 }));

Kompilieren und Ausführen

# TypeScript kompilieren
npx tsc

# Kompiliertes JavaScript ausführen
node dist/index.js

Du solltest sehen:

Hallo TypeScript!
8
Hallo Max, du bist 25 Jahre alt!

Watch Mode

Für die Entwicklung ist der Watch-Mode praktisch - TypeScript kompiliert automatisch bei Änderungen:

npx tsc --watch

Package.json Scripts

Füge nützliche Scripts zu deiner package.json hinzu:

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

Jetzt kannst du einfach npm run build oder npm run dev verwenden.

TypeScript mit ts-node

ts-node führt TypeScript direkt aus, ohne vorheriges Kompilieren:

# ts-node installieren
npm install --save-dev ts-node

# TypeScript direkt ausführen
npx ts-node src/index.ts

Das ist praktisch für die Entwicklung, aber für Produktion solltest du immer kompilieren.

VS Code Einrichtung

VS Code hat eingebaute TypeScript-Unterstützung. Für die beste Erfahrung:

Empfohlene Extensions

  1. Error Lens - Zeigt Fehler direkt im Code
  2. Pretty TypeScript Errors - Formatiert Fehlermeldungen

Nützliche Settings

Füge zu deinen VS Code Settings hinzu:

{
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.formatOnSave": true
}

Alternative: Online Playground

Für schnelle Tests ohne lokale Installation:

Projekt-Templates

Für spezifische Frameworks gibt es fertige Templates:

# React mit TypeScript
npx create-react-app my-app --template typescript

# Next.js mit TypeScript
npx create-next-app@latest --typescript

# Node.js mit TypeScript (express)
npx express-generator-typescript my-api

Zusammenfassung

Du hast gelernt:

  • TypeScript installieren - global oder als Projekt-Abhängigkeit
  • Projekt einrichten - mit tsconfig.json
  • Code kompilieren - mit tsc
  • Watch Mode nutzen - für automatisches Neukompilieren
  • ts-node verwenden - für schnelles Testen

Im nächsten Kapitel schauen wir uns den TypeScript Compiler genauer an und lernen die wichtigsten Konfigurationsoptionen!

Zurück zum TypeScript Kurs