Operador ternario en TypeScript

1. Operadores de TypeScript
2. Usar el operador ternario en TypeScript
3. Implementar condiciones anidadas con el operador ternario en TypeScript

En este artículo, presentaremos brevemente los diferentes operadores en TypeScript y discutiremos los operadores ternarios y cómo usarlos.

Operadores de TypeScript

Las aplicaciones de software están destinadas a trabajar con datos. Por lo tanto, han diseñado una forma de realizar diferentes operaciones sobre estos datos.

Cada operación trabaja con uno o más valores de datos y genera un resultado final. Estas operaciones se pueden dividir en varios grupos.

Operandos y Operadores en TypeScript

Por lo general, un operador opera en al menos un valor de datos llamado operando. Por ejemplo, en la expresión 500 + 200, los valores 500 y 200 son dos operandos, y + es el operador.

Se pueden ver varios operadores en TypeScript. Estos se pueden dividir en grupos según la naturaleza de la operación de cada operador, como aritmético, lógico, bit a bit, relacional, etc.

Además, estos operadores se pueden agrupar según la cantidad de operandos que espera cada operador. El operador binario tiene dos operandos, como se muestra a continuación.

Ejemplo:

x * y
20 / 2

El operador unario toma solo un operando.

Ejemplo:

x++
y--

El lenguaje TypeScript admite un operador ternario que opera en tres operandos; es el formato abreviado de la sintaxis if...else. Lo llamamos el operador condicional de TypeScript.

Usar el operador ternario en TypeScript

El operador condicional de TypeScript toma tres operandos. El primero es la condición a evaluar; se puede identificar como la parte if() en la sintaxis habitual de if...else.

Los siguientes dos operandos son las dos expresiones que se ejecutarán en función de los resultados de la condición evaluada. Por lo tanto, el segundo operando es la expresión que se ejecutará cuando la condición se evalúe como true.

De lo contrario, se devuelve la expresión del tercer operando.

Sintaxis:

<your_condition> ? <expression_A> : <expression_B>

Dónde:

1. <your_condition> es la condición a evaluar. Es una expresión booleana que devuelve true o false.
2. <expresión_A> es la expresión que se devolverá cuando la condición sea true.
3. <expresión_B> es la expresión que se devolverá cuando la condición sea false.

El operador condicional es el único operador ternario disponible en el lenguaje TypeScript.

Escribamos un código TypeScript para verificar la edad del usuario, que devolverá un mensaje basado en eso. Primero, escribiremos la lógica condicional usando el ordinario if...else.

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

Producción:

La misma lógica se puede escribir de manera más compacta usando el operador ternario.

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

Obtendrá el mismo resultado que en la lógica if...else anterior. Son menos líneas que la sintaxis if...else y es más limpia.

Implementar condiciones anidadas con el operador ternario en TypeScript

El operador ternario no se limita a una sola condición. También es compatible con múltiples condiciones.

Veamos la lógica condicional anidada if...else, como se muestra a continuación.

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

Producción:

Escribamos las condiciones anidadas anteriores usando el operador ternario.

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 transpila el código TypeScript anterior y lo ejecuta usando el nodo, obtendrá el mismo resultado que en el escenario anterior if...else.

Se recomienda utilizar un operador condicional en su código. Es una expresión de una línea que hace que su código sea más limpio.