Caching in TypeScript: Beschleunigen Sie Ihre Anwendung ohne Schmerz

Warum Ihre Anwendung lahmt (und wie Sie das beheben)

Haben Sie schon einmal darauf gewartet, dass die Oberfläche nach einem Klick neu gezeichnet wird? Oder beobachtet, wie der Server dieselbe Anfrage mehrmals hintereinander beantwortet? Kommt Ihnen bekannt vor? Dann ist dieser Artikel für Sie. Daten-Caching ist nicht nur eine „gute Praxis“, sondern eine grundlegende Fähigkeit jedes TypeScript-Entwicklers, der möchte, dass seine Anwendung fliegt und nicht kriecht.

Heute werden wir durchgehen, wie man Daten in TypeScript richtig cached: von einem einfachen In-Memory-Cache im Frontend bis hin zu fortgeschrittenen Strategien mit TTL und Redis im Backend. Sie erhalten fertige Code-Schnipsel, die Sie noch heute in Ihr Projekt einfügen können.

Was ist Caching und warum braucht man es in TypeScript?

Caching ist eine Technik zur temporären Speicherung häufig verwendeter Daten in einem schnellen Speicher. Anstatt jedes Mal zur Datenbank oder zu einem entfernten Server zu gehen, speichern wir das Ergebnis der ersten Anfrage und geben es bei wiederholten Zugriffen zurück.

Die Vorteile liegen auf der Hand:

• Reduzierung der Antwortzeit (Latenz) – der Benutzer erhält Daten in Millisekunden
• Verringerung der Last auf Server und Datenbank
• Einsparung von Traffic und Ressourcen
• Möglichkeit, offline zu arbeiten (für das Frontend)

In TypeScript können wir dank des Typsystems ein sicheres und vorhersagbares Caching schreiben, das zur Laufzeit nicht kaputt geht. Lassen Sie uns sehen, wie das geht.

Caching-Strategien: Den richtigen Ansatz wählen

Bevor wir Code schreiben, müssen wir verstehen, welche Strategie Sie verwenden werden. Davon hängt ab, wie effektiv Ihre Lösung sein wird.

1. In-Memory Cache (Cache im Arbeitsspeicher)

Die einfachste und schnellste Variante. Daten werden in einer Variable, Map oder einem Objekt gespeichert. Ideal für Frontend und kleine Node.js-Anwendungen.

Nachteil: Daten gehen beim Neuladen der Seite oder Neustart des Servers verloren.

2. LocalStorage / SessionStorage (Cache im Browser)

Geeignet für das Frontend, wenn Daten zwischen Sitzungen gespeichert werden sollen. Ideal für Benutzereinstellungen, Tokens und das Caching von API-Antworten.

Nachteil: Synchroner Zugriff, Größenbeschränkung (5-10MB).

3. Redis (Cache auf dem Server)

Industriestandard für das Backend. Schnell, zuverlässig, mit Unterstützung für TTL und komplexe Datenstrukturen. Funktioniert hervorragend mit Node.js über die Bibliothek ioredis.

Nachteil: Erfordert einen separaten Dienst (Redis-Server).

4. Service Worker + Cache API (PWA)

Fortschrittlicher Cache für Progressive Web Apps. Ermöglicht das Abfangen von Netzwerkanfragen und die Rückgabe von gecachten Antworten. Ideal für den Offline-Modus.

Cache in TypeScript schreiben: Vom Einfachen zum Komplexen

Jetzt geht es an die Praxis. Ich zeige Ihnen mehrere Implementierungen, von einfach bis fortgeschritten, unter Verwendung von TypeScript-Generics.

Einfacher In-Memory Cache mit TTL

Beginnen wir mit dem Klassiker – einem Cache im Arbeitsspeicher mit automatischer Löschung abgelaufener Einträge.

// cache.tsinterface CacheEntry<T> {    data: T;    expiry: number; // timestamp in Millisekunden}

class SimpleCache<T> {    private store = new Map<string, CacheEntry<T>>();

    constructor(private defaultTTL: number = 60000) {} // 60 Sekunden Standard

    set(key: string, data: T, ttl?: number): void {        const expiry = Date.now() + (ttl ?? this.defaultTTL);        this.store.set(key, { data, expiry });    }

    get(key: string): T | undefined {        const entry = this.store.get(key);        if (!entry) return undefined;        if (Date.now() > entry.expiry) {            this.store.delete(key);            return undefined; // abgelaufen        }        return entry.data;    }

    has(key: string): boolean {        return this.get(key) !== undefined;    }

    clear(): void {