ƒFunktionstypen

Parameter bekommen Typen, der Rückgabetyp wird meist abgeleitet. Bei Callbacks übernimmt TypeScript den Typ aus dem Kontext (contextual typing): plus braucht keine eigenen Annotationen.

TypeScript · Maus über Namennur lesen

type Rechner = (a: number, b: number) => number;
const plus: Rechner = (a, b) => a + b;
function wiederhole(text: string, mal = 2, trenner?: string): string {
  return Array(mal).fill(text).join(trenner ?? " ");
}
function summe(...zahlen: number[]) {
  return zahlen.reduce((s, n) => s + n, 0);
}
const ergebnis = summe(1, 2, 3);

type Rechner = (a: number, b: number) => number;
const plus: Rechner = (a, b) => a + b;
function wiederhole(text: string, mal = 2, trenner?: string): string {
  return Array(mal).fill(text).join(trenner ?? " ");
}
function summe(...zahlen: number[]) {
  return zahlen.reduce((s, n) => s + n, 0);
}
const ergebnis = summe(1, 2, 3);

Vom Compiler abgeleitet

Zeile 2a:…
Zeile 3mal:…
Zeile 3trenner:…
Zeile 9ergebnis:…

🔀Overloads

Mehrere Signaturen für eine Implementierung: Der Aufrufer sieht nur die Overload-Signaturen, der Compiler wählt die erste passende – und damit den genauen Rückgabetyp.

TypeScript · Maus über Namennur lesen

function parse(eingabe: string): number;
function parse(eingabe: string[]): number[];
function parse(eingabe: string | string[]): number | number[] {
  return Array.isArray(eingabe) ? eingabe.map(Number) : Number(eingabe);
}
const eins = parse("42");
const viele = parse(["1", "2"]);

function parse(eingabe: string): number;
function parse(eingabe: string[]): number[];
function parse(eingabe: string | string[]): number | number[] {
  return Array.isArray(eingabe) ? eingabe.map(Number) : Number(eingabe);
}
const eins = parse("42");
const viele = parse(["1", "2"]);

Vom Compiler abgeleitet

Zeile 6eins:…
Zeile 7viele:…

✅ Tipp

Oft reicht statt Overloads eine Union im Parameter oder ein generischer Typ. Overloads lohnen sich, wenn der Rückgabetyp vom Argumenttyp abhängt.

🏛️Klassen und Zugriffsmodifikatoren

Klassen sind in TypeScript normale JavaScript-Klassen plus Typen. Achten Sie auf die rechte Seite: Was davon gibt es zur Laufzeit wirklich?

Die Modifikatoren prüft nur der Compiler (zwei Fehler in der letzten Zeile). Im JavaScript stehen alle drei Felder ganz normal – private schützt zur Laufzeit nicht.

TypeScript · bearbeitbar, Maus über Namen zeigt Typen

class Konto {
  public inhaber: string;
  protected stand = 0;
  private pin = "0000";
  constructor(inhaber: string) {
    this.inhaber = inhaber;
  }
}
class Sparkonto extends Konto {
  zinsen() {
    return this.stand * 0.02;
  }
}
const k = new Sparkonto("Ada");
console.log(k.inhaber, k.stand, k.pin);

JavaScript (erzeugt von tsc) · …nur lesen

// wird kompiliert …

// wird kompiliert …

🔢Enums vs. Union von Literalen

Vier Wege zu einer Liste erlaubter Werte – und wie viel JavaScript jeder erzeugt.

enum…

enum Richtung {
  Hoch,
  Runter,
}
const r = Richtung.Hoch;
console.log(Richtung[0]);

enum Richtung {
  Hoch,
  Runter,
}
const r = Richtung.Hoch;
console.log(Richtung[0]);

…

…

Ein numerisches enum erzeugt ein echtes Objekt – sogar mit Rückwärts-Zuordnung (Richtung[0] === "Hoch"). Das ist Laufzeit-Code, den Node.js' Type Stripping nicht kann.

const enum…

const enum Richtung {
  Hoch,
  Runter,
}
const r = Richtung.Runter;

const enum Richtung {
  Hoch,
  Runter,
}
const r = Richtung.Runter;

…

…

const enum wird beim Kompilieren eingesetzt (1 /* Richtung.Runter */) – kein Objekt zur Laufzeit. Funktioniert aber nicht mit Werkzeugen, die Dateien einzeln übersetzen (isolatedModules).

Union von Literalen…

type Richtung = "hoch" | "runter";
const r: Richtung = "hoch";

type Richtung = "hoch" | "runter";
const r: Richtung = "hoch";

…

…

Der Typ verschwindet vollständig. Werte sind lesbare Strings, Tippfehler meldet der Compiler trotzdem. In modernem TypeScript meist die erste Wahl.

as const-Objekt…

const Richtung = {
  Hoch: "hoch",
  Runter: "runter",
} as const;
type Richtung = (typeof Richtung)[keyof typeof Richtung];
const r: Richtung = Richtung.Hoch;

const Richtung = {
  Hoch: "hoch",
  Runter: "runter",
} as const;
type Richtung = (typeof Richtung)[keyof typeof Richtung];
const r: Richtung = Richtung.Hoch;

…

…

Wer ein Laufzeit-Objekt und einen Typ möchte: as const + abgeleiteter Typ. Nur „löschbare“ Syntax – funktioniert mit erasableSyntaxOnly.

✅satisfies, Annotation oder as?

Drei Arten, einem Objekt einen Typ zu geben – mit sehr unterschiedlichen Folgen für den Typ von config.port.

Annotation : Konfig

type Konfig = Record<string, string | number>;
const config: Konfig = { host: "example.org", port: 8080 };
const port = config.port;

type Konfig = Record<string, string | number>;
const config: Konfig = { host: "example.org", port: 8080 };
const port = config.port;

Typ von port: …

Die Variable ist jetzt eine Konfig: Geprüft wird zwar, aber das Wissen über die konkreten Werte geht verloren – port ist nur noch string | number.

satisfies Konfig

type Konfig = Record<string, string | number>;
const config = { host: "example.org", port: 8080 } satisfies Konfig;
const port = config.port;

type Konfig = Record<string, string | number>;
const config = { host: "example.org", port: 8080 } satisfies Konfig;
const port = config.port;

Typ von port: …

Geprüft wird gegen Konfig, aber der Wert behält seinen eigenen, genauen Typ: port ist number. Das Beste aus beiden Welten (seit TypeScript 4.9).

as Konfig

type Konfig = Record<string, string | number>;
const config = { host: "example.org" } as Konfig;
const port = config.port;

type Konfig = Record<string, string | number>;
const config = { host: "example.org" } as Konfig;
const port = config.port;

Typ von port: …

as ist eine Behauptung, keine Prüfung: Der Compiler glaubt uns, obwohl port fehlt. Zur Laufzeit ist port hier undefined – der Typ sagt etwas anderes.

satisfies mit Fehler

type Konfig = Record<string, string | number>;
const config = { host: "example.org", port: true } satisfies Konfig;
const port = config.port;

type Konfig = Record<string, string | number>;
const config = { host: "example.org", port: true } satisfies Konfig;
const port = config.port;

Typ von port: …

satisfies meldet den falschen Wert sofort – true ist weder string noch number.

🧊as const

as const macht aus Literalen die engsten Typen: Strings bleiben Literal-Typen, Arrays werden zu schreibgeschützten Tupeln, Objekte zu readonly. Ideal, um aus Daten Typen abzuleiten.

TypeScript · bearbeitbar, Maus über Namen zeigt Typen

const STUFEN = ["klein", "mittel", "gross"] as const;
type Stufe = (typeof STUFEN)[number];

const KONFIG = {
  modus: "hell",
  sprachen: ["de", "en"],
} as const;

function setze(s: Stufe) {}
setze("mittel");
setze("riesig");
KONFIG.modus = "dunkel";

JavaScript (erzeugt von tsc) · …nur lesen

// wird kompiliert …

// wird kompiliert …