TypeScript: Guía Completa para Principiantes

TypeScript es un superset de JavaScript desarrollado por Microsoft que añade tipado estático y otras características avanzadas. Si ya conoces JavaScript, TypeScript te ayudará a escribir código más seguro, mantenible y escalable. Esta guía te llevará desde los conceptos básicos hasta técnicas avanzadas.

¿Qué es TypeScript?

TypeScript es JavaScript con sintaxis para tipos. Fue creado para resolver problemas comunes en proyectos JavaScript grandes, como errores de tipo que solo se descubren en tiempo de ejecución. TypeScript se compila a JavaScript puro, por lo que funciona en cualquier entorno donde JavaScript funciona.

Ventajas de TypeScript

• Detección temprana de errores: Los errores de tipo se detectan durante el desarrollo, no en producción
• Mejor autocompletado: Los editores pueden ofrecer sugerencias más precisas
• Refactorización más segura: Cambiar código es más seguro con tipos explícitos
• Documentación implícita: Los tipos sirven como documentación del código
• Compatibilidad total: Cualquier código JavaScript válido es TypeScript válido

Instalación y Configuración

Para comenzar con TypeScript, primero necesitas instalarlo globalmente o en tu proyecto:

npm install -g typescript
# O localmente en tu proyecto
npm install --save-dev typescript

Luego, crea un archivo de configuración tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  }
}

Tipos Básicos

TypeScript ofrece varios tipos primitivos:

let nombre: string = "TechGuías";
let edad: number = 25;
let activo: boolean = true;
let datos: any = "cualquier cosa";
let id: string | number = "123"; // Union types

Interfaces y Tipos Personalizados

Las interfaces definen la estructura de objetos:

interface Usuario {
  nombre: string;
  email: string;
  edad?: number; // Propiedad opcional
}

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

Funciones Tipadas

Las funciones en TypeScript pueden tener tipos explícitos para parámetros y valores de retorno:

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

const multiplicar = (a: number, b: number): number => {
  return a * b;
};

Clases y Herencia

TypeScript mejora las clases de JavaScript con modificadores de acceso:

class Animal {
  private nombre: string;
  protected edad: number;
  public especie: string;

  constructor(nombre: string, edad: number, especie: string) {
    this.nombre = nombre;
    this.edad = edad;
    this.especie = especie;
  }
}

Genéricos

Los genéricos permiten crear componentes reutilizables:

function obtenerPrimero<T>(array: T[]): T {
  return array[0];
}

const numeros = [1, 2, 3];
const primero = obtenerPrimero(numeros); // Tipo: number

Conclusión

TypeScript es una herramienta poderosa que mejora significativamente la experiencia de desarrollo en JavaScript. Aunque requiere un poco más de código inicial, los beneficios en términos de seguridad, mantenibilidad y productividad son enormes, especialmente en proyectos grandes.

Comienza con los conceptos básicos y gradualmente incorpora características más avanzadas. La curva de aprendizaje es suave si ya conoces JavaScript, y los resultados valen la pena.