Wie erstelle ich bedingte Typen in TypeScript?

In TypeScript müssen wir Typen für jede Variable und jedes Objekt definieren, da es sich um einen strengen Sprachtyp handelt und auch bedingte Typen enthält.

Anhand des Wortbedingungstyps können wir vorhersagen, dass wir eine Variable basierend auf einer bestimmten Bedingung auswählen müssen. Ja, Sie haben es richtig gehört. So wie wir if-else-Anweisungen verwenden, um einen bestimmten Codeblock basierend auf bestimmten Bedingungen auszuführen, können wir auch den Typ einer Variablen basierend auf bestimmten Bedingungen auswählen.

In diesem Tutorial lernen wir, bedingte Typen in TypeScript zu erstellen.

Grammatik

Benutzer können in TypeScript bedingte Typen gemäß der folgenden Syntax erstellen.

first_type extends second_type ? true_type : false_type;

Wir verwenden den ternären Operator in der obigen Syntax, um bedingte Typen zu erstellen.

Erklärung der Operanden

• First_type – Es ist ein Typ oder eine Variable.

• Second_type – Es ist ein Typ wie Zahl, Zeichenfolge, Boolescher Wert usw.

• True_type – Wenn first_type second_type enthält, wird true_type der Variablen zugewiesen.

• False_type – Wenn first_type second_type nicht erweitert, wird false_type der Variablen zugewiesen.

Jetzt schauen wir uns verschiedene Beispiele an, um mehr über bedingte Typen in TypeScript zu erfahren.

Beispiel

Im folgenden Beispiel definieren wir zwei Schnittstellen. In TypeScript funktioniert eine Schnittstelle auch genauso wie ein Typalias, indem sie die Struktur eines Objekts oder einer Klasse definiert.

Danach haben wir Schnittstelle2 um Schnittstelle1 erweitert. Das bedeutet, dass Schnittstelle2 alle Eigenschaften von Schnittstelle1 enthält. Danach weisen wir den Bedingungstyp mithilfe des ternären Operators den Aliasen Typ1 und Typ2 zu.

In der Ausgabe kann der Benutzer den Typ der Variablen var1 und var2 überprüfen.

// Creating the first interface
interface interface1 {
   prop1?: string;
   prop2: boolean;
}

// creating the second interface and extending it with the interface1
interface interface2 extends interface1 {
   prop3?: number;
   prop4: boolean;
}

// type of the type1 is number as interface2 extends interface1
type type1 = interface2 extends interface1 ? number : string;
let var1: type1 = 20;

// type of the type2 is string as interface1 doesn't extends the interface2
type type2 = interface1 extends interface2 ? number : string;
let var2: type2 = "Hello";

console.log("The type of var1 variable is " + typeof var1);
console.log("The type of var2 variable is " + typeof var2);

Beim Kompilieren wird der folgende JavaScript-Code generiert:

var var1 = 20;
var var2 = "Hello";
console.log("The type of var1 variable is " + typeof var1);
console.log("The type of var2 variable is " + typeof var2);

Ausgabe

Der obige Code erzeugt die folgende Ausgabe -

The type of var1 variable is number
The type of var2 variable is string

Wir haben die Grundlagen bedingter Typen und deren Erstellung kennengelernt.

Warum bedingte Typen verwenden?

Wir erfahren, warum und wie bedingte Typen in der realen Entwicklung nützlich sind.

Schauen wir uns den folgenden Code an, in dem wir die Funktion func1() überladen, indem wir ihren Rückgabetyp basierend auf den Parametertypen ändern. Wir können beobachten, dass der Rückgabetyp ein String ist, wenn der Parametertyp boolesch ist. Wenn es sich bei den Parametertypen außerdem um eine Zeichenfolge und eine Zahl handelt, sind die Rückgabetypen jeweils eine Zahl und ein boolescher Wert.

function func1(param1: boolean): string;
function func1(param1: string): number;
function func1(param1: number): boolean;
function func1(param1: any): any {
   // function body of the overloaded function
}

Wir können die Funktion überladen, indem wir den bedingten Typ mit einer Definition in einer Zeile erstellen, anstatt mehrere Definitionen in die Funktion zu schreiben.

Beispiel

Im folgenden Beispiel haben wir einen Bedingungstyp namens test_type erstellt. Es ruft den Wert ab und gibt den Typ basierend auf dem Werttyp zurück. Wenn der Werttyp eine Zahl ist, wird ein boolescher Wert zurückgegeben. Bei einem Zeichenfolgenwert wird eine Zahl zurückgegeben, bei einem booleschen Wert wird der Zeichenfolgentyp zurückgegeben.

In der Ausgabe können wir die aus test_type erhaltene Variable und den Typ der abc-Variablen beobachten.

// creating the conditional type
// it will accept the number, string, and boolean values
type test_type<T extends number | string | boolean> = T extends number
  ? boolean
  : T extends string
  ? number
  : string;
// getting the type of abc variable based on the value from the conditional test_type
let abc: test_type<"hello"> = 20;
console.log("The type of the variable abc is " + typeof abc);

let variable: test_type<typeof abc> = false;
console.log("The type of the variable is " + typeof variable);

Beim Kompilieren wird der folgende JavaScript-Code generiert:

// getting the type of abc variable based on the value from the conditional test_type
var abc = 20;
console.log("The type of the variable abc is " + typeof abc);
var variable = false;
console.log("The type of the variable is " + typeof variable);

Ausgabe

Der obige Code erzeugt die folgende Ausgabe -

The type of the variable abc is number
The type of the variable is boolean

Da wir bedingte Typen für Variablen verwendet haben, können wir sie für Funktionsparameter oder Rückgabetypen verwenden.

Benutzer in diesem Tutorial haben gelernt, wie man bedingte Typen erstellt, die es uns ermöglichen, eine bestimmte Variable basierend auf dem Typ oder Wert einer anderen Variablen auszuwählen. Darüber hinaus haben wir gelernt, wie man bedingte Typen für Funktionsparameter und Rückgabetypen verwendet.

Das obige ist der detaillierte Inhalt vonWie erstelle ich bedingte Typen in TypeScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!