Introducción a TypeScript - Desarrollo JavaScript con Seguridad de Tipos

Lo que Aprenderás en Este Tutorial

✓ Tipos básicos de TypeScript
✓ Cómo funciona la inferencia de tipos
✓ Interfaces y type aliases
✓ Union types y literal types
✓ Fundamentos de generics
✓ Patrones prácticos de definición de tipos

Prerrequisitos

• Conocimiento básico de JavaScript
• Node.js instalado

Configuración del Proyecto

# Crear directorio del proyecto
mkdir typescript-tutorial
cd typescript-tutorial

# Crear package.json
npm init -y

# Instalar TypeScript
npm install -D typescript ts-node @types/node

# Crear tsconfig.json
npx tsc --init

Configuración de tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

Paso 1: Tipos Básicos

Tipos Primitivos

// src/01-primitives.ts

// String
let nombre: string = "Juan";
let saludo: string = `Hola, ${nombre}`;

// Number
let edad: number = 25;
let precio: number = 1980.5;
let hex: number = 0xff;

// Boolean
let estaActivo: boolean = true;
let tienePermiso: boolean = false;

// null y undefined
let nada: null = null;
let noDefinido: undefined = undefined;

// any (desactiva verificación de tipos - evita cuando sea posible)
let cualquierCosa: any = "string";
cualquierCosa = 123;
cualquierCosa = true;

// unknown (más seguro que any)
let valorDesconocido: unknown = "hola";
// valorDesconocido.toUpperCase(); // Error
if (typeof valorDesconocido === "string") {
  valorDesconocido.toUpperCase(); // OK
}

Arrays y Tuplas

// Arrays
let numeros: number[] = [1, 2, 3, 4, 5];
let nombres: string[] = ["Alice", "Bob", "Charlie"];

// Notación genérica
let valores: Array<number> = [10, 20, 30];

// Tuplas (arrays de longitud y tipo fijos)
let tupla: [string, number] = ["edad", 25];
let rgb: [number, number, number] = [255, 128, 0];

// Tuplas etiquetadas
let usuario: [nombre: string, edad: number] = ["Juan", 30];

// Arrays readonly
let numerosReadonly: readonly number[] = [1, 2, 3];
// numerosReadonly.push(4); // Error

Paso 2: Tipos de Función

Tipos Básicos de Función

// Tipos de parámetros y retorno
function sumar(a: number, b: number): number {
  return a + b;
}

// Arrow functions
const multiplicar = (a: number, b: number): number => a * b;

// Parámetros opcionales
function saludar(nombre: string, saludo?: string): string {
  return `${saludo || "Hola"}, ${nombre}!`;
}

// Rest parameters
function suma(...numeros: number[]): number {
  return numeros.reduce((acc, curr) => acc + curr, 0);
}

console.log(suma(1, 2, 3, 4, 5)); // 15

Paso 3: Type Aliases e Interfaces

Type Aliases (type)

// Type aliases básicos
type ID = string | number;
type Punto = { x: number; y: number };

// Union types
type Estado = "pendiente" | "aprobado" | "rechazado";

let usuarioId: ID = "user_123";
let pedidoId: ID = 456;
let estadoActual: Estado = "pendiente";

// Intersection types
type ConNombre = { nombre: string };
type ConEdad = { edad: number };
type Persona = ConNombre & ConEdad;

const persona: Persona = {
  nombre: "Juan",
  edad: 30
};

Interfaces

// Interface básica
interface Usuario {
  id: number;
  nombre: string;
  email: string;
  edad?: number; // Opcional
  readonly creadoEn: Date; // Readonly
}

const usuario: Usuario = {
  id: 1,
  nombre: "Alice",
  email: "alice@ejemplo.com",
  creadoEn: new Date()
};

// Herencia de interface
interface Empleado extends Usuario {
  departamento: string;
  salario: number;
}

Paso 4: Generics

Generics Básicos

// Función genérica
function identidad<T>(valor: T): T {
  return valor;
}

const str = identidad<string>("hola");
const num = identidad(42); // Inferencia de tipo: number

// Función genérica con arrays
function primero<T>(arr: T[]): T | undefined {
  return arr[0];
}

const primerNumero = primero([1, 2, 3]); // number | undefined

Interfaces Genéricas

// Tipo de respuesta de API
interface RespuestaApi<T> {
  datos: T;
  estado: number;
  mensaje: string;
}

interface Usuario {
  id: number;
  nombre: string;
}

const respuestaUsuario: RespuestaApi<Usuario> = {
  datos: { id: 1, nombre: "Alice" },
  estado: 200,
  mensaje: "Éxito"
};

Paso 5: Utility Types

Utility Types Incorporados

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

// Partial - hace todo opcional
type UsuarioParcial = Partial<Usuario>;
const datosActualizacion: UsuarioParcial = { nombre: "Nuevo Nombre" };

// Pick - selecciona propiedades específicas
type UsuarioBasico = Pick<Usuario, "id" | "nombre">;

// Omit - excluye propiedades específicas
type UsuarioSinEmail = Omit<Usuario, "email">;

// Readonly - hace todo readonly
type UsuarioReadonly = Readonly<Usuario>;

Resumen

Al aprovechar el sistema de tipos de TypeScript, puedes detectar errores en tiempo de compilación y escribir código más seguro. Comienza con tipos básicos y avanza hasta dominar generics y utility types.