⚛️TypeScript mit React

Komponenten sind Funktionen – Props sind ihr erster Parameter. (Im Spielplatz mit stark vereinfachten React-Typen; in echten Projekten liefert sie @types/react.)

Props sind einfach ein Objekttyp für den ersten Parameter. Optionale Props bekommen ? und oft einen Standardwert in der Destrukturierung. Falsche oder fehlende Props meldet der Compiler direkt am JSX.

Komponente.tsx · bearbeitbar, Maus über Namen zeigt Typen

type BadgeProps = {
  text: string;
  farbe?: "blau" | "gruen" | "rot";
};

function Badge({ text, farbe = "blau" }: BadgeProps) {
  return <span className={"badge-" + farbe}>{text}</span>;
}

const ok = <Badge text="Neu" />;
const falsch = <Badge text="Alt" farbe="lila" />;
const fehlt = <Badge farbe="rot" />;

JavaScript (erzeugt von tsc) · …nur lesen

// wird kompiliert …

// wird kompiliert …

🔌Typen für APIs: aus JSON

Fügen Sie eine Beispielantwort ein – daraus entstehen Interfaces. Arrays mit Objekten werden zusammengeführt; was nicht in jedem Element vorkommt, wird optional.

Name des Typs readonly

Beispiel-JSON (z. B. Antwort von https://api.example.org/buecher/4711)

{
  "id": 4711,
  "titel": "Einführung in TypeScript",
  "preis": 29.9,
  "verfuegbar": true,
  "autor": { "name": "Ada Beispiel", "email": "ada@example.org" },
  "tags": ["typescript", "javascript"],
  "kapitel": [
    { "nr": 1, "titel": "Grundlagen", "seiten": 24 },
    { "nr": 2, "titel": "Generics", "seiten": 31, "neu": true }
  ],
  "rabatt": null
}

Erzeugte TypeScript-Typennur lesen

export interface Buch {
  id: number;
  titel: string;
  preis: number;
  verfuegbar: boolean;
  autor: Autor;
  tags: string[];
  kapitel: KapitelEintrag[];
  rabatt: null;
}

export interface Autor {
  name: string;
  email: string;
}

export interface KapitelEintrag {
  nr: number;
  titel: string;
  seiten: number;
  neu?: boolean;
}

export interface Buch {
  id: number;
  titel: string;
  preis: number;
  verfuegbar: boolean;
  autor: Autor;
  tags: string[];
  kapitel: KapitelEintrag[];
  rabatt: null;
}

export interface Autor {
  name: string;
  email: string;
}

export interface KapitelEintrag {
  nr: number;
  titel: string;
  seiten: number;
  neu?: boolean;
}

Achtung: Ein einzelnes Beispiel verrät nicht alles – Felder, die im Beispiel null sind, bekommen den Typnull. Die erzeugten Typen sind ein Startpunkt, keine Garantie für echte Serverantworten.

⚠️ Typen prüfen keine Daten

Die Annotation const daten: Buch = await antwort.json() ist ein Versprechen, keine Prüfung (json()liefert any). Für Daten von außen: als unknown annehmen und mit einem Type Guard oder einer Validierungsbibliothek prüfen.

✅ Eine Quelle der Wahrheit

Gibt es eine OpenAPI-Beschreibung, erzeugt man die Typen daraus (z. B. im Build), statt sie von Hand abzuschreiben. Ändert sich die API, meldet der Compiler alle betroffenen Stellen.

📜Typen für APIs: aus OpenAPI

openapi.json (Ausschnitt, erfundene Bücherei-API)

{
  "components": {
    "schemas": {
      "Status": {
        "type": "string",
        "enum": [
          "verfuegbar",
          "ausgeliehen",
          "vorgemerkt"
        ]
      },
      "Autor": {
        "type": "object",
        "required": [
          "id",
          "name"
        ],
        "properties": {
          "id": {
            "type": "integer"
          },
          "name": {
            "type": "string"
          },
          "webseite": {
            "type": [
              "string",
              "null"
            ],
            "format": "uri"
          }
        }
      },
      "Buch": {
        "type": "object",
        "description": "Ein Buch im Bestand",
        "required": [
          "isbn",
          "titel",
          "status",
          "autoren"
        ],
        "properties": {
          "isbn": {
            "type": "string",
            "description": "ISBN-13"
          },
          "titel": {
            "type": "string"
          },
          "status": {
            "$ref": "#/components/schemas/Status"
          },
          "autoren": {
            "type": "array",
            "items": {
              "$ref": "#/components/schemas/Autor"
            }
          },
          "erschienen": {
            "type": "string",
            "format": "date"
          },
          "seiten": {
            "type": "integer"
          },
          "schlagworte": {
            "type": "array",
            "items": {
              "type": "string"
            }
          }
        }
      },
      "BuchListe": {
        "type": "array",
        "items": {
          "$ref": "#/components/schemas/Buch"
        }
      }
    }
  }
}

generierte Typen (vereinfachter Generator dieser App)

export type Status = "verfuegbar" | "ausgeliehen" | "vorgemerkt";

export interface Autor {
  id: number;
  name: string;
  /** Format: uri */
  webseite?: string | null;
}

/** Ein Buch im Bestand */
export interface Buch {
  /** ISBN-13 */
  isbn: string;
  titel: string;
  status: Status;
  autoren: Autor[];
  /** Format: date */
  erschienen?: string;
  seiten?: number;
  schlagworte?: string[];
}

export type BuchListe = Buch[];

export type Status = "verfuegbar" | "ausgeliehen" | "vorgemerkt";

export interface Autor {
  id: number;
  name: string;
  /** Format: uri */
  webseite?: string | null;
}

/** Ein Buch im Bestand */
export interface Buch {
  /** ISBN-13 */
  isbn: string;
  titel: string;
  status: Status;
  autoren: Autor[];
  /** Format: date */
  erschienen?: string;
  seiten?: number;
  schlagworte?: string[];
}

export type BuchListe = Buch[];

required → Pflichtfeld, sonst ?
enum → Union von Literalen
"type": ["string", "null"] (OpenAPI 3.1) bzw. nullable (3.0) → | null
$ref → Verweis auf den benannten Typ
integer → number (TypeScript kennt keinen Ganzzahltyp)

📘.d.ts und DefinitelyTyped

Eine .d.ts-Datei enthält nur Typen, keinen Code. tsc erzeugt sie mit declaration: true – links der Code, rechts die daraus erzeugte Deklaration.

TypeScript · bearbeitbar, Maus über Namen zeigt Typen

/** Rechnet Netto in Brutto um. */
export function brutto(netto: number, satz = 0.19): number {
  return Math.round(netto * (1 + satz) * 100) / 100;
}

export interface Rechnung {
  nummer: string;
  positionen: { text: string; netto: number }[];
}

export class Rechner {
  #verlauf: number[] = [];
  summe(r: Rechnung): number {
    const s = r.positionen.reduce((a, p) => a + brutto(p.netto), 0);
    this.#verlauf.push(s);
    return s;
  }
}

.d.ts (Typdeklarationen)nur lesen

Woher kommen Typen für Pakete?

Im Paket selbst (Feld types bzw. exports in der package.json) – der Normalfall bei modernen Paketen.
DefinitelyTyped: ein Community-Repository mit Typen für Pakete ohne eigene Typen, installierbar als npm i -D @types/paketname.
Selbst geschrieben: eine eigene .d.ts mit declare module (rechts).

⚠️ TypeScript 6.0: types ist leer

Globale Typen wie @types/node werden seit 6.0 nicht mehr automatisch geladen – in der tsconfig.jsongehört "types": ["node"] eingetragen (sonst Fehler TS2591 bei process).

// Eigene Deklaration für ein JavaScript-Paket ohne Typen (z. B. types/rechner-lib.d.ts)
declare module "rechner-lib" {
  export function addiere(a: number, b: number): number;
  export const version: string;
}

🚚Migration von JavaScript nach TypeScript

Nicht alles auf einmal: umbenennen, locker starten, dann Schritt für Schritt strenger werden. Die Fehlerzahlen kommen vom Compiler.

Schritt 1 / 4 · Tasten ← →

warenkorb.ts · strict: falsenur lesen

function preisMitSteuer(artikel, satz) {
  return artikel.preis * (1 + satz);
}

const warenkorb = [
  { name: "Tasse", preis: 8 },
  { name: "Kanne", preis: 25 },
];
const summe = warenkorb.reduce((s, a) => s + preisMitSteuer(a, 0.19), 0);
console.log(summe.toFixed(2));

const teller = warenkorb.find((a) => a.name === "Teller");
console.log(teller.preis);

function preisMitSteuer(artikel, satz) {
  return artikel.preis * (1 + satz);
}

const warenkorb = [
  { name: "Tasse", preis: 8 },
  { name: "Kanne", preis: 25 },
];
const summe = warenkorb.reduce((s, a) => s + preisMitSteuer(a, 0.19), 0);
console.log(summe.toFixed(2));

const teller = warenkorb.find((a) => a.name === "Teller");
console.log(teller.preis);

1 · Umbenennen, locker starten

Die .js-Datei wird zu .ts – mit strict: false. Gültiges JavaScript ist (fast immer) gültiges TypeScript: 0 Fehler, aber schon jetzt leitet der Compiler Typen ab (warenkorb ist ein Array von Objekten mit name und preis) und die Autovervollständigung funktioniert. In gemischten Projekten erlaubt allowJs, dass .js- und .ts-Dateien nebeneinander leben.

💡 Große Projekte

Mit allowJs leben .js- und .ts-Dateien nebeneinander; mitcheckJs prüft der Compiler sogar JavaScript-Dateien (Typen per JSDoc-Kommentar wie /** @param {number} x */). So lässt sich Datei für Datei umstellen.

🕳️Häufige Fehler und Stolperfallen

Die gefährlichsten Fehler sind die, die der Compiler nicht meldet. Links das Problem, rechts die bessere Variante – jeweils mit Fehlerzahl vom Compiler.

`as` statt Prüfung

as behauptet nur. Kommt vom Server etwas anderes, knallt es erst zur Laufzeit – der Compiler meldet nichts.

😬 so nicht…

interface Nutzer { name: string }
const daten = JSON.parse('{"nme":"Ada"}') as Nutzer;
console.log(daten.name.toUpperCase());

interface Nutzer { name: string }
const daten = JSON.parse('{"nme":"Ada"}') as Nutzer;
console.log(daten.name.toUpperCase());

👍 besser…

interface Nutzer { name: string }
function istNutzer(x: unknown): x is Nutzer {
  return typeof x === "object" && x !== null && "name" in x && typeof x.name === "string";
}
const daten: unknown = JSON.parse('{"nme":"Ada"}');
if (istNutzer(daten)) console.log(daten.name.toUpperCase());

interface Nutzer { name: string }
function istNutzer(x: unknown): x is Nutzer {
  return typeof x === "object" && x !== null && "name" in x && typeof x.name === "string";
}
const daten: unknown = JSON.parse('{"nme":"Ada"}');
if (istNutzer(daten)) console.log(daten.name.toUpperCase());

`any` ist ansteckend

Was aus any kommt, ist wieder any – Tippfehler rutschen durch. JSON.parse liefert any!

😬 so nicht…

const konfig = JSON.parse('{"port": 8080}');
const port: string = konfig.prot;

const konfig = JSON.parse('{"port": 8080}');
const port: string = konfig.prot;

👍 besser…

const konfig: unknown = JSON.parse('{"port": 8080}');
const port: string = konfig.prot;

const konfig: unknown = JSON.parse('{"port": 8080}');
const port: string = konfig.prot;

Indexzugriff ohne `undefined`

Standardmäßig ist liste[10] vom Typ des Elements – obwohl das Element fehlen kann.

😬 so nicht…

const farben = ["rot", "gruen"];
const dritte = farben[2];
console.log(dritte.toUpperCase());

const farben = ["rot", "gruen"];
const dritte = farben[2];
console.log(dritte.toUpperCase());

👍 besser (mit noUncheckedIndexedAccess)…

const farben = ["rot", "gruen"];
const dritte = farben[2];
console.log(dritte.toUpperCase());

const farben = ["rot", "gruen"];
const dritte = farben[2];
console.log(dritte.toUpperCase());

`Object.keys` liefert `string[]`

Wegen der strukturellen Typisierung kann ein Objekt mehr Schlüssel haben als sein Typ – deshalb ist Object.keys bewusst nur string[].

😬 so nicht…

const preise = { apfel: 1, birne: 2 };
for (const k of Object.keys(preise)) {
  console.log(preise[k]);
}

const preise = { apfel: 1, birne: 2 };
for (const k of Object.keys(preise)) {
  console.log(preise[k]);
}

👍 besser…

const preise = { apfel: 1, birne: 2 };
for (const [sorte, preis] of Object.entries(preise)) {
  console.log(sorte, preis);
}

const preise = { apfel: 1, birne: 2 };
for (const [sorte, preis] of Object.entries(preise)) {
  console.log(sorte, preis);
}

`{}` heißt nicht „leeres Objekt“

{} bedeutet „irgendein Wert außer null/undefined“ – auch Zahlen und Strings passen. Für „beliebiges Objekt“ nimmt man object oder Record<string, unknown>.

😬 so nicht…

function speichere(daten: {}) {}
speichere(42);
speichere("Text");

function speichere(daten: {}) {}
speichere(42);
speichere("Text");

👍 besser…

function speichere(daten: Record<string, unknown>) {}
speichere({ a: 1 });
speichere(42);

function speichere(daten: Record<string, unknown>) {}
speichere({ a: 1 });
speichere(42);

Numerische Enums

Numerische Enums sind lax: Werte werden als Zahlen durchgereicht und im Log steht 1 statt eines lesbaren Namens. Unions von String-Literalen sind lesbarer und löschbar.

😬 so nicht…

enum Rolle { Admin, Gast }
function pruefe(r: Rolle) { return r; }
console.log(pruefe(Rolle.Gast));

enum Rolle { Admin, Gast }
function pruefe(r: Rolle) { return r; }
console.log(pruefe(Rolle.Gast));

👍 besser…

type Rolle = "admin" | "gast";
function pruefe(r: Rolle) { return r; }
console.log(pruefe("gast"));

type Rolle = "admin" | "gast";
function pruefe(r: Rolle) { return r; }
console.log(pruefe("gast"));

⚛️TypeScript mit React

🔌Typen für APIs: aus JSON

📜Typen für APIs: aus OpenAPI

📘.d.ts und DefinitelyTyped

Woher kommen Typen für Pakete?

🚚Migration von JavaScript nach TypeScript

1 · Umbenennen, locker starten

🕳️Häufige Fehler und Stolperfallen

as statt Prüfung

any ist ansteckend

Indexzugriff ohne undefined

Object.keys liefert string[]

{} heißt nicht „leeres Objekt“

Numerische Enums

`as` statt Prüfung

`any` ist ansteckend

Indexzugriff ohne `undefined`

`Object.keys` liefert `string[]`

`{}` heißt nicht „leeres Objekt“