Was ist TypeScript? Grundlagen und Umstieg von JavaScript

Wenn du dich fragst, was TypeScript ist, lautet die kurze Antwort: Es ist eine von Microsoft entwickelte Open-Source-Sprache, die ein statisches Typsystem auf JavaScript aufsetzt. Jeder gültige JavaScript-Code, den du schreibst, ist auch gültiges TypeScript; durch das Hinzufügen von Typen fängst du Fehler in deinem Editor ab, noch bevor der Code läuft. In diesem Leitfaden lernst du die Grundlagen des Typsystems, den Einsatz von interface und wie du TypeScript schrittweise in ein bestehendes Projekt einführst.

Was TypeScript ist und warum es existiert

JavaScript ist dynamisch typisiert: Eine Variable kann in einem Moment Text und im nächsten eine Zahl sein. In kleinen Skripten ist diese Flexibilität bequem, doch wenn ein Projekt wächst, knallen Fehler wie „undefined is not a function" zur Laufzeit, direkt vor dem Nutzer. TypeScript fängt diese Fehler stattdessen zur Kompilierzeit ab.

TypeScript selbst läuft nicht im Browser. Der tsc (TypeScript Compiler) transpiliert deinen Code zu reinem JavaScript, und die Typen werden aus dieser Ausgabe entfernt. Typen gehören vollständig zur Entwicklungsphase; in der Produktion verursachen sie keinerlei Overhead.

function begruessen(name: string): string {
  return `Hallo, ${name}`;
}

begruessen("Aslain"); // OK
begruessen(42);        // Fehler: Typ 'number' ist 'string' nicht zuweisbar

Die Basistypen

Die primitiven Typen, die du am häufigsten nutzt, sind dieselben wie in JavaScript: string, number, boolean. Dazu kommen Arrays, null, undefined und der spezielle Typ any.

let titel: string = "Blog";
let lesezeit: number = 5;
let veroeffentlicht: boolean = true;
let tags: string[] = ["web", "typescript"];

// Tupel: feste Länge und Reihenfolge
let koordinate: [number, number] = [41.0, 28.9];

Ein wichtiger Punkt: Meistens musst du den Typ nicht von Hand schreiben. TypeScript betreibt Typinferenz. Wenn du let lesezeit = 5 schreibst, weiß der Compiler bereits, dass es eine number ist. Reserviere explizite Annotationen vor allem für Funktionsparameter und Rückgabewerte.

Vermeide den Typ any so weit wie möglich; er bedeutet „Typprüfung ausschalten" und wirft alles weg, was TypeScript dir bietet. Wenn du den Typ wirklich nicht kennst, nutze den sichereren Typ unknown: Er zwingt dich zu einer Prüfung, bevor du den Wert verwendest.

Objekte mit interface und type formen

In echten Anwendungen beschreibst du vor allem die Form von Objekten. Dafür gibt es zwei Werkzeuge: interface und type. Definieren wir einen Benutzer:

interface Benutzer {
  id: number;
  name: string;
  email: string;
  rolle?: "admin" | "mitglied"; // ? = optionales Feld
}

const u: Benutzer = {
  id: 1,
  name: "Aslain",
  email: "hello@aslain.dev",
};

Hier ist das Feld rolle? optional, und "admin" | "mitglied" ist ein Union-Typ, der besagt, dass der Wert nur eine dieser beiden Zeichenketten sein kann. Schreibst du eine andere Zeichenkette, warnt der Compiler.

interface und type sind in den meisten Fällen austauschbar. Eine praktische Faustregel: Bevorzuge interface für Objektformen und type für Unions und Aliase. Ein Vorteil von interface ist, dass es per Vererbung erweitert werden kann:

interface Autor extends Benutzer {
  beitragsAnzahl: number;
}

Funktionen und Generics

Die Parameter und den Rückgabewert einer Funktion zu annotieren, lässt den Code sich selbst dokumentieren. Willst du dieselbe Logik über verschiedene Typen hinweg wiederverwenden, kommen Generics ins Spiel:

function erstesElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const zahl = erstesElement([1, 2, 3]);    // Typ: number
const text = erstesElement(["a", "b"]);   // Typ: string

Hier ist T ein Platzhalter. Mit welchem Array-Typ du die Funktion auch aufrufst, der Rückgabetyp passt sich an. Generics sind die Grundlage von Strukturen wie Array und Promise<T> und verbinden Typsicherheit mit Flexibilität.

TypeScript schrittweise in ein bestehendes Projekt einführen

Die größte Stärke von TypeScript ist, dass du ein bestehendes JavaScript-Projekt nicht auf einen Schlag umstellen musst. Die Migration lässt sich Schritt für Schritt durchführen:

• 1. Installieren und konfigurieren. Führe npm install --save-dev typescript aus, dann npx tsc --init, um eine tsconfig.json zu erstellen.
• 2. Locker starten. Beginne mit "strict": false und "allowJs": true, damit TypeScript neben deinen bestehenden .js-Dateien läuft.
• 3. Datei für Datei umstellen. Benenne eine Datei in .ts um, behebe ihre Typfehler und gehe dann zur nächsten über.
• 4. Verschärfen. Sobald sich das Projekt stabilisiert, wechsle zu "strict": true; das aktiviert alle strengen Prüfungen, einschließlich strictNullChecks, das die meisten Fehler abfängt.

Ein solider Ausgangspunkt für tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

Für Drittanbieter-Bibliotheken liefern @types/...-Pakete meist die Typdefinitionen (zum Beispiel npm i -D @types/node). Viele moderne Bibliotheken bringen ihre Typdefinitionen direkt im Paket mit, sodass du nichts Zusätzliches installieren musst.

Häufige Fragen

Muss ich JavaScript können, bevor ich TypeScript lerne?

Ja. TypeScript ist eine Schicht obendrauf, keine eigene Sprache. Wenn du mit JavaScript-Grundlagen wie Funktionen, Scope, async/await und Objekten vertraut bist, sitzt die Typschicht sehr schnell. Ohne eine solide JavaScript-Basis sind die Typfehler schwer zu deuten.

Macht TypeScript mein Projekt langsamer?

Zur Laufzeit nicht; die Typen werden beim Kompilieren entfernt und der Produktionscode ist reines JavaScript. Der einzige Mehraufwand ist der Build-Schritt, der mit modernen Werkzeugen Sekunden dauert und im Gegenzug eine große Zahl an Fehlern verhindert.

Ist die Verwendung von any verboten?

Nicht verboten, aber es sollte ein letztes Mittel sein. Es ist nützlich, um einen Typ vorübergehend zu umgehen, doch dauerhafter Einsatz von any schaltet die Typprüfung aus. Kennst du den Typ nicht, bevorzuge sicherere Alternativen wie unknown oder Record<string, T> für flexible Objekte.

Willst du auf eine typsichere Basis umsteigen? Um dein bestehendes JavaScript-Projekt zu TypeScript zu migrieren oder eine typsichere Anwendung von Grund auf zu bauen, nimm Kontakt auf, und wir legen gemeinsam ein solides Fundament.