Antwort.

Historie der Frage

Im JavaScript wird der Operator typeof verwendet, um den Typ von primitiven Werten zur Laufzeit zu überprüfen. TypeScript erweitert diesen Mechanismus und macht ihn zu einem Teil des Typverengungsmechanismus (type narrowing) durch Typüberprüfungen (type guards). TypeScript verwendet das Ergebnis des Operators typeof, um den Typ einer Variablen innerhalb eines Codeblocks zu präzisieren, was es ermöglicht, die Logik der Funktion genauer zu beschreiben, insbesondere beim Arbeiten mit Union-Typen.

Problem

Im regulären JavaScript kann nach der Typüberprüfung eines Wertes mit typeof keine Typgarantie bestehen – der Programmierer muss sich daran erinnern, was an welchem Punkt des Codes passiert. In TypeScript wird die Aufgabe komplizierter durch das Vorhandensein verschiedener Typen und Union-Typen, und ohne korrektes Verengen der Typen kann leicht ein Fehler gemacht werden, z. B. beim Zugriff auf eine nicht vorhandene Methode. Außerdem gibt es spezifische Einschränkungen des Operators: Er "sieht" nur grundlegende primitive Typen, z. B. gibt er für Arrays und Objekte 'object' zurück.

Lösung

TypeScript ermöglicht das Kombinieren des Operators typeof mit eigener Typanalyse, um den Typ einer Variablen innerhalb eines Codeblocks zu verengen. Dies erhöht automatisch die Sicherheit – der Compiler weiß, mit welchem Typ der Code arbeitet, und schlägt mögliche Eigenschaften und Methoden vor.

Beispielcode:

function printId(id: number | string) {
  if (typeof id === 'string') {
    // In diesem Zweig id: string
    console.log(id.toUpperCase());
  } else {
    // In diesem Zweig id: number
    console.log(id.toFixed(2));
  }
}

Schlüsselfunktionen:

• Arbeitet nur mit Primitiven: 'string', 'number', 'boolean', 'symbol', 'undefined', 'object', 'function', 'bigint'.
• Hilft TypeScript, den Union-Typ auf einen bestimmten Primärtpy innerhalb des Codeblocks zu verengen.
• Unterscheidet nicht zwischen Arrays und Objekten, gibt immer 'object' zurück.

Fangfragen.

Kann der Operator typeof ein Array identifizieren?

Nein, typeof gibt für Array und Objekt den gleichen Wert zurück — 'object'. Um Arrays zu unterscheiden, sollte die Methode Array.isArray() verwendet werden.

Beispielcode:

const arr = [1, 2, 3];
console.log(typeof arr); // 'object'
console.log(Array.isArray(arr)); // true

Kann man mit typeof zwischen null und objekt unterscheiden?

Nein, typeof null gibt 'object' zurück, das ist eine historische Eigenheit von JavaScript.

Beispielcode:

console.log(typeof null); // 'object'

Kann man mit typeof eine benutzerdefinierte Klasse überprüfen?

Nein, für Instanzen von Klassen gibt typeof ebenfalls 'object' zurück. Dazu verwendet man den Operator instanceof oder benutzerdefinierte type guard-Funktionen.

Beispielcode:

class User {}
const u = new User();
console.log(typeof u); // 'object'
console.log(u instanceof User); // true

Typfehler und Anti-Pattern

• Verwendung von typeof zur Überprüfung komplexer Datenstrukturen (z. B. Arrays, null, Objekte).
• Missachtung des Einsatzes von instanceof und Array.isArray() für genauere Typverengungen.
• Überprüfung von Typen nur zur Laufzeit, während die statische Überprüfung ignoriert wird.

Beispiel aus dem Leben

Negativer Fall

Ein Programmierer schrieb eine Funktion, in der er überprüfen wollte, ob value ein Array ist, und je nach Ergebnis unterschiedliche Methoden aufruft.

Vorteile:

• Einfach geschriebener Code.
• Erfordert keine zusätzlichen Funktionen.

Nachteile:

• Die Funktion bricht bei Übergabe eines Arrays: Das Array wird als Objekt wahrgenommen, Laufzeitfehler.

Positiver Fall

Verwendung von Array.isArray und Kombination mit type guard.

Vorteile:

• Sichere statische Typisierung.
• Keine Fehler bei der Typunterscheidung von Objekten und Arrays.

Nachteile:

• Man muss sich an verschiedene type guard-Tools erinnern.