So verwenden Sie TypeScript-Typbehauptungen

Typbehauptungen in TypeScript sind eine Möglichkeit, dem Compiler mitzuteilen, dass Sie mehr über den Typ eines Werts wissen als er. Dies kann hilfreich sein, wenn Sie mit Werten arbeiten, die unsichere oder breite Typen haben und diese für eine bessere Typprüfung und Lesbarkeit des Codes eingrenzen möchten. In diesem Artikel erfahren Sie, wie Sie TypeScript-Typbehauptungen effektiv einsetzen können.

Was ist Typbehauptung?

Die Typbehauptung ist ein Mechanismus in TypeScript, mit dem Sie die vom TypeScript-Compiler vorgenommene Standardtypinferenz überschreiben können. Der tatsächliche Laufzeittyp wird dadurch nicht geändert, aber der Compiler kann den Typ einer Variablen zum Zwecke der Typprüfung besser verstehen. Typbehauptungen ähneln der Typumwandlung in anderen Sprachen wie C# oder Java, haben jedoch keine Auswirkungen auf die Laufzeit.

Syntax von Typzusicherungen

Es gibt zwei Möglichkeiten, Typbehauptungen in TypeScript zu verwenden:

• Verwenden des Schlüsselworts as (empfohlen)
• Verwenden von spitzen Klammern <>

Verwenden des Schlüsselworts as

Typbehauptungen werden am häufigsten mit dem Schlüsselwort as verwendet:

let someValue: unknown = "Hello, TypeScript!";
let strLength: number = (someValue as string).length;

console.log(strLength); // Output: 17

In diesem Beispiel teilen wir TypeScript mit, dass someValue vom Typ string ist, wodurch wir die Eigenschaft length verwenden können.

Verwenden von spitzen Klammern <>

Die alternative Syntax für Typzusicherungen verwendet spitze Klammern:

let someValue: unknown = "Hello, TypeScript!";
let strLength: number = (someValue).length;

console.log(strLength); // Output: 17

Diese Syntax erzielt dasselbe Ergebnis wie die Syntax as. Sie wird jedoch nicht in Umgebungen empfohlen, in denen JSX (wie React) verwendet wird, da sie mit der Syntax für JSX-Elemente in Konflikt steht.

Gängige Anwendungsfälle für Typbehauptungen

Typbehauptungen werden häufig in mehreren Szenarien verwendet:

• Beim Arbeiten mit dem Typ unknown
• Beim Umgang mit DOM-Elementen
• Bei der Eingrenzung von Union-Typen
• Bei der Interaktion mit Drittanbieterbibliotheken, denen Typdefinitionen fehlen

Beispiel: Zusicherung von Typen mit dem Typ unknown

Der Typ unknown ist nützlich, wenn Sie jeden beliebigen Typ akzeptieren möchten, aber vor der Verwendung dennoch eine Typprüfung durchführen müssen. Typbehauptungen helfen dabei, den Typ einzugrenzen:

function getLength(value: unknown): number {
  if (typeof value === "string") {
    return (value as string).length;
  } else if (Array.isArray(value)) {
    return (value as any[]).length;
  }
  return 0;
}

console.log(getLength("Hello")); // Output: 5
console.log(getLength([1, 2, 3])); // Output: 3
console.log(getLength(42)); // Output: 0

In diesem Beispiel verwenden wir Typbehauptungen, um TypeScript mitzuteilen, dass value ein string oder ein any[]-Array ist.

Beispiel: Umgang mit DOM-Elementen

Bei der Manipulation des DOM muss TypeScript den spezifischen Typ eines Elements kennen, um entsprechende Eigenschaften und Methoden bereitstellen zu können. Typzusicherungen sind hier hilfreich:

const inputElement = document.getElementById("user-input") as HTMLInputElement;
inputElement.value = "Hello, TypeScript!";

Hier verwenden wir die Typbehauptung, um TypeScript mitzuteilen, dass inputElement ein HTMLInputElement ist, wodurch wir direkt auf die Eigenschaft value zugreifen können.

Typzusicherung vs. Typumwandlung

Es ist wichtig, den Unterschied zwischen Typbehauptung und Typumwandlung zu verstehen. In TypeScript ändern Typbehauptungen den tatsächlichen Typ zur Laufzeit nicht; sie sagen dem TypeScript-Compiler nur, wie der Typ zur Kompilierzeit zu behandeln ist. Im Gegensatz dazu kann die Typumwandlung in anderen Sprachen wie C# oder Java die Konvertierung eines Werts von einem Typ in einen anderen zur Laufzeit beinhalten, was sich auf Leistung und Verhalten auswirken kann.

Vorsichtsmaßnahmen bei der Verwendung von Typzusicherungen

Obwohl Typbehauptungen leistungsstark sein können, kann ein Missbrauch zu Laufzeitfehlern führen. Hier sind einige Tipps für die sichere Verwendung:

• Vermeiden Sie die Verwendung von Assertionen, um inkompatible Typen zwangsweise zu konvertieren.
• Gehen Sie bei Behauptungen immer mit Vorsicht vor und schränken Sie Typen vorzugsweise mithilfe der Typwächter von TypeScript ein.
• Verwenden Sie Behauptungen, wenn Sie sich über den Typ sicher sind und wenn eine Eingrenzung anderweitig nicht möglich ist.

Beispiel für eine falsche Typbehauptung

Hier ist ein Beispiel für eine gefährliche Typbehauptung:

let someValue: string = "Hello, TypeScript!";
let numValue: number = (someValue as unknown as number); // Dangerous!

console.log(numValue); // Output: Hello, TypeScript! (incorrect)

Dieser Code wird ohne Fehler kompiliert, führt jedoch zur Laufzeit zu unerwartetem Verhalten, da die Zeichenfolge fälschlicherweise als Zahl behandelt wird.

Abschluss

Typbehauptungen in TypeScript bieten eine Möglichkeit, die abgeleiteten Typen zu überschreiben, wenn Sie mehr über den Typ eines Werts wissen als TypeScript. Sie sind nützlich, wenn Sie mit unsicheren Typen arbeiten, mit Bibliotheken von Drittanbietern interagieren oder mit DOM-Elementen arbeiten. Sie sollten jedoch mit Vorsicht verwendet werden, um Laufzeitfehler zu vermeiden und die Typensicherheit in Ihrem Code sicherzustellen.

Durch die Beherrschung von Typbehauptungen können Sie ausdrucksstärkeren und robusteren TypeScript-Code schreiben. Üben Sie deren Verwendung in verschiedenen Szenarien, um mit dieser leistungsstarken Funktion vertrauter zu werden.