Declaraciones condicionales en TypeScript

En este artículo, explicaremos las declaraciones condicionales en TypeScript.

YouTube Video

Declaraciones If en TypeScript

En TypeScript, una declaración if realiza una bifurcación que ejecuta el código si una condición especificada es true y no lo ejecuta si la condición es false. La declaración if tiene la misma sintaxis que en JavaScript y utiliza la seguridad de tipos de TypeScript para realizar bifurcaciones condicionales.

Sintaxis Básica

La sintaxis básica de la declaración if es la siguiente.

1if (condition) {
2    // Code to execute if the condition is true
3} else if (anotherCondition) {
4    // Code to execute if the first condition is false
5    // and the another condition is true
6} else {
7    // Code to execute if all conditions are false
8}

• Si condition es true, se ejecuta el código en el bloque siguiente.
• Si condition es false y anotherCondition es true, se ejecuta el código en el bloque siguiente.
• Si ninguna de las condiciones es true, se ejecuta el código en el bloque final else.

Ejemplo 1: Declaración básica if-else

En el siguiente ejemplo, verifica si la variable x es 10 o mayor y muestra el resultado.

1let x: number = 15;
2
3if (x >= 10) {
4    console.log("x is 10 or greater");
5} else {
6    console.log("x is less than 10");
7}
8// Outputs: x is 10 or greater

Ejemplo 2: Declaración if-else if-else

Para verificar múltiples condiciones, usa else if para agregar ramas.

 1let score: number = 85;
 2
 3if (score >= 90) {
 4    console.log("Excellent");
 5} else if (score >= 70) {
 6    console.log("Passed");
 7} else {
 8    console.log("Failed");
 9}
10// Outputs: Passed

Ejemplo 3: Declaración if con verificación de tipos

También es posible realizar bifurcaciones condicionales para tipos específicos utilizando la característica de verificación de tipos de TypeScript. Por ejemplo, verifica el tipo de una variable con el operador typeof y realiza el procesamiento apropiado.

 1let value: any = "Hello";
 2
 3if (typeof value === "string") {
 4    console.log("The value is a string: " + value);
 5} else if (typeof value === "number") {
 6    console.log("The value is a number: " + value);
 7} else {
 8    console.log("The value is of another type");
 9}
10// Outputs: "The value is a string: Hello"

Ejemplo 4: Declaraciones if anidadas

También puedes anidar declaraciones if para verificar condiciones complejas.

 1let age: number = 25;
 2let isMember: boolean = true;
 3
 4if (age >= 18) {
 5    if (isMember) {
 6        console.log("You are a member and 18 years old or older");
 7    } else {
 8        console.log("You are not a member but 18 years old or older");
 9    }
10} else {
11    console.log("You are under 18 years old");
12}
13// Output
14// You are a member and 18 years old or older

Operador ternario (operador condicional)

Sintaxis

1condition ? valueIfTrue : valueIfFalse

Si deseas escribir una declaración if de manera más concisa, puedes usar el operador ternario.

Ejemplo

1const number: number = 7;
2const result: string = number % 2 === 0 ? "Even" : "Odd";
3console.log(result); // "Odd"

En este caso, como number es 7, se mostrará Odd.

Resumen

• La declaración if es una estructura de control fundamental para determinar qué procesamiento ejecutar en función de las condiciones.
• Puedes manejar múltiples condiciones utilizando else if.
• Al usar typeof, puedes aprovechar los tipos de TypeScript para las bifurcaciones condicionales.
• El manejo de condiciones complejas es posible con declaraciones if anidadas.
• También puedes usar el operador ternario para escribir ramas condicionales de manera concisa.

En TypeScript, el uso de declaraciones if teniendo en cuenta la seguridad de tipos puede mejorar la fiabilidad del código.

Declaraciones Switch en TypeScript

La declaración switch en TypeScript es una estructura de control utilizada para bifurcar código en función de múltiples condiciones. En lugar de usar declaraciones if-else if para evaluar múltiples condiciones, puedes usar una declaración switch para escribir de manera concisa la lógica de bifurcación basada en valores específicos.

Sintaxis Básica

 1switch (expressionToEvaluate) {
 2    case value1:
 3        // Code to execute if the expression evaluates to value1
 4        break;
 5    case value2:
 6        // Code to execute if the expression evaluates to value2
 7        break;
 8    default:
 9        // Code to execute if none of the conditions match
10}

En una declaración switch, si el valor especificado en un case coincide con la expresión evaluada, se ejecuta el bloque case. Tenga cuidado, si no hay un break, el siguiente bloque case se ejecutará consecutivamente. El bloque default se ejecuta si ninguna de las sentencias case coincide.

Ejemplo 1: Declaración básica de switch

En el ejemplo siguiente, se da un número que representa un día de la semana (del 0 al 6) y se muestra el nombre del día correspondiente según ese valor.

 1let day: number = 3;
 2
 3switch (day) {
 4    case 0:
 5        console.log("Sunday");
 6        break;
 7    case 1:
 8        console.log("Monday");
 9        break;
10    case 2:
11        console.log("Tuesday");
12        break;
13    case 3:
14        console.log("Wednesday");
15        break;
16    case 4:
17        console.log("Thursday");
18        break;
19    case 5:
20        console.log("Friday");
21        break;
22    case 6:
23        console.log("Saturday");
24        break;
25    default:
26        console.log("Invalid day");
27}
28// Outputs: Wednesday

Ejemplo 2: Ejemplo usando default

default es útil porque se ejecuta cuando ninguna de las sentencias case coincide, lo que le permite manejar valores inesperados.

 1let statusText: string = "pending";
 2
 3switch (statusText) {
 4    case "success":
 5        console.log("Operation succeeded");
 6        break;
 7    case "error":
 8        console.log("An error occurred");
 9        break;
10    case "pending":
11        console.log("Processing");
12        break;
13    default:
14        console.log("Unknown status");
15}
16// Outputs: Processing

Ejemplo 3: Ejecutar el mismo proceso para múltiples cases

Si desea realizar la misma acción para múltiples sentencias case, puede listarlas consecutivamente.

 1let fruit: string = "apple";
 2
 3switch (fruit) {
 4    case "apple":
 5    case "banana":
 6    case "orange":
 7        console.log("This is a fruit");
 8        break;
 9    default:
10        console.log("This is not a fruit");
11}
12// Outputs: This is a fruit

Ejemplo 4: Comportamiento cuando se omite el break

Omitir un break da como resultado un comportamiento de "fall-through" donde el siguiente case también es ejecutado.

 1let rank: number = 1;
 2
 3switch (rank) {
 4    case 1:
 5        console.log("Gold");
 6    case 2:
 7        console.log("Silver");
 8    case 3:
 9        console.log("Bronze");
10    default:
11        console.log("Not ranked");
12}
13// Outputs:
14// Gold
15// Silver
16// Bronze
17// Not ranked

De esta manera, después de que un case coincida, el siguiente case también se ejecuta, por lo que generalmente se usa un break para evitar caídas innecesarias.

Resumen

• La declaración switch es una estructura de control que le permite escribir una lógica de ramificación basada en múltiples condiciones de manera concisa.
• Cada case debe terminar explícitamente el proceso usando break.
• El bloque default se ejecuta si ninguno de los cases coincide.
• También es posible realizar la misma operación para múltiples cases.

La declaración switch en TypeScript es útil para manejar eficientemente múltiples condiciones mientras se mantiene la legibilidad del código.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video