Frontend Academy · Lektion

Primitive Typen, Unions und Type Aliases

Annotieren Sie Variablen mit string, number, boolean und Array-Typen. Erstellen Sie mit | Union-Typen und geben Sie ihnen mit Type Aliases lesbare Namen.

Lektion 2 von 413 Schritte

Primitive Typen, Unions und Type Aliases ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Variablen annotieren

Fügen Sie Typannotationen mit einem Doppelpunkt hinter dem Variablennamen hinzu. TypeScript leitet Typen ab, wenn dies möglich ist – ergänzen Sie explizite Annotationen, wenn die Inferenz unklar ist oder zur Dokumentation.

let score: number = 0;
const greeting: string = 'Hello';
let active: boolean = true;
let data: null = null;
let placeholder: undefined;

// Inferred (no annotation needed):
const pi = 3.14;  // TypeScript knows this is number

Primitive Typen

Die primitiven Typen von TypeScript entsprechen den primitiven Typen von JavaScript: string, number (keine Unterscheidung zwischen Ganz- und Gleitkommazahlen), boolean, null, undefined, symbol, bigint.

function greet(name: string): string {
  return `Hello, ${name}`;
}

function double(n: number): number {
  return n * 2;
}

function toggle(active: boolean): boolean {
  return !active;
}

Arrays

Typisieren Sie ein Array mit Type[] oder dem generischen Typ Array<Type>. Beide Varianten sind gleichwertig.

const names: string[] = ['Alice', 'Bob'];
const scores: number[] = [98, 87, 72];
const flags: boolean[] = [true, false, true];

// Generic syntax:
const items: Array<string> = ['a', 'b'];

Union-Typen: |

Union-Typen ermöglichen es einer Variablen, einen von mehreren Typen zu enthalten. Verwenden Sie den Operator |. TypeScript schränkt den Typ innerhalb von Bedingungen ein.

function formatId(id: number | string): string {
  if (typeof id === 'number') {
    return `#${id.toString().padStart(6, '0')}`; // id is narrowed to number
  }
  return id.toUpperCase(); // id is narrowed to string
}

Literaltypen

Sie können literale String-, Zahlen- oder Boolean-Werte als Typen verwenden. In Kombination mit Unions erzeugen sie eine feste Menge zulässiger Werte – ähnlich wie ein Enum.

type Direction = 'north' | 'south' | 'east' | 'west';
type Status = 'pending' | 'active' | 'cancelled';
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function move(dir: Direction) { /* ... */ }
move('north'); // OK
move('up');    // Error: Argument not assignable

Typ-Aliase: type

Das Schlüsselwort type erstellt einen Typ-Alias – einen wiederverwendbaren Namen für einen beliebigen Typ. Aliase funktionieren für primitive Typen, Unions, Objekte, Tupel und komplexe zusammengesetzte Typen.

type UserId = string | number;
type RGB = [number, number, number]; // tuple
type Callback = (event: MouseEvent) => void;

const userId: UserId = 42;
const red: RGB = [255, 0, 0];
const handler: Callback = (e) => console.log(e.type);

Objekttypen mit type

Beschreiben Sie Objektstrukturen mit Typ-Aliasen. Kennzeichnen Sie Eigenschaften mit ? als optional und mit readonly als schreibgeschützt.

type User = {
  id: number;
  name: string;
  email: string;
  role?: 'admin' | 'user'; // optional
  readonly createdAt: Date; // can't reassign
};

const user: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  createdAt: new Date()
};

Intersection-Typen: &

Kombinieren Sie mehrere Typen mit dem Operator &. Der resultierende Typ enthält alle Eigenschaften beider Typen. Das ist nützlich, um Typen zu erweitern.

type Timestamped = {
  createdAt: Date;
  updatedAt: Date;
};
type UserWithTimestamp = User & Timestamped;
// Has all User properties AND createdAt/updatedAt

Der Typ any – Ausweichmöglichkeit

any nimmt einen Wert von der Typprüfung aus. Dieser Effekt ist ansteckend – aus any abgeleitete Werte sind ebenfalls any. Verwenden Sie den Typ während einer Migration nur als letzten Ausweg, niemals als langfristige Lösung.

let data: any = fetch('/api/data'); // no type checking
data.foo.bar.baz; // no error — and no protection

// Better: use 'unknown' and narrow it:
let raw: unknown = getExternalData();
if (typeof raw === 'string') {
  console.log(raw.toUpperCase()); // narrowed
}

Der Typ unknown – sichere Alternative zu any

unknown ist das typsichere Gegenstück zu any. Sie können einen Wert vom Typ unknown nicht verwenden, ohne seinen Typ zuvor einzugrenzen. Dadurch werden Sie gezwungen, externe Daten zu validieren.

Tupel – Arrays fester Länge

Ein Tupel ist ein Array fester Länge, bei dem jede Position einen bekannten Typ hat.

type Point = [number, number];
const origin: Point = [0, 0];
const p: Point = [3, 4];

// React useState returns a tuple:
const [count, setCount] = useState<number>(0);

Kurzüberprüfung

Mit welcher TypeScript-Funktion kann eine Funktion entweder einen String oder eine Zahl akzeptieren?

Beantworte es in der interaktiven Lektion

Zusammenfassung: Primitive Typen, Unions, Aliase

Primitive Typen: string, number, boolean, null, undefined. Arrays: Type[]. Union-Typen: A | B. Literaltypen für feste Wertemengen. Typ-Aliase mit type für wiederverwendbare Typnamen. Optionale Eigenschaften mit ?. readonly für unveränderliche Eigenschaften. Verwenden Sie für externe Daten bevorzugt unknown statt any.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Primitive Typen, Unions und Type Aliases“ kostenlos?

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

Was lerne ich in „Primitive Typen, Unions und Type Aliases“?

Annotieren Sie Variablen mit string, number, boolean und Array-Typen. Erstellen Sie mit | Union-Typen und geben Sie ihnen mit Type Aliases lesbare Namen. Du übst Frontend 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 Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend 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 2 von 4.

Wie lange dauert die Lektion „Primitive Typen, Unions und Type Aliases“?

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 Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend 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

Warum TypeScript: Typen erkennen Fehler zur Compile-Zeit
Primitive Typen, Unions und Type Aliases
Interfaces und Objekttypen
TS kompilieren und tsconfig.json

← Zurück zu Frontend Academy