TypeScript: Por Qué Deberías Usarlo en Tus Proyectos

¿Qué es TypeScript?

TypeScript es un superset de JavaScript desarrollado por Microsoft que añade tipado estático opcional al lenguaje. Esto significa que todo el código JavaScript válido es también código TypeScript válido.

Ventajas de TypeScript

1. Detección Temprana de Errores

El compilador de TypeScript detecta errores en tiempo de desarrollo, antes de que el código se ejecute:

function sumar(a: number, b: number): number {
  return a + b;
}

// Error: El argumento de tipo 'string' no se puede asignar al parámetro de tipo 'number'
sumar(5, "10");

2. Mejor Autocompletado y IntelliSense

Los editores modernos como VS Code proporcionan sugerencias inteligentes basadas en los tipos:

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

const usuario: Usuario = {
  nombre: "Juan",
  email: "juan@example.com",
  edad: 30
};

// El editor sugiere las propiedades disponibles
usuario. // ← nombre, email, edad

3. Refactorización Más Segura

Cambiar nombres o mover código es más seguro porque TypeScript avisa de todas las referencias:

// Puedes renombrar 'calcularTotal' con confianza
function calcularTotal(precio: number, cantidad: number): number {
  return precio * cantidad;
}

4. Documentación Integrada

Los tipos sirven como documentación autoexplicativa:

/**
 * Obtiene información del usuario desde la API
 * @param id - ID del usuario
 * @returns Promesa con los datos del usuario
 */
async function obtenerUsuario(id: string): Promise<Usuario> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

Conceptos Básicos

Tipos Primitivos

let nombre: string = "Sebastián";
let edad: number = 25;
let esActivo: boolean = true;
let valores: number[] = [1, 2, 3, 4, 5];

Interfaces

interface Producto {
  id: number;
  nombre: string;
  precio: number;
  enStock: boolean;
  categorias?: string[]; // Propiedad opcional
}

const laptop: Producto = {
  id: 1,
  nombre: "Laptop Pro",
  precio: 1200,
  enStock: true
};

Tipos Union

type Estado = "pendiente" | "procesando" | "completado" | "error";

function procesarOrden(estado: Estado) {
  switch(estado) {
    case "pendiente":
      console.log("Orden pendiente");
      break;
    case "procesando":
      console.log("Procesando orden");
      break;
    // etc...
  }
}

Generics

function primero<T>(array: T[]): T | undefined {
  return array[0];
}

const numeros = [1, 2, 3];
const letras = ["a", "b", "c"];

const primerNumero = primero(numeros); // tipo: number | undefined
const primeraLetra = primero(letras);  // tipo: string | undefined

TypeScript en React

import React, { useState } from 'react';

interface Props {
  titulo: string;
  descripcion?: string;
}

const Tarjeta: React.FC<Props> = ({ titulo, descripcion }) => {
  const [contador, setContador] = useState<number>(0);

  return (
    <div>
      <h2>{titulo}</h2>
      {descripcion && <p>{descripcion}</p>}
      <button onClick={() => setContador(contador + 1)}>
        Clicks: {contador}
      </button>
    </div>
  );
};

export default Tarjeta;

Configuración Básica

Archivo tsconfig.json recomendado:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Mejores Prácticas

1. Usa strict Mode

Habilita todas las comprobaciones estrictas en tsconfig.json:

{
  "compilerOptions": {
    "strict": true
  }
}

2. Evita any

El tipo any elimina los beneficios de TypeScript. Usa unknown si no conoces el tipo:

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

// ✅ Bueno
function procesar(data: unknown) {
  if (typeof data === 'object' && data !== null && 'value' in data) {
    return (data as { value: string }).value;
  }
  throw new Error("Formato inválido");
}

3. Define Tipos Reutilizables

// types.ts
export type ID = string | number;

export interface ApiResponse<T> {
  data: T;
  error: string | null;
  status: number;
}

export type EstadoPedido = "pendiente" | "enviado" | "entregado";

4. Usa Type Guards

function esString(valor: unknown): valor is string {
  return typeof valor === 'string';
}

function procesarValor(valor: unknown) {
  if (esString(valor)) {
    // TypeScript sabe que valor es string aquí
    console.log(valor.toUpperCase());
  }
}

Migración Gradual

Si tienes un proyecto JavaScript existente:

1. Renombra archivos .js a .ts gradualmente
2. Empieza con "strict": false en tsconfig.json
3. Añade tipos poco a poco
4. Habilita opciones estrictas progresivamente

Herramientas y Recursos

• Playground: typescriptlang.org/play
• Documentación: typescriptlang.org/docs
• DefinitelyTyped: Tipos para librerías JavaScript
• ts-node: Ejecuta TypeScript directamente en Node.js

Conclusión

TypeScript mejora significativamente la experiencia de desarrollo al proporcionar:

• ✅ Mayor seguridad en el código
• ✅ Mejor experiencia en el editor
• ✅ Refactorización más confiable
• ✅ Documentación integrada
• ✅ Escalabilidad para proyectos grandes

La curva de aprendizaje inicial vale la pena por los beneficios a largo plazo. Si trabajas en equipo o en proyectos de mediana a gran escala, TypeScript es prácticamente imprescindible.

¿Ya usas TypeScript? ¿Qué es lo que más te gusta (o te frustra) de él? ¡Comparte tu experiencia!