Comment créer des types conditionnels dans TypeScript ?

Dans TypeScript, nous devons définir des types pour chaque variable et objet car il s'agit d'un type de langage strict et contient également des types conditionnels.

À partir du type de condition de mot, nous pouvons prédire que nous devons sélectionner une variable en fonction d'une condition spécifique. Oui, vous avez bien entendu. Tout comme nous utilisons des instructions if-else pour exécuter un bloc de code spécifique en fonction de conditions spécifiques, nous pouvons également sélectionner le type d'une variable en fonction de conditions spécifiques.

Dans ce tutoriel, nous apprendrons à créer des types conditionnels en TypeScript.

Grammaire

Les utilisateurs peuvent créer des types conditionnels dans TypeScript selon la syntaxe suivante.

first_type extends second_type ? true_type : false_type;

Nous utilisons l'opérateur ternaire dans la syntaxe ci-dessus pour créer des types conditionnels.

Explication des opérandes

• First_type - C'est un type ou une variable.

• Second_type - C'est un type comme un nombre, une chaîne, un booléen, etc.

• True_type - Si first_type contient second_type, true_type sera attribué à la variable.

• False_type - Si first_type n'étend pas second_type, false_type sera attribué à la variable.

Nous allons maintenant examiner différents exemples pour en savoir plus sur les types conditionnels dans TypeScript.

Exemple

Dans l'exemple ci-dessous, nous définissons deux interfaces. Dans TypeScript, une interface fonctionne également de la même manière qu'un alias de type dans la mesure où elle définit la structure d'un objet ou d'une classe.

Après cela, nous avons étendu l'interface2 avec l'interface1. Cela signifie que interface2 contient toutes les propriétés de interface1. Après cela, nous attribuons le type de condition aux alias type1 et type2 à l'aide de l'opérateur ternaire.

Dans la sortie, l'utilisateur peut vérifier le type des variables var1 et var2.

// 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);

Une fois compilé, il générera le code JavaScript suivant -

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);

Sortie

Le code ci-dessus produira la sortie suivante -

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

Nous avons appris les bases des types conditionnels et comment les créer.

Pourquoi utiliser des types conditionnels ?

Nous apprendrons pourquoi et comment les types conditionnels sont utiles dans le développement du monde réel.

Jetons un coup d'œil au code ci-dessous, dans lequel nous surchargeons la fonction func1() en modifiant son type de retour en fonction des types de paramètres. On peut observer que si le type du paramètre est booléen, le type de retour est une chaîne. De plus, si les types de paramètres sont chaîne et nombre, les types de retour sont respectivement nombre et booléen.

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
}

Nous pouvons surcharger la fonction en créant le type conditionnel avec une définition sur une ligne au lieu d'écrire plusieurs définitions dans la fonction.

Exemple

Dans l'exemple ci-dessous, nous avons créé un type de condition appelé test_type. Il obtient la valeur et renvoie le type en fonction du type de valeur. Si le type de la valeur est un nombre, il renvoie une valeur booléenne ; pour une valeur de chaîne, il renvoie un nombre et pour une valeur booléenne, il renvoie le type de chaîne.

Dans la sortie, nous pouvons observer la variable obtenue à partir de test_type et le type de variable abc.

// 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);

Une fois compilé, il générera le code JavaScript suivant :

// 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);

Sortie

Le code ci-dessus produira la sortie suivante -

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

Depuis que nous avons utilisé des types conditionnels pour les variables, nous pouvons les utiliser pour les paramètres de fonction ou les types de retour.

Les utilisateurs de ce didacticiel ont appris à créer des types conditionnels qui nous permettent de sélectionner une variable spécifique en fonction du type ou de la valeur d'une autre variable. De plus, nous avons appris à utiliser les types conditionnels pour les paramètres de fonction et les types de retour.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!