Opérateur ternaire dans TypeScript

1. Opérateurs TypeScript
2. Utiliser l’opérateur ternaire dans TypeScript
3. Implémenter des conditions imbriquées avec l’opérateur ternaire dans TypeScript

Dans cet article, nous présenterons brièvement les différents opérateurs de TypeScript et discuterons des opérateurs ternaires et de leur utilisation.

Opérateurs TypeScript

Les applications logicielles sont conçues pour fonctionner avec des données. Par conséquent, ils ont conçu un moyen d’effectuer différentes opérations sur ces données.

Chaque opération fonctionne avec une ou plusieurs valeurs de données et génère un résultat final. Ces opérations peuvent être divisées en plusieurs groupes.

Opérandes et opérateurs dans TypeScript

Habituellement, un opérateur opère sur au moins une valeur de données appelée opérande. Par exemple, dans l’expression 500 + 200, les valeurs 500 et 200 sont deux opérandes, et le + est l’opérateur.

Plusieurs opérateurs peuvent être vus dans TypeScript. Ceux-ci peuvent être divisés en groupes en fonction de la nature de l’opération de chaque opérateur, telle que arithmétique, logique, binaire, relationnelle, etc.

De plus, ces opérateurs peuvent être regroupés en fonction du nombre d’opérandes attendus par chaque opérateur. L’opérateur binaire a deux opérandes, comme illustré ci-dessous.

Exemple:

x * y
20 / 2

L’opérateur unaire ne prend qu’un seul opérande.

Exemple:

x++
y--

Le langage TypeScript prend en charge un opérateur ternaire qui opère sur trois opérandes ; c’est le format raccourci de la syntaxe if...else. Nous l’appelons l’opérateur conditionnel TypeScript.

Utiliser l’opérateur ternaire dans TypeScript

L’opérateur conditionnel TypeScript prend trois opérandes. Le premier est la condition à évaluer; il peut être identifié comme la partie if() dans la syntaxe habituelle if...else.

Les deux opérandes suivants sont les deux expressions à exécuter en fonction des résultats de la condition évaluée. Ainsi, le second opérande est l’expression à exécuter lorsque la condition est évaluée à true.

Sinon, la troisième expression d’opérande est renvoyée.

Syntaxe:

<your_condition> ? <expression_A> : <expression_B>

Où:

1. <your_condition> est la condition à évaluer. C’est une expression booléenne qui renvoie soit true soit false.
2. <expression_A> est l’expression à retourner lorsque la condition est true.
3. <expression_B> est l’expression à retourner lorsque la condition est false.

L’opérateur conditionnel est le seul opérateur ternaire disponible dans le langage TypeScript.

Écrivons un code TypeScript pour vérifier l’âge de l’utilisateur, qui renverra un message basé sur cela. Tout d’abord, nous allons écrire la logique conditionnelle en utilisant des if...else ordinaires.

const MAX_ALLOWED_AGE = 18;
let userAge = 15;
let finalMessage = '';

if( userAge >= MAX_ALLOWED_AGE ) {
    finalMessage = 'You are allowed to this site';
} else {
    finalMessage = 'Get Back!!'
}

console.log(finalMessage);

Production:

La même logique peut être écrite de manière plus compacte en utilisant l’opérateur ternaire.

const MAX_ALLOWED_AGE = 18;
let userAge = 15;
let finalMessage = userAge >= MAX_ALLOWED_AGE ? 'You are allowed to this site' : 'Get Back!!';

console.log(finalMessage);

Vous obtiendrez la même sortie que dans la logique if...else ci-dessus. C’est moins de lignes que la syntaxe if...else et c’est plus propre.

Implémenter des conditions imbriquées avec l’opérateur ternaire dans TypeScript

L’opérateur ternaire n’est pas limité à une seule condition. Il prend également en charge plusieurs conditions.

Regardons la logique conditionnelle imbriquée if...else, comme illustré ci-dessous.

let studentMark = 68;
const GRADE_A_MARK = 75;
const GRADE_B_MARK = 61;
let finalMessage = '';

if( studentMark >= GRADE_A_MARK ) {
    finalMessage = 'Great work!';
} else if(studentMark >= 61 && studentMark < 75) {
    finalMessage = 'Good work!';
} else {
    finalMessage = 'Study more!!!';
}

console.log(finalMessage);

Production:

Écrivons les conditions imbriquées ci-dessus en utilisant l’opérateur ternaire.

let studentMark = 68;
const GRADE_A_MARK = 75;
const GRADE_B_MARK = 61;
let finalMessage = studentMark >= GRADE_A_MARK ? 'Great work!' : studentMark >= 61 && studentMark < 75 ? 'Good work!' : 'Study more!!!';

console.log(finalMessage);

Si vous transpilez le code TypeScript ci-dessus et que vous l’exécutez à l’aide de node, vous obtiendrez le même résultat que dans le scénario if...else ci-dessus.

Il est recommandé d’utiliser un opérateur conditionnel dans votre code. C’est une expression d’une ligne qui rend votre code plus propre.