TypeScript: Spickzettel

1. Was ist TypeScript?

• TypeScript = JavaScript + statische Typen
• Der Compiler prüft Typen und erzeugt normales JavaScript; Typen verschwinden zur Laufzeit
• Fehler fallen schon im Editor auf
• Daten von außen musst du trotzdem zur Laufzeit prüfen
• tsc --noEmit prüft Typen, tsc übersetzt zusätzlich

function flaeche(breite, hoehe) {
  return breite * hoehe;
}
console.log(flaeche(3, 4));        // 12
console.log(flaeche("3", "x"));    // NaN: kein Fehler, nur falsches Ergebnis
console.log(flaeche(3));           // NaN: Parameter vergessen

2. Grundtypen und Typinferenz

• Grundtypen: string, number, boolean, null, undefined, Arrays als typ[]
• Typinferenz spart Schreibarbeit; beschrifte Parameter und Rückgaben nach außen
• unknown statt any: erst prüfen, dann nutzen
• Mit strict sind null/undefined eigene Typen
• as behauptet einen Typ ohne Prüfung

const name: string = "Mia";
const alter: number = 17;
const aktiv: boolean = true;
const werte: number[] = [1, 2, 3];
const noten: Array<number> = [1, 2];          // gleichbedeutend
console.log(name, alter, aktiv, werte.length, noten.length);

3. Funktionen mit Typen

• Parameter und (bei API) Rückgabewert mit Typ beschriften
• Optionale Parameter x?: T, Standardwerte x = 1, Rest ...x: T[]
• Funktionstypen: (a: number) => string
• void = nichts zurück, never = kehrt nie zurück
• async liefert Promise<T>

function addiere(a: number, b: number): number {
  return a + b;
}
const mal = (a: number, b: number): number => a * b;

console.log(addiere(2, 3), mal(4, 5));

4. Objekte, Interfaces und Typ-Aliase

• Objekttypen beschreiben Eigenschaften: name: string, optional x?: T, schreibgeschützt readonly
• interface und type sind für Objekte fast austauschbar; type kann zusätzlich Unions und Tupel
• Erweitern: extends (interface) oder & (type)
• TypeScript ist strukturell: Es zählt die Form, nicht der Name
• Record<string, T> und Index-Signaturen für beliebige Schlüssel

type Nutzer = {
  id: number;
  name: string;
  email?: string;            // optional
  readonly angelegt: string; // nur lesbar
};

const mia: Nutzer = { id: 1, name: "Mia", angelegt: "2025-01-01" };
console.log(mia.name, mia.email ?? "keine E-Mail");

5. Unions, Literaltypen und Narrowing

• A | B: Wert ist einer der Typen; innerhalb von Prüfungen wird der Typ eingeengt (Narrowing)
• Literaltypen ("links" | "rechts") ersetzen magische Strings
• Diskriminierte Unions: gemeinsames Feld (art) bestimmt die Variante
• never im default erzwingt Vollständigkeit
• Eigene Typprüfer: x is Typ

function formatiere(wert: string | number): string {
  if (typeof wert === "string") {
    return wert.toUpperCase();      // hier ist wert: string
  }
  return wert.toFixed(2);           // hier ist wert: number
}
console.log(formatiere("hallo"), formatiere(3.14159));

6. Arrays, Tupel und Enums

• Arrays: T[] oder Array<T>; readonly T[] ist unveränderlich
• Tupel: feste Länge und Typen pro Stelle, gut für mehrere Rückgabewerte
• Statt enum oft besser: as const-Objekte oder Union-Literaltypen
• typeof x[number] und keyof typeof leiten Typen aus Werten ab
• Map<K, V> und Set<T> sind generisch typisiert

const zahlen: number[] = [3, 1, 2];
const namen: Array<string> = ["Mia", "Tom"];
const gemischt: (string | number)[] = [1, "zwei", 3];
const matrix: number[][] = [[1, 2], [3, 4]];

zahlen.sort((a, b) => a - b);
console.log(zahlen, namen.map((n) => n.toUpperCase()), gemischt.length, matrix[1][0]);

7. Klassen in TypeScript

• Sichtbarkeit: public, private, protected, readonly; #name ist echt privat
• implements erzwingt, dass eine Klasse ein Interface erfüllt
• abstract für Vorlagen; static für Klassenebene
• Klassen sind strukturell typisiert
• Komposition und Schnittstellen halten Code flexibel und testbar

class Konto {
  readonly inhaber: string;
  #stand: number = 0;              // echt privat (JavaScript)
  private log: string[] = [];      // nur zur Compile-Zeit privat (TypeScript)

  constructor(inhaber: string, startwert = 0) {
    this.inhaber = inhaber;
    this.#stand = startwert;
  }

  einzahlen(betrag: number): this {
    if (betrag <= 0) throw new RangeError("Betrag muss positiv sein");
    this.#stand += betrag;
    this.log.push(`+${betrag}`);
    return this;
  }

  get stand(): number {
    return this.#stand;
  }

  verlauf(): string[] {
    return [...this.log];
  }
}

const k = new Konto("Mia", 100).einzahlen(50).einzahlen(25);
console.log(k.inhaber, k.stand, k.verlauf());

8. Generics

• Generics = Typ-Parameter: function f<T>(x: T): T
• TypeScript erkennt den Typ beim Aufruf meist selbst
• Einschränken mit T extends ...; Schlüssel mit K extends keyof T
• Auch Interfaces, Typen und Klassen können generisch sein
• Nur dort einsetzen, wo Typen zusammenhängen

function erstesAny(liste: any[]): any {
  return liste[0];
}
const x = erstesAny([1, 2, 3]);      // x: any, alle Information ist verloren

9. Utility-Typen und Typoperatoren

• Partial, Required, Readonly, Pick, Omit, Record formen Objekttypen um
• ReturnType, Parameters, Awaited leiten Typen aus Funktionen ab
• typeof und keyof leiten Typen aus Werten und Schlüsseln ab
• Mapped Types ([K in keyof T]) und bedingte Typen (T extends U ? X : Y) bauen eigene Hilfstypen
• satisfies prüft gegen einen Typ, ohne den genauen Typ zu verlieren

interface Nutzer {
  id: number;
  name: string;
  email: string;
  alter?: number;
}

10. Module und die tsconfig.json

• Module: import/export; import type für reine Typen
• tsconfig.json steuert den Compiler; strict: true immer einschalten
• tsc --noEmit prüft nur; Bundler (Vite, esbuild) übersetzen schnell
• Migration schrittweise: allowJs, // @ts-check, dann Dateien umbenennen
• isolatedModules und skipLibCheck sind gängige Empfehlungen

// typen.ts
export interface Nutzer { id: number; name: string }
export type Rolle = "admin" | "nutzer";
export const standardRolle: Rolle = "nutzer";

// dienst.ts
import { type Nutzer, standardRolle } from "./typen.js";
import type { Rolle } from "./typen.js";      // reiner Typ-Import: wird komplett entfernt

export function neuerNutzer(name: string): Nutzer & { rolle: Rolle } {
  return { id: Date.now(), name, rolle: standardRolle };
}

11. Asynchroner Code und Laufzeitprüfung

• async-Funktionen liefern Promise<T>; Promise.all behält Tupel-Typen
• catch (e): e ist unknown, erst mit instanceof prüfen
• Typen existieren nur zur Entwicklungszeit: Daten von außen zur Laufzeit validieren
• JSON.parse und response.json() liefern any: über unknown und Type Guards oder Zod prüfen
• Mit as zu behaupten ersetzt keine Prüfung

interface Nutzer { id: number; name: string }

function hole(id: number): Promise<Nutzer> {
  return new Promise((resolve, reject) => {
    setTimeout(() => (id > 0 ? resolve({ id, name: "Nutzer " + id }) : reject(new Error("ungültig"))), 10);
  });
}

async function main(): Promise<void> {
  const n = await hole(1);                 // n: Nutzer
  console.log(n.name);
  try {
    await hole(-1);
  } catch (e) {
    console.log(e instanceof Error ? e.message : "unbekannt");
  }
  const alle = await Promise.all([hole(1), hole(2)]);   // [Nutzer, Nutzer]
  console.log(alle.map((x) => x.id));
}
main();

12. TypeScript im Browser und in Node.js

• Für den Browser braucht die tsconfig.json die Bibliothek DOM
• querySelector kann null liefern: prüfen oder mit Hilfsfunktion absichern
• Ereignisse sind typisiert: MouseEvent, KeyboardEvent, SubmitEvent
• Node.js: @types/node installieren; node:-Importe nutzen
• .d.ts-Dateien ergänzen fehlende globale Typen

const knopf = document.querySelector("button");            // HTMLButtonElement | null
const feld = document.querySelector<HTMLInputElement>("#name");   // Typ angeben

knopf?.addEventListener("click", (ereignis) => {            // ereignis: MouseEvent
  console.log(ereignis.clientX, feld?.value);
});

const liste = document.getElementById("liste");             // HTMLElement | null
if (liste) {
  const li = document.createElement("li");
  li.textContent = "Neuer Eintrag";
  liste.append(li);
}

13. Typen für Bibliotheken und Deklarationsdateien

• Pakete bringen Typen mit oder haben @types/<paket>
• .d.ts-Dateien beschreiben Typen ohne Code (declare)
• import type für reine Typ-Importe; Module lassen sich erweitern
• Fehlermeldungen von unten nach oben lesen
• as, !, @ts-ignore und any sind Notausgänge, @ts-expect-error ist besser als ignore

// mathe-lib.d.ts
declare module "mathe-lib" {
  export function addiere(a: number, b: number): number;
  export const PI: number;
  export interface Optionen { runden?: boolean }
  export default function rechne(ausdruck: string, optionen?: Optionen): number;
}

14. Gute TypeScript-Praxis

• Immer strict, unknown statt any, Daten von außen validieren
• Zustände als Unions modellieren: unmögliche Zustände unmöglich machen
• Branded Types verhindern verwechselte IDs
• Reine Funktionen und unveränderliche Daten sind gut zu typisieren
• Werkzeuge: tsc --noEmit, typescript-eslint, Prettier, Tests

interface AnfrageSchlecht {
  laedt: boolean;
  daten?: string[];
  fehler?: string;          // laedt true UND fehler gesetzt? Was gilt?
}

15. Nachschlagen: Spickzettel

type Alias = string | number;
interface Form { name: string; flaeche(): number }
interface Kreis extends Form { radius: number }
class Hund implements Form { /* ... */ name = ""; flaeche() { return 0; } }
abstract class Basis { abstract m(): void }
enum Farbe { Rot, Gruen }
const obj = { a: 1 } as const;
function f<T extends object>(x: T): T { return x; }
declare const global: string;
export type { Alias };
export default f;