TypeScript für Einsteiger: Warum Typen helfen

Wenn du eine Weile mit JavaScript gearbeitet hast, kennst du sicher das Gefühl: Der Code läuft, aber an irgendeiner Stelle bekommt eine Funktion plötzlich eine Zeichenkette statt einer Zahl und alles bricht zusammen. Genau hier setzt TypeScript an. Es ist eine Erweiterung von JavaScript, die ein Typsystem hinzufügt und dir hilft, solche Fehler schon beim Schreiben zu finden. In diesem Beitrag schauen wir uns an, warum Typen so wertvoll sind und wie du die ersten Schritte machst.

Was ist TypeScript überhaupt?

TypeScript ist eine von Microsoft entwickelte Programmiersprache, die auf JavaScript aufbaut. Jeder gültige JavaScript-Code ist auch gültiger TypeScript-Code. Der entscheidende Unterschied: Du kannst Variablen, Funktionsparametern und Rückgabewerten Typen zuweisen. Vor der Ausführung wird der Code in normales JavaScript übersetzt, das jeder Browser und Node.js versteht.

Den TypeScript-Compiler installierst du schnell über npm:

// Installation per Terminal
// npm install -g typescript

// Eine Datei kompilieren
// tsc meinDatei.ts

// Das Ergebnis ist eine .js-Datei
let begruessung: string = "Hallo Welt";
console.log(begruessung);

Der Unterschied zu reinem JavaScript

In JavaScript darfst du einer Variable jeden beliebigen Wert zuweisen. Das ist flexibel, aber auch riskant. Schau dir dieses Beispiel an, das in JavaScript ohne Warnung durchläuft:

let alter = 25;
alter = "fünfundzwanzig"; // In JS erlaubt, aber meist ein Fehler

// In TypeScript:
let typAlter: number = 25;
// typAlter = "fünfundzwanzig"; // Fehler: Typ 'string' kann nicht zu 'number' zugewiesen werden

TypeScript meckert, bevor der Code überhaupt läuft. Du siehst den Fehler direkt im Editor, oft rot unterstrichen. Das spart dir lange Fehlersuchen zur Laufzeit.

Die wichtigsten Basistypen

TypeScript bringt eine Reihe grundlegender Typen mit, die du täglich verwenden wirst. Die wichtigsten sind string, number, boolean und array:

let name: string = "Anna";
let punkte: number = 42;
let istAktiv: boolean = true;

// Arrays auf zwei Arten:
let zahlen: number[] = [1, 2, 3];
let woerter: Array<string> = ["a", "b", "c"];

// Ein Tupel mit fester Struktur:
let koordinate: [number, number] = [52, 13];

Beachte beim Array-Beispiel: Mit Array<string> nutzt du bereits eine sogenannte Generic-Schreibweise. Die spitzen Klammern geben an, welcher Typ in der Liste steckt.

Typen in Funktionen

Funktionen profitieren besonders stark von Typen. Du legst fest, welche Parameter erlaubt sind und was zurückkommt. Damit dokumentiert sich dein Code fast von selbst:

function addiere(a: number, b: number): number {
  return a + b;
}

console.log(addiere(3, 4)); // 7
// console.log(addiere(3, "4")); // Fehler vom Compiler

// Optionale Parameter mit Fragezeichen:
function begruesse(name: string, titel?: string): string {
  if (titel) {
    return `Hallo ${titel} ${name}`;
  }
  return `Hallo ${name}`;
}

console.log(begruesse("Schmidt", "Frau")); // Hallo Frau Schmidt
console.log(begruesse("Anna"));            // Hallo Anna

Typinferenz: TypeScript denkt mit

Du musst nicht jeden Typ selbst angeben. TypeScript erkennt in vielen Fällen automatisch, um welchen Typ es sich handelt. Das nennt man Typinferenz:

// Kein expliziter Typ nötig:
let stadt = "Berlin"; // TypeScript erkennt: string
let einwohner = 3700000; // TypeScript erkennt: number

// stadt = 5; // Fehler, weil stadt bereits als string erkannt wurde

// Auch bei Rückgabewerten:
function quadrat(x: number) {
  return x * x; // Rückgabetyp wird als number erkannt
}

Die Empfehlung lautet: Lass TypeScript inferieren, wo es eindeutig ist, und gib Typen explizit an, wo es die Lesbarkeit verbessert oder wo der Compiler sonst zu großzügig wäre.

Fazit

TypeScript nimmt dir einen großen Teil der lästigen Laufzeitfehler ab, indem es Typen schon beim Schreiben prüft. Du startest klein mit Basistypen wie string und number, typisierst deine Funktionen und lässt dir den Rest von der Typinferenz abnehmen. Der Aufwand ist gering, der Gewinn an Sicherheit und Lesbarkeit aber enorm. Wenn du ein neues Projekt beginnst, probiere TypeScript aus. Du wirst schnell merken, wie viel ruhiger sich das Programmieren anfühlt, wenn der Editor dich auf Fehler hinweist, bevor sie dich ärgern.