Detaillierte Erklärung des Typschutzes in TypeScript

Überblick

Bei der Verwendung von Union-Typen in TypeScript kommt es häufig zu dieser unangenehmen Situation:

Schnittstelle Vogel {
  	// Eindeutige Methode fly();
  	// Öffentliche Methode layEggs();
}

Schnittstelle Fisch {
  	// Eindeutige Methode swim();
  	// Öffentliche Methode layEggs();
}

Funktion getSmallPet(): Fisch | Vogel {
    // ...
}

let pet = getSmallPet();
pet.layEggs(); // normal pet.swim(); // ts-Fehler

Wie oben gezeigt, kann die Funktion getSmallPet Objekte sowohl vom Typ „Fish“ als auch „Bird“ zurückgeben. Da der Typ des zurückgegebenen Objekts unsicher ist, funktioniert alles einwandfrei, wenn von Objekten des Typs Union gemeinsam genutzte Methoden verwendet werden. Bei der Verwendung von Methoden, die für jedes Objekt des Typs Union eindeutig sind, meldet ts jedoch einen Fehler.

Wie lässt sich dieses Problem also lösen? Die brutalste Methode besteht natürlich darin, den Union-Typ in einen beliebigen Typ umzuwandeln, aber diese Methode ist nicht empfehlenswert, da wir schließlich TypeScript und nicht AnyScript schreiben.

An dieser Stelle verwenden wir den heutigen Protagonisten – den Typenschutz, der ein glänzendes Debüt feiert und dieses Problem perfekt lösen kann.

Kong Yiji hat einmal gesagt, dass es vier Möglichkeiten gibt, Fenchelbohnen zu schreiben. Ebenso gibt es vier Möglichkeiten, Typschutz zu schreiben.

Typzusicherungen

Die am häufigsten verwendete Methode zum Typschutz ist die Typzusicherung, bei der der Typ direkt angegeben wird. Da die meisten in TypeScript erkannten Typen durch die automatische Typinferenz von TypeScript berechnet werden, tritt das oben genannte Problem auf, d. h. TypeScript weiß nicht, um welchen spezifischen Objekttyp es sich handelt, und ist sich daher nicht sicher, ob für jeden Union-Typ eindeutige Methoden vorhanden sind.

Wenn Sie Typbehauptungen verwenden, um Typen direkt anzugeben, entspricht dies dem Einschalten des God-Modus von TypeScript, sodass Sie direkt wissen, dass der spezifische Typ derjenige im Union-Typ ist. Zu diesem Zeitpunkt entspricht die Verwendung der eindeutigen Methode des Objekts der Inferenz von TypeScript.

Schnittstelle Vogel {
  // Eindeutige Methode fly();
  // Öffentliche Methode layEggs();
}

Schnittstelle Fisch {
  // Eindeutige Methode swim();
  // Öffentliche Methode layEggs();
}

Funktion getSmallPet(): Fisch | Vogel {
  // ...
}

let pet = getSmallPet();
pet.layEggs(); // Normal // Beurteile nach Entenart if ((pet as Bird).fly) {
  // Typzusicherung (pet als Vogel).fly()
} anders {
  // Typzusicherung (pet als Fish).swim()
}

Wenn Sie meinen, dass die Typzusicherung mittels as nicht ausgefeilt genug ist, können Sie auch die generische Methode zum Schreiben von Typen verwenden, und zwar:

let pet = getSmallPet();
pet.layEggs(); // Normal // Beurteile nach Entenart if ((<Bird>pet).fly) {
  (<Vogel>Haustier).fliegen()
} anders {
  (<Fisch>Haustier).schwimmen()
}

Tipps: Freundliche Erinnerung: Obwohl die Verwendung generischer Typschreibung für die Typbehauptung fortgeschrittener erscheint, wird aufgrund der grammatikalischen Mehrdeutigkeit in tsx aus Gründen der Einheitlichkeit empfohlen, die as-Methode für die Typbehauptung zu verwenden.

in der Syntax

In js verwenden wir häufig die In-Syntax, um zu bestimmen, ob eine angegebene Eigenschaft im angegebenen Objekt oder seiner Prototypenkette enthalten ist.

Auf ähnliche Weise können wir in TypeScript den Objekttyp bestätigen.

Schnittstelle Vogel {
  // Eindeutige Methode fly();
  // Öffentliche Methode layEggs();
}

Schnittstelle Fisch {
  // Eindeutige Methode swim();
  // Öffentliche Methode layEggs();
}

Funktion getSmallPet(): Fisch | Vogel {
  // ...
}

let pet = getSmallPet();
pet.layEggs(); // normal // in Syntax zum Schutz des Typs verwenden if ('fly' in pet) {
  Haustier.Fliege()
} anders {
  Haustier.schwimmen()
}

Das Prinzip ist dasselbe wie bei der Typbehauptung, die die TypeScript-Typinferenz leitet und den Objekttyp bestimmt.

Instanzsyntax

Wenn im Union-Typ eine Klasse statt einer Schnittstelle verwendet wird, ist die Instanceof-Syntax praktisch. Die Instanceof-Syntax kann verwendet werden, um verschiedene Klassentypen zu unterscheiden.

Klasse Vogel {
  // Eindeutige Methode fly() {};
  // Öffentliche Methode layEggs() {};
}

Klasse Fisch {
  // Eindeutige Methode swim() {};
  // Öffentliche Methode layEggs() {};
}

Funktion getSmallPet(): Fisch | Vogel {
  // ...
}

let pet = getSmallPet();
pet.layEggs(); // Normal // In der Syntax verwenden if (pet instanceof Bird) {
  Haustier.Fliege()
} anders {
  Haustier.schwimmen()
}

typeof-Syntax

Die typeof-Syntax unterscheidet sich von der in-Syntax und der instanceof-Syntax. Sowohl die in-Syntax als auch die instanceof-Syntax werden verwendet, um die Typinferenz zu leiten und verschiedene Objekttypinferenzen durchzuführen, während die typeof-Syntax häufig verwendet wird, um Basistypen abzuleiten (oder um Basistypen und Objekttypen in Kombination zu verwenden).

Kurz gesagt: Verwenden Sie typeof, wenn Sie zwischen den verschiedenen Typen in einem Union-Typ unterscheiden können.

Funktion getSmallPet(): Zahl | Zeichenfolge {
  // ...
}

let pet = getSmallPet();
wenn (Typ des Haustiers === 'Nummer') {
  Haustier++
} anders {
  Haustier = Zahl(Haustier) + 1
}

Zusammenfassen

So wie die Essenz der vier Schreibweisen von Fenchelbohnen immer noch Fenchelbohnen sind, ist auch die Essenz der vier Schreibweisen von Typschutz dieselbe, nämlich die Anleitung der Typinferenz in TypeScript, um die Multiple-Choice-Fragen der Typinferenz in Single-Choice-Fragen umzuwandeln, was die Essenz des Typschutzes ist.

Oben finden Sie eine ausführliche Erläuterung des Typschutzes in TypeScript. Weitere Informationen zum Typschutz in TypeScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!