Clean Code en TypeScript: principios y ejemplos para desarrolladores

Clean Code en TypeScript: principios y ejemplos

En el desarrollo web moderno, TypeScript se ha convertido en el estándar de facto para crear aplicaciones grandes y robustas. Sin embargo, TypeScript por sí solo no garantiza la calidad del código. Para que un proyecto se mantenga flexible, comprensible y fácil de mantener, es necesario seguir los principios de Clean Code. En este artículo, analizaremos los conceptos principales del código limpio en TypeScript con ejemplos prácticos. Aprenderás a escribir código que no solo complazca al compilador, sino también a tus colegas.

¿Por qué es importante Clean Code para TypeScript?

TypeScript añade tipado estático a JavaScript, lo que ya ayuda a evitar muchos errores. Pero los tipos son solo una herramienta. Sin una arquitectura bien pensada y un estilo legible, el código igualmente se convierte en un "espagueti". Clean Code es una filosofía que hace que el código sea:

• Legible — cualquier desarrollador entenderá rápidamente la lógica.
• Mantenible — los cambios en un lugar no rompen toda la aplicación.
• Escalable — añadir nuevas funciones no requiere reescribir la mitad del proyecto.

Aplicar estos principios en TypeScript permite aprovechar al máximo el poder del sistema de tipos, creando código autodocumentado.

Principio 1: Nombrado de variables y funciones

Un buen nombre es la mitad del éxito. El nombre debe responder a las preguntas "¿qué?" y "¿para qué?", no "¿cómo?". Evita las variables de una sola letra y las abreviaciones que solo tú entiendes.

Ejemplo incorrecto:

// ¿Qué es d? ¿E y?const d = new Date();const y = d.getFullYear();const fn = (a: number, b: number) => a + b;

Ejemplo correcto:

const currentDate = new Date();const currentYear = currentDate.getFullYear();

const sum = (firstNumber: number, secondNumber: number): number => {    return firstNumber + secondNumber;};

Consejo: Usa nombres con significado. Para valores booleanos, emplea prefijos como is, has, should. Por ejemplo: isActive, hasPermission.

Principio 2: Las funciones deben ser pequeñas y hacer una sola cosa

Una función no debe encargarse de varias tareas al mismo tiempo. Si una función hace más de una acción, es hora de dividirla. Esto mejora la reutilización y simplifica las pruebas.

Ejemplo incorrecto (la función lo hace todo de una vez):

function processUserData(user: any) {    // Validación    if (!user.email || !user.name) {        throw new Error('Invalid user');    }    // Formateo    const formattedUser = {        fullName: user.name.toUpperCase(),        emailDomain: user.email.split('@')[1]    };    // Guardado en BD    database.save(formattedUser);    // Envío de correo    emailService.sendWelcomeEmail(formattedUser);}

Ejemplo correcto (separación de responsabilidades):

function validateUser(user: User): void {    if (!user.email || !user.name) {        throw new Error('Invalid user data');    }}

function formatUser(user: User): FormattedUser {    return {        fullName: user.name.toUpperCase(),        emailDomain: user.email.split('@')[1]    };}

async function processUserData(user: User): Promise<void> {    validateUser(user);    const formattedUser = formatUser(user);    await database.save(formattedUser);    await emailService.sendWelcomeEmail(formattedUser);}

Cada función tiene ahora un objetivo claro y es fácil probarlas por separado.

Principio 3: Usa tipos e interfaces para autodocumentar

TypeScript ofrece herramientas potentes para describir datos. No abuses del tipo any — anula todo el beneficio del tipado estático. Define una interfaz