TypeScript Typen Grundlagen

Typen sind das Herzstück von TypeScript. Sie beschreiben, welche Art von Werten eine Variable, ein Parameter oder eine Funktion annehmen kann. Wer die grundlegenden Typen versteht, hat das wichtigste Werkzeug in der Hand, um typsicheren Code zu schreiben.

Primitive Typen

TypeScript kennt drei primitive Typen, die direkt den JavaScript-Grundtypen entsprechen: string, number und boolean.

string

Der Typ string repräsentiert Zeichenketten. TypeScript akzeptiert einfache Anführungszeichen, doppelte Anführungszeichen und Template-Literale gleichermaßen:

const vorname: string = "Anna";
const nachname: string = 'Müller';
const begrüßung: string = `Hallo, ${vorname} ${nachname}!`;

// Template-Literale funktionieren wie gewohnt
const meldung: string = `Es sind ${begrüßung.length} Zeichen`;

number

TypeScript unterscheidet nicht zwischen ganzen Zahlen und Gleitkommazahlen. Es gibt nur den Typ number, der alle numerischen Werte umfasst:

const ganzeZahl: number = 42;
const dezimalzahl: number = 3.14;
const negativeZahl: number = -7;
const hexadezimal: number = 0xFF;
const binaer: number = 0b1010;

// Arithmetik funktioniert wie erwartet
const summe: number = ganzeZahl + dezimalzahl; // 45.14

boolean

Wahrheitswerte sind einfach: true oder false.

const aktiv: boolean = true;
const gelöscht: boolean = false;

const istGültig: boolean = ganzeZahl > 0; // true
const istLeer: boolean = vorname.length === 0; // false

Type Inference

TypeScript muss Typen nicht immer explizit angegeben werden. Der Compiler erkennt sie oft automatisch aus dem zugewiesenen Wert:

const name = "Bernd";       // Typ wird als string erkannt
const alter = 35;           // Typ wird als number erkannt
const registriert = true;   // Typ wird als boolean erkannt

// Fehler wird trotzdem erkannt:
// alter = "dreißig"; // Compilerfehler, obwohl kein Typ deklariert wurde

Diese Funktion heißt Type Inference und macht TypeScript-Code schlanker, ohne auf Typsicherheit zu verzichten.

Arrays

Arrays werden entweder mit eckigen Klammern oder mit der generischen Array-Syntax deklariert:

const zahlen: number[] = [1, 2, 3, 4, 5];
const namen: string[] = ["Anna", "Bernd", "Carla"];
const flags: boolean[] = [true, false, true];

// Alternative Schreibweise mit Array-Generic
const preise: Array<number> = [9.99, 14.99, 4.99];

// Methoden behalten ihren Typ
const ersteZahl: number = zahlen[0];
const anzahl: number = zahlen.length;

Tupel

Tupel sind Arrays mit fester Länge und festgelegten Typen an jeder Position:

const koordinate: [number, number] = [48.1374, 11.5755];
const eintrag: [string, number] = ["München", 1.47e6];

const breitengrad: number = koordinate[0];
const stadtname: string = eintrag[0];

Besondere Typen

any

Der Typ any deaktiviert alle Typprüfungen. Er sollte sparsam eingesetzt werden:

let beliebig: any = 42;
beliebig = "jetzt ein Text";
beliebig = true;
// Keine Fehler, aber auch kein Schutz durch den Compiler

unknown

unknown ist die sichere Alternative zu any. Werte vom Typ unknown müssen erst geprüft werden, bevor man sie verwenden kann:

function verarbeite(eingabe: unknown): string {
  if (typeof eingabe === "string") {
    return eingabe.toUpperCase(); // Hier ist TypeScript sicher: eingabe ist string
  }
  if (typeof eingabe === "number") {
    return eingabe.toFixed(2); // Hier ist eingabe sicher eine number
  }
  return String(eingabe);
}

null und undefined

Standardmäßig können alle Typen null oder undefined sein. Mit der Einstellung strictNullChecks in der tsconfig werden diese Werte explizit:

// Mit strictNullChecks:
let name: string = "Anna";
name = null; // Compilerfehler

let optionalerName: string | null = "Bernd";
optionalerName = null; // Erlaubt, weil null im Typ angegeben ist

void und never

void kennzeichnet Funktionen, die keinen Wert zurückgeben. never beschreibt Werte, die nie eintreten können, zum Beispiel Funktionen, die immer eine Ausnahme werfen:

function logge(meldung: string): void {
  console.log(meldung);
  // Kein return-Statement nötig
}

function fehlerWerfen(nachricht: string): never {
  throw new Error(nachricht);
  // Diese Zeile wird nie erreicht
}

Union Types

Ein Union Type erlaubt es, mehrere Typen zu kombinieren. Das Pipe-Symbol trennt die Alternativen:

let id: string | number;
id = "abc-123"; // Erlaubt
id = 42;        // Auch erlaubt

function formatiere(wert: string | number): string {
  if (typeof wert === "number") {
    return wert.toFixed(2);
  }
  return wert.trim();
}

Literal Types

Literal Types beschränken einen Wert auf genau einen bestimmten Wert oder eine Menge von Werten:

type Richtung = "nord" | "süd" | "ost" | "west";

function bewege(richtung: Richtung): void {
  console.log(`Bewege nach ${richtung}`);
}

bewege("nord");   // Erlaubt
bewege("hoch");   // Compilerfehler: "hoch" ist nicht in Richtung

Ausprobieren im Playground

Alle genannten Typen lassen sich direkt im Playground auf typescript-playground.de testen. Der interaktive Editor zeigt Compilerfehler in Echtzeit an und eignet sich besonders gut dafür, das Verhalten von Type Inference und Narrowing zu erkunden.

Fazit

Die primitiven Typen string, number und boolean bilden das Fundament jedes TypeScript-Projekts. Ergänzt durch Union Types, Literal Types und spezielle Typen wie unknown entsteht ein mächtiges System zur Fehlervermeidung. Der nächste Schritt ist das Verstehen von Interfaces und Type Aliases, die komplexe Objekte beschreiben.