Heim Web-Frontend js-Tutorial Warum sind Type Guards notwendig? Erkundung verschiedener Typen und ihrer Anwendungsfälle

Warum sind Type Guards notwendig? Erkundung verschiedener Typen und ihrer Anwendungsfälle

Nov 11, 2024 pm 07:39 PM

Why Are Type Guards Necessary? Exploring Different Types and Their Use Cases

Warum sind Type Guards notwendig? Erkundung verschiedener Typen und ihrer Anwendungsfälle

In TypeScript spielen Type Guards eine wesentliche Rolle dabei, die Codebasis zuverlässiger und entwicklerfreundlicher zu machen. Sie tragen zur Gewährleistung der Typsicherheit bei, indem sie es Entwicklern ermöglichen, Typen einzugrenzen, was bei Laufzeitfehlern hilft und den Code leichter verständlich und wartungsfreundlicher macht.

Was sind Type Guards?

Typwächter sind Ausdrücke oder Funktionen, die Laufzeitprüfungen für Typen durchführen und sicherstellen, dass Werte bestimmte Kriterien erfüllen, bevor sie weiterverarbeitet werden. Sie tragen zur Aufrechterhaltung der Typsicherheit bei und ermöglichen Entwicklern einen angemessenen Umgang mit Werten.

Warum sind Type Guards notwendig?

In JavaScript stößt man häufig auf Werte, die mehrere Typen haben können, etwa eine Funktion, die entweder eine Zeichenfolge oder eine Zahl zurückgibt. Ohne Typwächter wäre TypeScript nicht in der Lage, den genauen Typ zu bestimmen, was zu potenziellen Laufzeitfehlern und falschem Verhalten führen würde. Mit Typwächtern können Sie den Typ eines Werts zur Laufzeit überprüfen und so TypeScript dabei helfen, Typen einzugrenzen und eine genauere Typprüfung bereitzustellen.

Gängige Arten von Type Guards und ihre Anwendungsfälle

1. Art der Type Guards

Anwendungsfall: Grundlegende Typprüfung für primitive Typen.
Beispiel:

1

2

3

4

5

6

7

function printValue(value: string | number) {

  if (typeof value === "string") {

    console.log(`String value: ${value.toUpperCase()}`);

  } else {

    console.log(`Number value: ${value.toFixed(2)}`);

  }

}

Nach dem Login kopieren

Erklärung: typeof ist bei primitiven Typen (String, Zahl, Boolescher Wert) wirksam. Dadurch kann die Funktion Zeichenfolgen- und Zahlentypen unterschiedlich verarbeiten.

2. Benutzerdefinierte Type Guards (ist Schlüsselwort)

Anwendungsfall: Für komplexe Logik, Überprüfung benutzerdefinierter Formen oder Schnittstellen.

Beispiel:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

interface Square {

   side: number;

 }

 interface Circle {

   radius: number;

 }

 

 function isSquare(shape: Square | Circle): shape is Square {

   return (shape as Square).side !== undefined;

 }

 

 function calculateArea(shape: Square | Circle) {

   if (isSquare(shape)) {

     return shape.side * shape.side;

   } else {

     return Math.PI * shape.radius * shape.radius;

   }

 }

Nach dem Login kopieren

Erläuterung: Mit benutzerdefinierten Typwächtern können Sie Funktionen definieren, die bestimmte Attribute überprüfen, um den Typ zu bestimmen. Hier prüft isSquare das Vorhandensein der Nebeneigenschaft.

3. in Operator Type Guards

Anwendungsfall: Überprüfen, ob ein Objekt eine bestimmte Eigenschaft hat.
Beispiel:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

interface Car {

   drive(): void;

 }

 interface Boat {

   sail(): void;

 }

 

 function move(vehicle: Car | Boat) {

   if ("drive" in vehicle) {

     vehicle.drive();

   } else {

     vehicle.sail();

   }

 }

Nach dem Login kopieren

Erklärung: Der in-Operator prüft, ob eine Eigenschaft vorhanden ist, hilft TypeScript, den Typ zu verstehen und ermöglicht den Zugriff auf die relevanten Methoden.

Fazit

Type Guards sind eine leistungsstarke Funktion in TypeScript, die eine präzise Typprüfung ermöglicht, Fehler reduziert und die Lesbarkeit und Wartbarkeit des Codes verbessert. Durch die Nutzung von „typeof“, „instanceof“, benutzerdefinierten Typschutzvorrichtungen und dem „in“-Operator können Sie komplexe Typen in TypeScript-Projekten sicher und effektiv verarbeiten.

Das obige ist der detaillierte Inhalt vonWarum sind Type Guards notwendig? Erkundung verschiedener Typen und ihrer Anwendungsfälle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ersetzen Sie Stringzeichen in JavaScript Ersetzen Sie Stringzeichen in JavaScript Mar 11, 2025 am 12:07 AM

Ersetzen Sie Stringzeichen in JavaScript

JQuery Get Element Polsterung/Rand JQuery Get Element Polsterung/Rand Mar 01, 2025 am 08:53 AM

JQuery Get Element Polsterung/Rand

JQuery überprüfen, ob das Datum gültig ist JQuery überprüfen, ob das Datum gültig ist Mar 01, 2025 am 08:51 AM

JQuery überprüfen, ob das Datum gültig ist

10 JQuery Accords Registerkarten 10 JQuery Accords Registerkarten Mar 01, 2025 am 01:34 AM

10 JQuery Accords Registerkarten

10 lohnt 10 lohnt Mar 01, 2025 am 01:29 AM

10 lohnt

HTTP-Debugging mit Knoten und HTTP-Konsole HTTP-Debugging mit Knoten und HTTP-Konsole Mar 01, 2025 am 01:37 AM

HTTP-Debugging mit Knoten und HTTP-Konsole

Benutzerdefinierte Google -Search -API -Setup -Tutorial Benutzerdefinierte Google -Search -API -Setup -Tutorial Mar 04, 2025 am 01:06 AM

Benutzerdefinierte Google -Search -API -Setup -Tutorial

JQuery fügen Sie Scrollbar zu Div hinzu JQuery fügen Sie Scrollbar zu Div hinzu Mar 01, 2025 am 01:30 AM

JQuery fügen Sie Scrollbar zu Div hinzu

See all articles