Skip to main content
Aliencito

TypeScript: Por Qué Lo Amo y Mejores Prácticas para Desarrollo Web

Posted on:  at 
How Do I
TypeScriptDesarrollo WebProgramaciónBest PracticesJavaScript
Picture

TypeScript se ha convertido en uno de los lenguajes más populares para desarrollo web moderno. Si aún no lo has probado, este artículo te ayudará a entender por qué deberías considerarlo para tus próximos proyectos.

¿Qué es TypeScript?

TypeScript es un superset de JavaScript desarrollado por Microsoft que añade tipado estático opcional. Básicamente, es JavaScript con tipos. El código TypeScript se compila a JavaScript puro, lo que significa que cualquier código JavaScript válido también es código TypeScript válido.

// JavaScript
function saludar(nombre) {
  return `Hola, ${nombre}!`;
}

// TypeScript
function saludar(nombre: string): string {
  return `Hola, ${nombre}!`;
}

¿Por Qué Usar TypeScript?

1. Detección Temprana de Errores

Una de las mayores ventajas de TypeScript es que detecta errores en tiempo de compilación, antes de que el código llegue a producción. Esto ahorra horas de depuración.

// Error detectado en tiempo de compilación
function calcularEdad(añoNacimiento: number): number {
  return new Date().getFullYear() - añoNacimiento;
}

// TypeScript detectará este error
calcularEdad("1990"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'

2. Mejor Autocompletado e IntelliSense

Los editores modernos como VS Code proporcionan excelente autocompletado cuando trabajas con TypeScript. Esto mejora significativamente la productividad.

interface Usuario {
  nombre: string;
  email: string;
  edad: number;
}

function mostrarUsuario(usuario: Usuario) {
  // Tu editor te sugerirá: usuario.nombre, usuario.email, usuario.edad
  console.log(usuario.nombre);
}

3. Refactorización Segura

Con TypeScript, puedes refactorizar código con confianza. Si cambias una interfaz o tipo, TypeScript te mostrará todos los lugares donde necesitas actualizar el código.

4. Mejor Documentación

Los tipos actúan como documentación viva del código. Cuando alguien lee tu código TypeScript, puede entender inmediatamente qué tipos de datos espera una función.

5. Compatibilidad con JavaScript

Puedes migrar gradualmente proyectos JavaScript existentes a TypeScript. No necesitas reescribir todo el código de una vez.

Mejores Prácticas que Uso en Mis Proyectos

1. Usar Interfaces para Objetos

Las interfaces son excelentes para definir la estructura de objetos. Son más flexibles que los tipos para objetos.

interface Producto {
  id: number;
  nombre: string;
  precio: number;
  descripcion?: string; // Propiedad opcional
}

function crearProducto(producto: Producto): Producto {
  return {
    id: producto.id,
    nombre: producto.nombre,
    precio: producto.precio,
    descripcion: producto.descripcion || "Sin descripción",
  };
}

2. Usar Tipos para Uniones y Aliases

Los tipos son mejores para uniones, intersecciones y aliases.

type Estado = "pendiente" | "en-proceso" | "completado";
type ID = string | number;

interface Tarea {
  id: ID;
  titulo: string;
  estado: Estado;
}

3. Evitar any (Cuando Sea Posible)

any desactiva la verificación de tipos. Úsalo solo cuando sea absolutamente necesario.

// ❌ Malo
function procesarDatos(data: any) {
  return data.value;
}

// ✅ Bueno
function procesarDatos<T>(data: { value: T }): T {
  return data.value;
}

4. Usar Genéricos para Reutilización

Los genéricos permiten crear componentes reutilizables que funcionan con múltiples tipos.

interface RespuestaAPI<T> {
  data: T;
  status: number;
  mensaje: string;
}

async function obtenerDatos<T>(url: string): Promise<RespuestaAPI<T>> {
  const respuesta = await fetch(url);
  return respuesta.json();
}

// Uso
const usuarios = await obtenerDatos<Usuario[]>("/api/usuarios");
const productos = await obtenerDatos<Producto[]>("/api/productos");

5. Tipar Correctamente los Eventos

En React o Next.js, asegúrate de tipar correctamente los eventos.

function manejarCambio(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event.target.value);
}

function manejarSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
  // Lógica del formulario
}

6. Usar const assertions para Literales

Las const assertions te permiten crear tipos más específicos.

const colores = ["rojo", "verde", "azul"] as const;
type Color = typeof colores[number]; // "rojo" | "verde" | "azul"

7. Validar Datos en los Límites

Valida los datos cuando ingresan a tu aplicación (APIs, formularios, etc.).

function validarUsuario(data: unknown): Usuario {
  if (
    typeof data === "object" &&
    data !== null &&
    "nombre" in data &&
    "email" in data
  ) {
    return data as Usuario;
  }
  throw new Error("Datos de usuario inválidos");
}

Configuración Recomendada de TypeScript

Aquí está mi configuración de tsconfig.json para proyectos Next.js:

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Integración con Next.js

Next.js tiene excelente soporte para TypeScript. Cuando creas un nuevo proyecto con TypeScript, Next.js configura todo automáticamente.

// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from "next";

type Data = {
  mensaje: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ mensaje: "Hola desde TypeScript!" });
}

Migración de JavaScript a TypeScript

Si tienes un proyecto JavaScript existente, puedes migrarlo gradualmente:

  1. Renombra archivos de .js a .ts o .tsx
  2. Habilita TypeScript en tu proyecto
  3. Configura allowJs: true en tsconfig.json
  4. Migra archivo por archivo, comenzando por los más simples
  5. Habilita strict: true gradualmente

Recursos Útiles

Conclusión

TypeScript puede parecer intimidante al principio, pero una vez que te acostumbras a él, es difícil volver a JavaScript puro. Los beneficios en términos de productividad, calidad del código y mantenibilidad son enormes.

Como mencioné en mi post anterior sobre el desarrollo de este portafolio: "Se dice que amarás TypeScript cuando te acostumbres a él" 😉

Si aún no has probado TypeScript, te animo a que lo hagas. Comienza con un proyecto pequeño y verás cómo mejora tu experiencia de desarrollo.

¿Tienes alguna pregunta sobre TypeScript o quieres compartir tus propias mejores prácticas? ¡Déjame saber en los comentarios!

Enlaces Relacionados

Share