Appearance
Kapitel 2: Grundlegende Typen
🎯 Lernziele
In diesem Kapitel lernen Sie:
- ✅ Grundlegende Typen (boolean, number, string)
- ✅ Array-Typen und Tuples
- ✅ Enum-Typen
- ✅ Spezielle Typen (any, unknown, void, never)
- ✅ Type Assertion
2.1 Boolean Typ
📖 Einfache Definition
boolean repräsentiert einen Wahrheitswert: true oder false.
💻 Code-Beispiel
typescript
// Deklaration mit Typ
let isDone: boolean = false;
// Typinferenz (TS erkennt den Typ automatisch)
let isActive = true; // Typ: boolean
// Verwendung
isDone = true;
console.log(isDone); // Ausgabe: true⚠️ Häufige Fehler
typescript
// ❌ Falsch
let isFinished: boolean = "true"; // Fehler: string kann nicht boolean zugewiesen werden
// ✅ Richtig
let isFinished: boolean = true;2.2 Number Typ
📖 Einfache Definition
number repräsentiert sowohl ganze Zahlen als auch Fließkommazahlen.
💻 Code-Beispiel
typescript
// Ganze Zahlen
let age: number = 25;
// Fließkommazahlen
let price: number = 19.99;
// Hexadezimal
let hex: number = 0xf00d;
// Binär
let binary: number = 0b1010;
// Oktal
let octal: number = 0o744;2.3 String Typ
📖 Einfache Definition
string repräsentiert Textdaten.
💻 Code-Beispiel
typescript
// Einzelne Anführungszeichen
let name1: string = 'Max';
// Doppelte Anführungszeichen
let name2: string = "Maria";
// Template-Literale (Empfohlen)
let greeting: string = `Hallo, ${name1}!`;
console.log(greeting); // Ausgabe: Hallo, Max!2.4 Array Typen
📖 Einfache Definition
Arrays können auf zwei Arten definiert werden:
Typ[]Array<Typ>
💻 Code-Beispiel
typescript
// Methode 1: Typ[]
let numbers1: number[] = [1, 2, 3, 4, 5];
// Methode 2: Array<Typ>
let numbers2: Array<number> = [1, 2, 3, 4, 5];
// String-Array
let names: string[] = ["Max", "Maria", "Anna"];
// Mehrdimensionale Arrays
let matrix: number[][] = [
[1, 2, 3],
[4, 5, 6]
];⚠️ Häufige Fehler
typescript
// ❌ Falsch: Array mit gemischten Typen
let mixed: number[] = [1, "zwei", 3]; // Fehler
// ✅ Richtig: Union Type verwenden
let mixed: (number | string)[] = [1, "zwei", 3];2.5 Tuple Typ
📖 Einfache Definition
Ein Tuple ist ein Array mit einer festen Anzahl von Elementen, wobei jedes Element einen bekannten Typ hat.
💻 Code-Beispiel
typescript
// Deklaration eines Tuples
let person: [string, number] = ["Max", 25];
// Zugriff auf Elemente
console.log(person[0]); // Ausgabe: Max
console.log(person[1]); // Ausgabe: 25
// Destructuring
const [name, age] = person;
console.log(name); // Ausgabe: Max
console.log(age); // Ausgabe: 25⚠️ Häufige Fehler
typescript
// ❌ Falsch: Reihenfolge vertauscht
let person: [string, number] = [25, "Max"]; // Fehler
// ❌ Falsch: Zu wenig Elemente
let person: [string, number] = ["Max"]; // Fehler
// ❌ Falsch: Zu viele Elemente
let person: [string, number] = ["Max", 25, true]; // Fehler2.6 Enum Typ
📖 Einfache Definition
enum ist eine Möglichkeit, numerische Konstanten mit lesbaren Namen zu definieren.
💻 Code-Beispiel
typescript
// Numerisches Enum (Standard)
enum Direction {
North, // 0
East, // 1
South, // 2
West // 3
}
let dir: Direction = Direction.North;
console.log(dir); // Ausgabe: 0
// String Enum
enum Status {
Active = "ACTIVE",
Inactive = "INACTIVE",
Pending = "PENDING"
}
let currentStatus: Status = Status.Active;
console.log(currentStatus); // Ausgabe: ACTIVE💡 Vorteile von Enum
typescript
// ❌ Schlecht: Magische Zahlen
function move(direction: number) {
if (direction === 0) {
console.log("Nach Norden");
}
}
// ✅ Gut: Enum verwenden
function move(direction: Direction) {
if (direction === Direction.North) {
console.log("Nach Norden");
}
}2.7 Any Typ (Vorsichtig verwenden!)
📖 Einfache Definition
any deaktiviert die Typprüfung für eine Variable. Verwenden Sie es sparsam!
💻 Code-Beispiel
typescript
// Any Typ
let uncertain: any = "Hallo";
uncertain = 25;
uncertain = true;
uncertain = [1, 2, 3];
// Funktion mit any
function logValue(value: any): void {
console.log(value);
}⚠️ Warnung
typescript
// ❌ Schlecht: any verwenden (verliert alle Vorteile von TypeScript)
let data: any = "Hallo";
data.foo.bar(); // Keine Fehlermeldung zur Kompilierungszeit!
// ✅ Gut: Spezifischen Typ verwenden
let data: string = "Hallo";
data.foo.bar(); // Fehler: Property 'foo' existiert nicht auf 'string'2.8 Undefined & Null Typen
📖 Einfache Definition
undefined: Eine Variable, die deklariert, aber nicht initialisiert wurdenull: Ein bewusster "leerer" Wert
💻 Code-Beispiel
typescript
// Undefined
let notAssigned: undefined = undefined;
// Null
let emptyValue: null = null;
// In TypeScript sind diese Typen Subtypen aller anderen Typen
// (wenn "strictNullChecks": false in tsconfig.json)
let name: string = null; // Erlaubt (nicht empfohlen)
let age: number = undefined; // Erlaubt (nicht empfohlen)⚠️ Empfehlung
Aktivieren Sie "strictNullChecks": true in tsconfig.json:
json
{
"compilerOptions": {
"strictNullChecks": true
}
}Dann müssen Sie null und undefined explizit behandeln:
typescript
let name: string | null = null; // Union Type2.9 Void Typ
📖 Einfache Definition
void repräsentiert das Fehlen eines Wertes (meistens bei Funktionen, die nichts zurückgeben).
💻 Code-Beispiel
typescript
// Funktion ohne Rückgabewert
function logMessage(message: string): void {
console.log(message);
}
// Variable mit void (selten verwendet)
let empty: void = undefined;2.10 Never Typ
📖 Einfache Definition
never repräsentiert einen Wert, der niemals vorkommt (Funktionen, die nie zurückkehren).
💻 Code-Beispiel
typescript
// Funktion, die eine Exception wirft
function throwError(message: string): never {
throw new Error(message);
}
// Funktion mit Endlosschleife
function infiniteLoop(): never {
while (true) {
console.log("Läuft für immer");
}
}2.11 Type Assertion
📖 Einfache Definition
Type Assertion teilt dem Compiler mit, dass Sie den Typ einer Variable besser kennen als er.
💻 Code-Beispiel
typescript
// Methode 1: "as" Syntax (Empfohlen)
let someValue: any = "Hallo Welt";
let strLength: number = (someValue as string).length;
// Methode 2: "<Typ>" Syntax (Nicht in TSX-Dateien erlaubt)
let someValue2: any = "Hallo Welt";
let strLength2: number = (<string>someValue2).length;⚠️ Warnung
Type Assertion führt keine Typkonvertierung durch!
typescript
let value: any = "123";
let num: number = value as number; // Keine Konvertierung!
console.log(num); // Ausgabe: "123" (immer noch ein String!)Verwenden Sie stattdessen Konvertierungsfunktionen:
typescript
let value: any = "123";
let num: number = Number(value); // Konvertierung
console.log(num); // Ausgabe: 123 (Zahl)2.12 Praxis: Variablen und Funktionen mit Typen versehen
💻 Vollständiges Beispiel
typescript
// Variablen mit Typen
let username: string = "Max";
let age: number = 25;
let isAdmin: boolean = false;
// Array mit Typen
let hobbies: string[] = ["Lesen", "Sport", "Programmieren"];
// Tuple
let user: [string, number, boolean] = ["Max", 25, false];
// Enum
enum UserRole {
Admin = "ADMIN",
User = "USER",
Guest = "GUEST"
}
// Funktion mit Typen
function createUser(name: string, age: number, role: UserRole): string {
return `Benutzer erstellt: ${name}, ${age} Jahre alt, Rolle: ${role}`;
}
// Verwendung
const result = createUser("Max", 25, UserRole.Admin);
console.log(result);📝 Zusammenfassung
In diesem Kapitel haben Sie gelernt:
- ✅
boolean,number,stringsind grundlegende Typen - ✅ Arrays können als
Typ[]oderArray<Typ>definiert werden - ✅ Tuples haben eine feste Anzahl von Elementen mit bekannten Typen
- ✅ Enums repräsentieren benannte Konstanten
- ✅
anysollte vermieden werden - ✅
void,never,undefined,nullhaben spezielle Bedeutungen - ✅ Type Assertion teilt dem Compiler den Typ mit
🎯 Nächstes Kapitel
Im Kapitel 3 lernen wir fortgeschrittene Typen (Union Types, Intersection Types, Type Aliases, etc.).
👉 Weiter zu Kapitel 3: Fortgeschrittene Typen
❓ Häufig gestellte Fragen
F: Soll ich immer Typen angeben?
A: TypeScript kann Typen oft automatisch erkennen (Type Inference). Geben Sie Typen explizit an, wenn:
- Die Variable nicht sofort initialisiert wird
- Die Funktion Parameter empfängt
- Die Funktion einen Rückgabewert hat
F: Ist any böse?
A: Nein, aber es sollte vermieden werden. Verwenden Sie unknown oder spezifische Typen.
🎉 Herzlichen Glückwunsch! Sie haben Kapitel 2 abgeschlossen!
