Mejores prácticas para la lógica condicional en TypeScript

Este artículo explica las mejores prácticas para la lógica condicional en TypeScript.

YouTube Video

Mejores prácticas para la lógica condicional en TypeScript

Reducción de tipos con guardianes de tipo

Al aprovechar el sistema de tipos de TypeScript y usar guardianes de tipo dentro de sentencias if, puedes mejorar la seguridad de tipos y la legibilidad.

1function processInput(input: string | number) {
2    if (typeof input === "string") {
3        console.log(`String input: ${input.toUpperCase()}`);
4    } else {
5        console.log(`Number input: ${input.toFixed(2)}`);
6    }
7}

Usar typeof y otros guardianes de tipo asegura que el código dentro de cada bloque sea seguro en términos de tipo y relevante al contexto.

Evitar sentencias if anidadas

Las sentencias if profundamente anidadas reducen la legibilidad y mantenibilidad del código. En su lugar, utiliza retornos anticipados, operadores lógicos o funciones extractoras.

Ejemplo incorrecto:

1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2    if (user.age) {
3        if (user.age > 18) {
4            if (user.isAdmin) {
5                console.log("User is an adult admin.");
6            }
7        }
8    }
9}

Ejemplo mejorado:

1function checkUser(user: { age?: number; isAdmin?: boolean }) {
2    if (!user.age || user.age <= 18 || !user.isAdmin) {
3        return;
4    }
5    console.log("User is an adult admin.");
6}

Este enfoque aplana el código y hace que la lógica sea más comprensible.

Utiliza el encadenamiento opcional

Al verificar propiedades anidadas, utiliza el encadenamiento opcional (?.) para evitar condiciones if innecesarias.

Sin encadenamiento opcional:

1if (user && user.profile && user.profile.email) {
2    console.log(user.profile.email);
3}

Usando encadenamiento opcional:

1if (user?.profile?.email) {
2    console.log(user.profile.email);
3}

Esto reduce el código repetitivo y mejora la legibilidad. Aquí, el código repetitivo se refiere al código estándar y repetitivo que se requiere frecuentemente para realizar tareas específicas en programación.

Usa operadores de igualdad estricta

TypeScript soporta el tipado estricto, y usar igualdad estricta (===) o desigualdad estricta (!==) ayuda a prevenir conversiones de tipos inesperadas.

Ejemplo incorrecto:

1if (value == "123") {
2    console.log("Value is 123.");
3}

Ejemplo mejorado:

1if (value === "123") {
2    console.log("Value is 123.");
3}

Usa enums o tipos literales para condiciones explícitas

Usar enums o tipos literales aclara las condiciones y reduce las posibilidades de errores.

 1type Status = "success" | "error" | "loading";
 2
 3function displayMessage(status: Status) {
 4    if (status === "success") {
 5        console.log("Operation succeeded.");
 6    } else if (status === "error") {
 7        console.log("Operation failed.");
 8    } else {
 9        console.log("Loading...");
10    }
11}

Al definir valores esperados, TypeScript puede detectar tipos y garantizar la precisión.

Combina condiciones similares

Cuando múltiples condiciones comparten la misma lógica, consólidalas utilizando operadores lógicos o una declaración switch.

Ejemplo incorrecto:

1if (role === "admin") {
2    grantAccess();
3}
4if (role === "superadmin") {
5    grantAccess();
6}

Ejemplo mejorado:

1if (role === "admin" || role === "superadmin") {
2    grantAccess();
3}

Alternativamente, utiliza una declaración switch para manejar múltiples ramas claras:

 1switch (role) {
 2    case "admin":
 3    case "superadmin":
 4        grantAccess();
 5        break;
 6    case "user":
 7        console.log("Limited access.");
 8        break;
 9    default:
10        console.log("No access.");
11}

Evita hacer complejas las expresiones condicionales

Las expresiones condicionales complejas en declaraciones if reducen la legibilidad. Extráelas en variables o funciones significativas.

Ejemplo incorrecto:

1if (user.age > 18 && user.isAdmin && user.permissions.includes("write")) {
2    console.log("User can write.");
3}

Ejemplo mejorado:

1const isAdultAdminWithWriteAccess = user.age > 18 && user.isAdmin && user.permissions.includes("write");
2if (isAdultAdminWithWriteAccess) {
3    console.log("User can write.");
4}

Nombrar las condiciones mejora la claridad y hace que el código se explique por sí mismo.

Utiliza operadores ternarios para condiciones simples

Para condiciones simples, el uso de operadores ternarios hace que el código sea más conciso.

Ejemplo:

1const message = isLoggedIn ? "Welcome back!" : "Please log in.";
2console.log(message);

Sin embargo, evita usar operadores ternarios para condiciones complejas, ya que reduce la legibilidad.

Conclusión

Siguiendo estas mejores prácticas, puedes hacer que las declaraciones if en TypeScript sean claras, eficientes y fáciles de mantener. Aprovecha las características de TypeScript como los guardianes de tipos, el encadenamiento opcional y los enums para mejorar la legibilidad y robustez de tu código. Mantén las condiciones concisas y claras, buscando que el código siempre sea fácil de entender y mantener.

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