TypeScript Grundlagen: Typsicheres JavaScript

TypeScript erweitert JavaScript um statische Typen. Fehler werden beim Kompilieren erkannt, nicht erst zur Laufzeit. Dieser Guide erklärt die Grundlagen.

Was ist TypeScript?

TypeScript ist eine von Microsoft entwickelte Programmiersprache, die auf JavaScript aufbaut. Jeder gültige JavaScript-Code ist auch gültiger TypeScript-Code.

Vorteile von TypeScript

• Frühe Fehlererkennung: Typfehler beim Kompilieren finden
• Bessere IDE-Unterstützung: Autocomplete, Refactoring
• Dokumentation: Typen dokumentieren die API
• Skalierbarkeit: Große Projekte leichter wartbar

Installation

# Global installieren
npm install -g typescript

# Version prüfen
tsc --version

# Projekt-lokal installieren
npm install --save-dev typescript

tsconfig.json erstellen

# Konfiguration generieren
tsc --init

Wichtige Einstellungen:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Grundlegende Typen

Primitive Typen

// String
let name: string = "Max";

// Number (Ganzzahl und Fließkomma)
let age: number = 30;
let price: number = 19.99;

// Boolean
let isActive: boolean = true;

// Null und Undefined
let nothing: null = null;
let notDefined: undefined = undefined;

Arrays

// Array von Strings
let fruits: string[] = ["Apfel", "Birne"];

// Alternative Schreibweise
let numbers: Array<number> = [1, 2, 3];

// Gemischte Arrays (Tuple)
let tuple: [string, number] = ["Max", 30];

Objekte

// Inline-Typ
let user: { name: string; age: number } = {
  name: "Max",
  age: 30
};

// Mit optionaler Eigenschaft
let product: { name: string; price?: number } = {
  name: "Laptop"
};

Interfaces

// Interface definieren
interface User {
  id: number;
  name: string;
  email: string;
  age?: number;           // Optional
  readonly createdAt: Date; // Nur lesen
}

// Verwenden
const user: User = {
  id: 1,
  name: "Max Mustermann",
  email: "max@example.com",
  createdAt: new Date()
};

// Interface erweitern
interface Admin extends User {
  permissions: string[];
}

Type Aliases

// Type Alias
type ID = string | number;

type Status = "pending" | "approved" | "rejected";

type Point = {
  x: number;
  y: number;
};

// Verwenden
let orderId: ID = "ABC-123";
let status: Status = "pending";

Union und Intersection Types

// Union: Einer von mehreren Typen
let value: string | number;
value = "Text";  // OK
value = 42;      // OK

// Intersection: Kombination von Typen
type Employee = {
  name: string;
  department: string;
};

type Manager = Employee & {
  team: string[];
};

Funktionen

// Parameter und Rückgabetyp
function add(a: number, b: number): number {
  return a + b;
}

// Arrow Function
const multiply = (a: number, b: number): number => a * b;

// Optionale Parameter
function greet(name: string, greeting?: string): string {
  return `${greeting || "Hallo"}, ${name}!`;
}

// Default Parameter
function createUser(name: string, role: string = "user"): User {
  // ...
}

// Void (kein Rückgabewert)
function log(message: string): void {
  console.log(message);
}

Generics

// Generische Funktion
function identity<T>(value: T): T {
  return value;
}

const num = identity<number>(42);
const str = identity<string>("Text");

// Generisches Interface
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

// Verwendung
const userResponse: ApiResponse<User> = {
  data: { id: 1, name: "Max", email: "max@test.de", createdAt: new Date() },
  status: 200,
  message: "OK"
};

Klassen

class Person {
  // Eigenschaften
  private id: number;
  public name: string;
  protected age: number;
  readonly createdAt: Date;

  // Konstruktor
  constructor(id: number, name: string, age: number) {
    this.id = id;
    this.name = name;
    this.age = age;
    this.createdAt = new Date();
  }

  // Methode
  public greet(): string {
    return `Hallo, ich bin ${this.name}`;
  }
}

// Vererbung
class Employee extends Person {
  constructor(
    id: number,
    name: string,
    age: number,
    public department: string
  ) {
    super(id, name, age);
  }
}

Kompilieren und Ausführen

# Einzelne Datei kompilieren
tsc app.ts

# Ganzes Projekt kompilieren
tsc

# Watch-Modus (automatisch bei Änderungen)
tsc --watch

# Mit ts-node direkt ausführen
npx ts-node app.ts

TypeScript mit Node.js

# Projekt initialisieren
npm init -y
npm install --save-dev typescript @types/node ts-node

# package.json Scripts
{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "dev": "ts-node src/index.ts"
  }
}

Weitere Informationen

• 📦 NPM Grundlagen
• 🔧 REST API erstellen
• 🐳 Docker für Anfänger