TypeScript para Principiantes: Tutorial Completo

TypeScript es un superset de JavaScript que añade tipado estático opcional. En este tutorial, aprenderás todo lo que necesitas para empezar con TypeScript.

¿Qué es TypeScript?

TypeScript fue desarrollado por Microsoft y es completamente compatible con JavaScript. Todo código JavaScript válido es también código TypeScript válido.

Ventajas de TypeScript:

• Detección temprana de errores: Los errores se capturan en tiempo de compilación
• Mejor IntelliSense: Autocompletado más preciso en editores
• Refactoring seguro: Cambios de nombres y estructuras más confiables
• Documentación viva: Los tipos sirven como documentación

Instalación y Configuración

BASHCopiar
1# Instalar TypeScript globalmente
2npm install -g typescript
3
4# Crear un nuevo proyecto
5mkdir mi-proyecto-typescript
6cd mi-proyecto-typescript
7
8# Inicializar configuración de TypeScript
9tsc --init
10
11# Compilar archivos TypeScript
12tsc archivo.ts

Tipos Básicos

Tipos Primitivos

TYPESCRIPTCopiar
1// Números
2let edad: number = 25;
3let precio: number = 99.99;
4
5// Strings
6let nombre: string = "Juan";
7let saludo: string = `Hola, ${nombre}!`;
8
9// Booleanos
10let activo: boolean = true;
11let completado: boolean = false;
12
13// Arrays
14let numeros: number[] = [1, 2, 3, 4, 5];
15let nombres: Array<string> = ["Ana", "Luis", "María"];
16
17// Tuplas
18let coordenadas: [number, number] = [10, 20];
19let persona: [string, number] = ["Juan", 30];

Tipos de Objeto

TYPESCRIPTCopiar
1// Interfaces
2interface Usuario {
3  id: number;
4  nombre: string;
5  email: string;
6  activo?: boolean; // Propiedad opcional
7}
8
9const usuario: Usuario = {
10  id: 1,
11  nombre: "María García",
12  email: "maria@ejemplo.com"
13};
14
15// Tipos personalizados
16type Estado = "pendiente" | "completado" | "cancelado";
17
18interface Tarea {
19  id: number;
20  titulo: string;
21  estado: Estado;
22  fechaCreacion: Date;
23}

Funciones con TypeScript

TYPESCRIPTCopiar
1// Función con tipos de parámetros y retorno
2function sumar(a: number, b: number): number {
3  return a + b;
4}
5
6// Función con parámetros opcionales
7function saludar(nombre: string, apellido?: string): string {
8  if (apellido) {
9    return `Hola, ${nombre} ${apellido}!`;
10  }
11  return `Hola, ${nombre}!`;
12}
13
14// Función con parámetros por defecto
15function crearUsuario(nombre: string, role: string = "usuario"): Usuario {
16  return {
17    id: Math.random(),
18    nombre,
19    email: `${nombre.toLowerCase()}@ejemplo.com`,
20    role
21  };
22}
23
24// Arrow functions
25const multiplicar = (a: number, b: number): number => a * b;
26
27// Funciones como tipos
28type OperacionMatematica = (a: number, b: number) => number;
29
30const dividir: OperacionMatematica = (a, b) => {
31  if (b === 0) throw new Error("División por cero");
32  return a / b;
33};

Clases y Herencia

TYPESCRIPTCopiar
1class Animal {
2  protected nombre: string;
3  private edad: number;
4  
5  constructor(nombre: string, edad: number) {
6    this.nombre = nombre;
7    this.edad = edad;
8  }
9  
10  public hacerSonido(): string {
11    return "Algún sonido";
12  }
13  
14  public getInfo(): string {
15    return `${this.nombre} tiene ${this.edad} años`;
16  }
17}
18
19class Perro extends Animal {
20  private raza: string;
21  
22  constructor(nombre: string, edad: number, raza: string) {
23    super(nombre, edad);
24    this.raza = raza;
25  }
26  
27  public hacerSonido(): string {
28    return "Guau guau!";
29  }
30  
31  public getRaza(): string {
32    return this.raza;
33  }
34}
35
36const miPerro = new Perro("Max", 3, "Labrador");
37console.log(miPerro.hacerSonido()); // "Guau guau!"
38console.log(miPerro.getInfo()); // "Max tiene 3 años"

Genéricos

Los genéricos permiten crear componentes reutilizables:

TYPESCRIPTCopiar
1// Función genérica
2function identidad<T>(arg: T): T {
3  return arg;
4}
5
6let output1 = identidad<string>("Hola");
7let output2 = identidad<number>(42);
8
9// Interfaz genérica
10interface ApiResponse<T> {
11  data: T;
12  status: number;
13  message: string;
14}
15
16interface Post {
17  id: number;
18  title: string;
19  content: string;
20}
21
22const response: ApiResponse<Post[]> = {
23  data: [
24    { id: 1, title: "Mi primer post", content: "Contenido..." }
25  ],
26  status: 200,
27  message: "OK"
28};
29
30// Clase genérica
31class Lista<T> {
32  private items: T[] = [];
33  
34  agregar(item: T): void {
35    this.items.push(item);
36  }
37  
38  obtener(index: number): T | undefined {
39    return this.items[index];
40  }
41  
42  obtenerTodos(): T[] {
43    return [...this.items];
44  }
45}
46
47const listaNumeros = new Lista<number>();
48listaNumeros.agregar(1);
49listaNumeros.agregar(2);
50
51const listaUsuarios = new Lista<Usuario>();
52listaUsuarios.agregar(usuario);

Manejo de Errores

TYPESCRIPTCopiar
1// Tipos de unión para manejo de errores
2type Resultado<T> = {
3  success: true;
4  data: T;
5} | {
6  success: false;
7  error: string;
8};
9
10async function obtenerUsuario(id: number): Promise<Resultado<Usuario>> {
11  try {
12    const response = await fetch(`/api/users/${id}`);
13    if (!response.ok) {
14      return { success: false, error: "Usuario no encontrado" };
15    }
16    const usuario = await response.json();
17    return { success: true, data: usuario };
18  } catch (error) {
19    return { success: false, error: "Error de red" };
20  }
21}
22
23// Uso
24const resultado = await obtenerUsuario(1);
25if (resultado.success) {
26  console.log("Usuario:", resultado.data.nombre);
27} else {
28  console.error("Error:", resultado.error);
29}

Configuración avanzada

tsconfig.json

JSONCopiar
1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "lib": ["DOM", "ES2020"],
5    "module": "ESNext",
6    "moduleResolution": "node",
7    "strict": true,
8    "esModuleInterop": true,
9    "skipLibCheck": true,
10    "forceConsistentCasingInFileNames": true,
11    "outDir": "./dist",
12    "rootDir": "./src",
13    "removeComments": true,
14    "noImplicitAny": true,
15    "strictNullChecks": true
16  },
17  "include": ["src/**/*"],
18  "exclude": ["node_modules", "dist"]
19}

Mejores Prácticas

1. Usa tipos estrictos: Habilita strict: true en tu configuración
2. Prefiere interfaces sobre types: Para definir shapes de objetos
3. Usa enums para conjuntos fijos: De valores relacionados
4. Evita any: Usa unknown cuando no conozcas el tipo
5. Aprovecha la inferencia: TypeScript puede inferir muchos tipos automáticamente

Conclusión

TypeScript mejora significativamente la experiencia de desarrollo en JavaScript. Con tipado estático, mejor tooling y detección temprana de errores, te ayudará a escribir código más robusto y mantenible.

¡Empieza a usar TypeScript en tu próximo proyecto y experimenta la diferencia!