Skip to content

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:

  1. Typ[]
  2. 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];  // Fehler

2.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 wurde
  • null: 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 Type

2.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, string sind grundlegende Typen
  • ✅ Arrays können als Typ[] oder Array<Typ> definiert werden
  • ✅ Tuples haben eine feste Anzahl von Elementen mit bekannten Typen
  • ✅ Enums repräsentieren benannte Konstanten
  • any sollte vermieden werden
  • void, never, undefined, null haben 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!

Frei für alle Anfänger