iToverDose/Software· 12 JUNI 2026 · 00:03

TypeScript-Typen verstehen: So nutzen Sie die volle Kraft der Typsicherheit

TypeScript-Typen definieren Datenstrukturen präzise und verhindern Runtime-Fehler durch statische Analyse. Erfahren Sie, wie primitive Typen, Objekte und spezielle Typen in der Praxis funktionieren und typische Fallstricke vermieden werden.

DEV Community2 min0 Kommentare

TypeScript hat die Art und Weise, wie Entwickler mit JavaScript arbeiten, revolutioniert – vor allem durch die Einführung eines robusten Typsystems. Typen definieren die Kontraktstruktur von Daten und ermöglichen es dem Compiler, potenzielle Fehler bereits während der Entwicklung zu erkennen. Während JavaScript dynamisch typisiert ist und Variablen jederzeit ihren Datentyp wechseln können, setzt TypeScript klare Regeln. Diese Regeln werden in Echtzeit überprüft, bevor der Code überhaupt ausgeführt wird. Das reduziert nicht nur lästige Bugs in der Produktion, sondern verbessert auch die Codequalität und Wartbarkeit nachhaltig.

Grundlegende Typkategorien in TypeScript

Die Welt der TypeScript-Typen lässt sich grob in drei Hauptkategorien unterteilen: primitive Typen, Objekt-Typen und spezielle Typen. Jede Kategorie erfüllt spezifische Zwecke und bietet unterschiedliche Möglichkeiten zur Datenmodellierung.

Primitive Typen: Die Basisbausteine

Primitive Typen bilden die Grundlage für alle anderen Typdefinitionen. Sie umfassen grundlegende Datentypen, die direkt vom JavaScript-Runtime-System unterstützt werden.

#### Boolean: Wahr oder falsch – eindeutig und verlässlich

Der boolean-Typ repräsentiert genau zwei Zustände: true und false. TypeScript unterscheidet dabei strikt zwischen dem primitiven Typ und dem Wrapper-Objekt Boolean. Während das Wrapper-Objekt immer als truthy (wahrheitsähnlich) behandelt wird – selbst bei new Boolean(false) – arbeitet TypeScript ausschließlich mit dem primitiven Typ.

// Explizite Typdeklaration vs. Typinferenz
let isActive: boolean = true;
let isDisabled = false; // Typ wird automatisch als boolean inferiert

// Literale Typen für präzise Kontrollen
const enabled: true = true;  // Typ: true (nicht boolean)
const disabled: false = false; // Typ: false (nicht boolean)

// Type narrowing in bedingten Anweisungen
function toggleStatus(value: boolean): boolean {
  return !value;
}

Wichtig: Verwenden Sie niemals das Boolean-Wrapper-Objekt, da es zu unerwartetem Verhalten in Bedingungen führt. TypeScript warnt Sie vor solchen Fällen, wenn strictNullChecks aktiviert ist.

#### Number: Flexibilität für jede numerische Notation

In TypeScript gibt es einen einzigen numerischen Typ: number. Er deckt alle gängigen Zahlendarstellungen ab – von ganzen Zahlen über Floating-Point-Zahlen bis hin zu hexadezimalen, oktalen und binären Notationen. Für besonders große ganze Zahlen steht zusätzlich der separate Typ bigint zur Verfügung.

// Verschiedene Zahlendarstellungen
let integer = 42;
let floatingPoint = 3.14159;
let hexadecimal = 0xFF;
let octal = 0o52;
let binary = 0b101010;

// Lesbarkeitsverbesserung durch Unterstrich-Notation
let readable = 1_000_000;

// Spezialwerte
let notANumber: number = NaN;
let infinity: number = Infinity;

// BigInt für extrem große ganze Zahlen
const hugeNumber: bigint = 9007199254740993n;

Beachten Sie: bigint und number sind inkompatibel. Versuche, sie zu kombinieren, führen zu TypeScript-Fehlern. Für Datenbank-IDs oder ähnliche Anwendungsfälle sollten Sie bigint oder string verwenden, da number nicht alle ganzen Zahlen sicher darstellen kann.

#### String: Mehr als nur Text

Strings in TypeScript sind unveränderlich und entsprechen dem JavaScript-Verhalten. Neben klassischen Zeichenketten unterstützt TypeScript auch Template-Literal-Typen, die eine statische String-Manipulation auf Typebene ermöglichen.

// Unterschiedliche String-Syntaxeformen
let doubleQuotes: string = "Doppelte Anführungszeichen";
let singleQuotes: string = 'Einfache Anführungszeichen';
let templateLiteral: string = `Variableninterpolation: ${new Date().toLocaleDateString()}`;

// Template Literal Types für statische String-Analyse
type EventHandler = `on${Capitalize<string>}`; // "onClick", "onChange"
type APIEndpoint = `/${'users' | 'posts' | 'auth'}`; // "/users" | "/posts" | "/auth"

Ein wichtiger Unterschied besteht zwischen Literal-Typen (präzise Typen wie `

KI-Zusammenfassung

TypeScript’in temel tür sistemini keşfedin. Primitiflerden nesnelere, union ve intersection türlerine kadar her şeyi öğrenin. Kod güvenliğinizi artırın.

Kommentare

00
KOMMENTAR SCHREIBEN
ID #M8XYQF

0 / 1200 ZEICHEN

Menschen-Check

7 + 3 = ?

Erscheint nach redaktioneller Prüfung

Moderation · Spam-Schutz aktiv

Noch keine Kommentare. Sei der erste.