TypeScript Academy · Lektion

String-Unions und Autovervollständigung

Erhalten Sie im Editor eine Autovervollständigung für bekannte Stringwerte.

String-Unions und Autovervollständigung ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Unions ermöglichen Autovervollständigung

Eine Union aus String-Literalen erfüllt zwei Aufgaben: Sie schränkt zulässige Werte ein und versorgt die Autovervollständigung Ihres Editors mit Vorschlägen. Manchmal möchten Sie jedoch Vorschläge und zugleich die Freiheit, jede Zeichenkette zu übergeben — ein cleverer Trick macht beides möglich.

Eine einfache String-Literal-Union

Definieren Sie eine Union zulässiger Zeichenketten. Der Editor bietet genau diese Optionen an, und ungültige Werte führen zu Compile-Fehlern.

type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // Error

Autovervollständigung im Editor

Wenn ein Parameter eine String-Literal-Union besitzt, werden beim Eingeben innerhalb des Aufrufs genau ihre Elemente vorgeschlagen. Das ist eine der beliebtesten Komfortfunktionen von TypeScript.

type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blue

Die Einschränkung

Eine strikte Union verbietet jeden Wert außerhalb der Liste. Manchmal möchten Sie häufige Werte vorschlagen und gleichzeitig beliebige benutzerdefinierte Zeichenketten erlauben — eine einfache Union kann nicht beides leisten.

type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))

Durch Erweiterung gehen Vorschläge verloren

Wenn Sie einfach string verwenden, ist jeder Wert zulässig, aber die Autovervollständigung verschwindet vollständig. Sie tauschen damit alle Hinweise gegen vollständige Flexibilität ein — nicht ideal.

function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestions

Der string-und-Literal-Union-Trick

Der Trick besteht darin, Ihre Literale mit string & {} zu einer Union zu verbinden. Die Literale erscheinen weiterhin in der Autovervollständigung, während string & {} jede andere Zeichenkette zulässt, ohne die Union zu vereinfachen.

type Color = "red" | "green" | (string & {})
const a: Color = "red"        // suggested
const b: Color = "#ff8800"    // also allowed
console.log(a, b)

Warum string und ein leeres Objekt funktionieren

Normalerweise wird 'red' | string zu string vereinfacht, wodurch die Literale verschwinden. Die Verknüpfung mit {} erzeugt einen leicht anderen Typ, den TypeScript getrennt beibehält. So bleiben die Literale für die Vervollständigung erhalten, während weiterhin jede Zeichenkette zulässig ist.

type A = "red" | string          // collapses to string — no hints
type B = "red" | (string & {})   // keeps "red" as a suggestion
const x: B = "red"
console.log(x)

Eine wiederverwendbare Hilfsdefinition

Kapseln Sie den Trick in einem generischen Alias, damit seine Absicht klar und in Ihrer Codebasis wiederverwendbar ist.

type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)

Auf eine Funktion anwenden

Verwenden Sie die Hilfsdefinition in einer API, um Aufrufern Vorschläge für häufige Eingaben zu bieten und zugleich benutzerdefinierte Werte zu akzeptieren.

type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home"))     // suggested
console.log(setIcon("my-icon")) // allowed

Wann Sie den Trick verwenden sollten

Greifen Sie darauf zurück, wenn eine API bekannte Werte besitzt, aber offen bleiben muss: bei Icon-Namen, CSS-Einheiten, Theme-Tokens oder Framework-Voreinstellungen. Für geschlossene Wertemengen sollten Sie wegen der vollständigen Sicherheit eine strikte Union bevorzugen.

type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)

Abwägungen

Der Trick erhält die Vorschläge, verringert aber die Sicherheit — Tippfehler in benutzerdefinierten Zeichenketten werden nicht mehr erkannt. Verwenden Sie ihn gezielt dort, wo Offenheit ein Merkmal ist, nicht standardmäßig.

type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)

Kurzer Check

Testen Sie Ihr Verständnis des Tricks für die Autovervollständigung.

Zusammenfassung

String-Literal-Unions ermöglichen die Autovervollständigung im Editor und schränken Werte ein. Eine strikte Union verbietet jedoch benutzerdefinierte Zeichenketten, während einfaches string alle Hinweise entfernt. Der Trick T | (string & {}) behält die Literale als Vorschläge bei und akzeptiert zugleich jede Zeichenkette. Kapseln Sie ihn als Hilfsdefinition LiteralUnion<T> und verwenden Sie ihn nur dort, wo Offenheit beabsichtigt ist — denn dabei geht der Schutz vor Tippfehlern verloren.

Häufig gestellte Fragen

Ist die Lektion „String-Unions und Autovervollständigung“ kostenlos?

Ja — der vollständige Text von „String-Unions und Autovervollständigung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „String-Unions und Autovervollständigung“?

Erhalten Sie im Editor eine Autovervollständigung für bekannte Stringwerte. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „String-Unions und Autovervollständigung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu TypeScript Academy