Arrays & Tuples in TypeScript

Arrays sind essentiell in JavaScript. TypeScript fügt Typisierung hinzu, sodass du sicherstellen kannst, dass dein Array nur die richtigen Elemente enthält.

Array-Typen

Basis-Syntax

Es gibt zwei Schreibweisen für Array-Typen:

// Variante 1: type[]
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Anna", "Max", "Lisa"];

// Variante 2: Array<type>
let scores: Array<number> = [100, 95, 88];
let words: Array<string> = ["Hallo", "Welt"];

Beide sind gleichwertig - wähle die Schreibweise, die du bevorzugst.

Type Inference bei Arrays

TypeScript erkennt den Typ automatisch:

// TypeScript erkennt: number[]
let primes = [2, 3, 5, 7, 11];

// TypeScript erkennt: string[]
let fruits = ["Apfel", "Banane", "Orange"];

// Bei gemischten Arrays: (string | number)[]
let mixed = [1, "zwei", 3];

Array-Operationen

TypeScript prüft alle Array-Operationen:

let numbers: number[] = [1, 2, 3];

// Erlaubt
numbers.push(4);
numbers.unshift(0);
numbers[0] = 10;

// Fehler!
numbers.push("fünf");  // Argument of type 'string' is not assignable
numbers[0] = true;     // Type 'boolean' is not assignable to type 'number'

Array-Methoden

Alle Array-Methoden sind korrekt typisiert:

let numbers: number[] = [1, 2, 3, 4, 5];

// map: number[] -> number[]
let doubled = numbers.map(n => n * 2);

// filter: number[] -> number[]
let evens = numbers.filter(n => n % 2 === 0);

// find: number | undefined
let found = numbers.find(n => n > 3);

// reduce mit explizitem Startwert
let sum = numbers.reduce((acc, curr) => acc + curr, 0);

Readonly Arrays

Arrays, die nicht verändert werden sollen:

// Readonly Array
let colors: readonly string[] = ["rot", "grün", "blau"];

// Fehler bei Modifikationen:
colors.push("gelb");   // Fehler!
colors[0] = "orange";  // Fehler!

// Alternative Syntax
let numbers: ReadonlyArray<number> = [1, 2, 3];

Mehrdimensionale Arrays

Arrays von Arrays:

// 2D Array
let matrix: number[][] = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// Zugriff
let value: number = matrix[1][2];  // 6

// 3D Array
let cube: number[][][] = [
    [[1, 2], [3, 4]],
    [[5, 6], [7, 8]]
];

Tuples

Tuples sind Arrays mit fester Länge und definierten Typen an jeder Position:

// Tuple: [string, number]
let person: [string, number] = ["Max", 25];

// Position ist wichtig!
let name: string = person[0];  // "Max"
let age: number = person[1];   // 25

// Fehler bei falscher Reihenfolge oder Typ
let wrong: [string, number] = [25, "Max"];  // Fehler!

Praktische Tuple-Beispiele

// Koordinaten
type Coordinates = [number, number];
let point: Coordinates = [10, 20];

// RGB Farbe
type RGB = [number, number, number];
let red: RGB = [255, 0, 0];

// Mit Labels (TypeScript 4.0+)
type NamedCoordinates = [x: number, y: number];
let pos: NamedCoordinates = [100, 200];

Optionale Tuple-Elemente

// Drittes Element optional
type Point = [number, number, number?];

let point2D: Point = [10, 20];
let point3D: Point = [10, 20, 30];

Rest-Elemente in Tuples

// Mindestens zwei Strings, dann beliebig viele Zahlen
type StringsAndNumbers = [string, string, ...number[]];

let data: StringsAndNumbers = ["a", "b", 1, 2, 3, 4, 5];

Readonly Tuples

type ReadonlyPoint = readonly [number, number];

let point: ReadonlyPoint = [10, 20];
point[0] = 30;  // Fehler!

Arrays vs Tuples

Wann was verwenden?

// Array: Unbekannte Anzahl gleichartiger Elemente
let scores: number[] = [100, 95, 88, 92];

// Tuple: Feste Struktur mit unterschiedlichen Typen
let result: [boolean, string] = [true, "Erfolg"];

Praktische Beispiele

useState-ähnliches Pattern

function useState<T>(initial: T): [T, (value: T) => void] {
    let state = initial;
    const setState = (value: T) => {
        state = value;
    };
    return [state, setState];
}

const [count, setCount] = useState(0);
const [name, setName] = useState("Max");

Koordinaten-System

type Point = [number, number];

function distance(a: Point, b: Point): number {
    const [x1, y1] = a;
    const [x2, y2] = b;
    return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
}

const start: Point = [0, 0];
const end: Point = [3, 4];
console.log(distance(start, end));  // 5

Validierungsergebnis

type ValidationResult = [boolean, string[]];

function validateUser(name: string, email: string): ValidationResult {
    const errors: string[] = [];

    if (name.length < 2) {
        errors.push("Name zu kurz");
    }
    if (!email.includes("@")) {
        errors.push("Ungültige E-Mail");
    }

    return [errors.length === 0, errors];
}

const [isValid, errors] = validateUser("M", "invalid");
if (!isValid) {
    console.log("Fehler:", errors);
}

Array von Objekten

type User = {
    id: number;
    name: string;
    email: string;
};

let users: User[] = [
    { id: 1, name: "Anna", email: "anna@example.com" },
    { id: 2, name: "Max", email: "max@example.com" }
];

// Typsichere Operationen
const names = users.map(u => u.name);
const anna = users.find(u => u.id === 1);

Zusammenfassung

Arrays:

• type[] oder Array<type> für Listen
• Alle Elemente haben denselben Typ
• readonly für unveränderliche Arrays

Tuples:

• [type1, type2, ...] für feste Strukturen
• Jede Position hat einen eigenen Typ
• Gut für Funktionen mit mehreren Rückgabewerten

Best Practices:

• Verwende Arrays für dynamische Listen gleicher Elemente
• Verwende Tuples für feste Strukturen mit unterschiedlichen Typen
• Nutze readonly wenn möglich für Immutability

Im nächsten Kapitel lernst du Objekt-Typen im Detail!