string

string als Primitive

In TypeScript ist string (klein geschrieben) der primitive Typ für alle Textwerte. Er entspricht direkt dem JavaScript-Primitive und wird in der Praxis fast immer durch Typinferenz vom Compiler automatisch erkannt.

let firstName: string = "Anna";
let city = "Berlin"; // Typ wird als string inferiert
const greeting: string = `Hallo, ${firstName}`;

Wichtig ist die strikte Unterscheidung zwischen string (Kleinschreibung, Primitive) und String (Großschreibung, Wrapper-Klasse mit Konstruktor-Funktion). Beide sind nicht zuweisungskompatibel und verhalten sich auch zur Laufzeit unterschiedlich.

const primitive: string = "Hallo";       // Primitive
const wrapper: String = new String("Hallo"); // Objekt-Wrapper

// Folgende Zuweisung schlägt fehl
const x: string = wrapper;
// Type 'String' is not assignable to type 'string'.
// 'string' is a primitive, but 'String' is a wrapper object.

console.log(typeof primitive); // "string"
console.log(typeof wrapper);   // "object"

Die Faustregel lautet: Immer den primitiven Typ string verwenden. Der Wrapper String taucht in der täglichen Arbeit nur als Konstruktor-Funktion zur Konvertierung auf (siehe Abschnitt 07), nicht als Typannotation.

String-Literale und Template Strings

TypeScript unterstützt – wie JavaScript – drei Notationsformen für String-Literale: Einfache Anführungszeichen, doppelte Anführungszeichen und Backticks (Template Literals). Funktional sind die ersten beiden identisch, Backticks bieten zusätzlich Interpolation und mehrzeilige Strings.

const single: string = 'Hallo Welt';
const double: string = "Hallo Welt";
const template: string = `Hallo Welt`;

Echte Vorteile bringen Template Strings (Backticks) durch ihre Interpolation und mehrzeilige Schreibweise.

const user = "Anna";
const age = 32;

const summary = `Benutzer: ${user}
Alter: ${age}
Status: ${age >= 18 ? "Erwachsen" : "Minderjährig"}`;

console.log(summary);

Benutzer: Anna
Alter: 32
Status: Erwachsen

Innerhalb von ${ ... } darf ein beliebiger TypeScript-Ausdruck stehen – auch Funktionsaufrufe, Ternaries oder Property-Zugriffe. Der Compiler prüft jeden Ausdruck statisch.

String Literal Types

Ein String Literal Type beschränkt den Typ auf einen einzelnen konkreten String-Wert. Kombiniert mit Union-Typen entsteht daraus ein extrem präzises Werkzeug zur Modellierung endlicher Werte-Mengen.

type Direction = "north" | "south" | "east" | "west";

function move(direction: Direction): void {
    console.log(`Bewegung nach ${direction}`);
}

move("north"); // OK
move("up");    // Fehler: Argument of type '"up"' is not assignable
               // to parameter of type 'Direction'.

Im Vergleich zu einem reinen string-Parameter hat das mehrere Vorteile:

• Compile-Zeit-Sicherheit: Typos werden vor dem Build erkannt
• Autovervollständigung: Editoren wie VS Code zeigen alle gültigen Werte
• Selbstdokumentierender Code: Der Typ ersetzt eine Kommentar-Auflistung
• Refactoring-Sicherheit: Beim Umbenennen eines Wertes weist der Compiler auf alle Verwendungsstellen hin

Häufig kombiniert man Literal Types mit as const, um aus einem Array oder Objekt automatisch eine Union abzuleiten.

const ROLES = ["admin", "editor", "viewer"] as const;
type Role = typeof ROLES[number];
// Role = "admin" | "editor" | "viewer"

function checkRole(role: Role): boolean {
    return ROLES.includes(role);
}

Template Literal Types

Seit TypeScript 4.1 gibt es Template Literal Types: Dieselbe Backtick-Syntax wie auf Wert-Ebene, aber auf Typ-Ebene. Damit lassen sich Typen kompositorisch aus anderen Typen aufbauen.

type Greeting = "hello" | "hi";
type Name = "Anna" | "Ben";

type FullGreeting = `${Greeting}, ${Name}!`;
// "hello, Anna!" | "hello, Ben!" | "hi, Anna!" | "hi, Ben!"

Bei mehreren Unions im Template entsteht das kartesische Produkt aller Kombinationen – elegant, aber bei vielen Faktoren schnell explosiv (siehe Insights-Sektion zur Compiler-Performance).

Intrinsische String-Manipulation

TypeScript bietet vier eingebaute Utility-Types, die ausschließlich auf Typ-Ebene arbeiten – ohne jegliche Laufzeit-Logik:

type Property = "name" | "age" | "email";
type Getter = `get${Capitalize<Property>}`;
// "getName" | "getAge" | "getEmail"

Praxisbeispiel: Typsichere Routen

Template Literal Types eignen sich hervorragend für Routen-Typing in einem Router oder API-Client.

type Resource = "users" | "posts" | "comments";
type Action = "list" | "detail" | "create";

type ApiRoute =
    | `/api/${Resource}`
    | `/api/${Resource}/${number}`
    | `/api/${Resource}/${number}/edit`;

function call(route: ApiRoute): Promise<unknown> {
    return fetch(route).then(r => r.json());
}

call("/api/users");          // OK
call("/api/users/42");       // OK
call("/api/users/42/edit");  // OK
call("/api/foo");            // Fehler – "foo" kein gültiges Resource

String-Methoden und Type Safety

Alle Standard-Methoden des JavaScript-String-Prototyps sind in TypeScript voll typisiert. Der Compiler kennt Signaturen, Rückgabetypen und unterscheidet zwischen Methoden, die einen neuen String erzeugen, und solchen, die andere Strukturen wie Arrays oder Booleans liefern.

const text: string = "  Hallo Welt  ";

const length: number = text.length;
const trimmed: string = text.trim();
const upper: string = trimmed.toUpperCase();
const parts: string[] = trimmed.split(" ");
const replaced: string = trimmed.replace("Welt", "TypeScript");
const slice: string = trimmed.slice(0, 5);
const includes: boolean = trimmed.includes("Hallo");

Da Strings in JavaScript immutable sind, geben fast alle Methoden einen neuen String zurück – das Original bleibt unverändert. Diese Eigenschaft ist nicht typsystemisch erzwungen, sondern Teil der Sprachsemantik. TypeScript hilft Dir dennoch beim Verketten von Operationen mit korrekten Zwischen-Typen.

function slugify(input: string): string {
    return input
        .trim()
        .toLowerCase()
        .replace(/\s+/g, "-")
        .replace(/[^a-z0-9-]/g, "");
}

string als Index Signature

In JavaScript sind Objekt-Schlüssel intern immer Strings (oder Symbols). TypeScript bildet das im Typsystem über Index Signatures ab.

interface Translations {
    [key: string]: string;
}

const labels: Translations = {
    save: "Speichern",
    cancel: "Abbrechen",
    delete: "Löschen"
};

const value: string = labels["save"];

Auch der keyof-Operator liefert bei String-Properties eine String-Literal-Union zurück. Das macht ihn zu einem natürlichen Partner für string-basierte Typen.

interface User {
    id: string;
    name: string;
    email: string;
}

type UserKey = keyof User;
// "id" | "name" | "email"

function getField<K extends UserKey>(user: User, key: K): User[K] {
    return user[key];
}

Häufige Konvertierungen

In der Praxis musst Du regelmäßig Werte anderer Typen in Strings umwandeln. TypeScript bietet dafür mehrere Wege mit unterschiedlichem Verhalten und unterschiedlicher Typsicherheit.

const num = 42;
const flag = true;
const obj = { id: 1, name: "Anna" };

// 1) String()-Funktion (sicher für null/undefined)
const a: string = String(num);    // "42"
const b: string = String(null);   // "null"

// 2) toString()-Methode (wirft bei null/undefined)
const c: string = num.toString(); // "42"

// 3) Template Literal als Schnell-Cast
const d: string = `${num}`;       // "42"

// 4) JSON.stringify – für strukturierte Daten
const e: string = JSON.stringify(obj); // '{"id":1,"name":"Anna"}'

String(x) und Template Literals sind die robustesten Varianten, weil sie auch mit null und undefined umgehen können. toString() wirft hingegen eine TypeError-Ausnahme, sobald der Wert null oder undefined ist. JSON.stringify ist die einzige der vier Optionen, die strukturierte Objekte sauber serialisiert – aber Achtung bei zyklischen Referenzen oder BigInt-Werten.

Type Guard für Strings

Der einfachste und gebräuchlichste Type Guard in TypeScript ist typeof value === "string". Der Compiler erkennt das Muster und verengt den Typ innerhalb des Blocks automatisch auf string.

function describe(value: string | number | boolean): string {
    if (typeof value === "string") {
        // Hier ist value vom Typ string – .toUpperCase() verfügbar
        return `Text: ${value.toUpperCase()}`;
    }

    if (typeof value === "number") {
        return `Zahl: ${value.toFixed(2)}`;
    }

    return `Bool: ${value}`;
}

Für komplexere Fälle lässt sich ein benutzerdefinierter Type Guard schreiben, der ein Type Predicate zurückgibt.

function isNonEmptyString(value: unknown): value is string {
    return typeof value === "string" && value.length > 0;
}

function processInput(input: unknown): void {
    if (isNonEmptyString(input)) {
        console.log(input.toUpperCase());
    } else {
        console.log("Kein gültiger Text");
    }
}

Weiterführende Ressourcen

Externe Quellen

• Everyday Types – TypeScript Handbook
• Template Literal Types – TypeScript Handbook
• Utility Types – TypeScript Handbook

Verwandte Artikel

• Primitive Typen – Übersicht
• number
• Union & Intersection – Übersicht
• Type System – Übersicht
• Utility Types – Übersicht