API in TypeScript: REST, GraphQL und gRPC – was wählt man 2025?

Einleitung: APIs sind nicht nur Anfragen, sie sind ein Dialog

Vor langer Zeit, in der Ära der Monolithen, schrieben Entwickler Backends in PHP oder Java, und das Frontend rief einfach fertige URLs auf. Alles war einfach, aber langsam. Heute diktiert das TypeScript-Ökosystem neue Regeln: Wir wollen nicht nur Daten austauschen, sondern dies sicher, streng und mit Autovervollständigung tun. Genau hier kommen die drei Giganten ins Spiel: REST, GraphQL und gRPC.

In diesem Artikel werden wir nicht die Dokumentation nacherzählen. Wir gehen jedes Protokoll aus der Sicht eines Praktikers in TypeScript durch: Wir sehen echte Codebeispiele, vergleichen die Leistung und verstehen, welches Werkzeug für Ihr Projekt geeignet ist. Wenn Sie in TypeScript schreiben und Ihre API-Fähigkeiten verbessern möchten, sind Sie hier genau richtig.

REST API in TypeScript: Ein Klassiker, der nicht stirbt

REST (Representational State Transfer) ist der De-facto-Standard. Einfachheit, HTTP-Methoden (GET, POST, PUT, DELETE) und Ressourcen. Aber in TypeScript entfaltet REST sein volles Potenzial: Wir erhalten eine strenge Typisierung von Anfragen und Antworten.

Wie ein typisierter REST-Client aussieht

Lassen Sie uns einen minimalen, aber funktionsfähigen Client für eine REST API in TypeScript schreiben. Ohne überflüssige Bibliotheken – nur fetch und Typen.

// Typen für die Antwortinterface User {  id: number;  name: string;  email: string;}

interface ApiResponse<T> {  data: T;  status: number;  message: string;}

// Typisierter Clientclass RestClient {  private baseUrl: string;

  constructor(baseUrl: string) {    this.baseUrl = baseUrl;  }

  async get<T>(endpoint: string): Promise<ApiResponse<T>> {    const response = await fetch(`${this.baseUrl}${endpoint}`, {      method: 'GET',      headers: { 'Content-Type': 'application/json' },    });

    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }

    const data: T = await response.json();    return {      data,      status: response.status,      message: 'Success',    };  }

  async post<T, U>(endpoint: string, body: U): Promise<ApiResponse<T>> {    const response = await fetch(`${this.baseUrl}${endpoint}`, {      method: 'POST',      headers: { 'Content-Type': 'application/json' },      body: JSON.stringify(body),    });

    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }

    const data: T = await response.json();    return {      data,      status: response.status,      message: 'Created',    };  }}

// Verwendungconst client = new RestClient('https://jsonplaceholder.typicode.com');

async function fetchUser() {  const response = await client.get<User>('/users/1');  console.log(response.data.name); // Autovervollständigung funktioniert!}

fetchUser();

Wie Sie sehen, gibt uns die REST API TypeScript die Kontrolle über die Typen in jeder Phase. Ein Fehler im Feldnamen? TypeScript fängt ihn zur Kompilierzeit ab.

Wann man REST wählen sollte

• Einfachheit – REST ist leicht zu verstehen und zu warten.
• Caching – HTTP-Caching funktioniert sofort.
• CRUD-Anwendungen – Blogs, Shops, Admin-Bereiche.

Nachteil: Bei komplexen verschachtelten Abfragen erhalten Sie entweder viele Daten (Over-fetching) oder Sie machen N Abfragen (N+1-Problem).

GraphQL in TypeScript: Flexibilität und Präzision

GraphQL ist eine von Facebook entwickelte Abfragesprache. Ihr Hauptvorteil: Sie entscheiden selbst, welche Felder Sie abrufen möchten. GraphQL TypeScript ist ein leistungsstarkes Duo, das vollständige Typsicherheit auf Client und Server bietet.

Eine GraphQL-Abfrage mit Typisierung schreiben

Als Beispiel verwenden wir die Bibliothek graphql-request – einen leichten Client für TypeScript.

import { request, gql } from 'grap