Curso TypeScript

TypeScript es un lenguaje de programación de código abierto desarrollado por Microsoft que se basa en JavaScript. Añade tipado estático opcional y otras características avanzadas al lenguaje, lo que facilita el desarrollo de aplicaciones grandes y complejas. Al compilarse, TypeScript se convierte en JavaScript estándar, por lo que puede ejecutarse en cualquier entorno que soporte JavaScript.

¿Qué es TypeScript?

TypeScript es un superconjunto de JavaScript que incorpora tipos estáticos y herramientas de desarrollo más robustas. Permite detectar errores en tiempo de compilación, mejorar la legibilidad del código y facilitar el mantenimiento a largo plazo. Es especialmente útil en proyectos a gran escala donde la consistencia y la escalabilidad son fundamentales.

Ventajas de utilizar TypeScript

• Tipado estático: Ayuda a identificar errores antes de ejecutar el código.
• Mejor autocompletado: Los editores pueden proporcionar sugerencias más precisas.
• Interfaces y clases avanzadas: Facilitan la programación orientada a objetos.
• Compatibilidad con JavaScript: Todo código JavaScript válido es también válido en TypeScript.

Instalación de TypeScript

Para instalar TypeScript, necesitas tener Node.js y npm instalados. Luego, puedes instalar el compilador de TypeScript de manera global:

npm install -g typescript

Para verificar la instalación:

tsc --version

Configuración inicial

Archivo tsconfig.json

Este archivo configura el comportamiento del compilador de TypeScript. Puedes generarlo automáticamente con:

tsc --init

Ejemplo básico de tsconfig.json:

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

Sintaxis básica y tipos

Tipos primitivos

• string
• number
• boolean
• any
• void
• null y undefined

Declaración de variables

let mensaje: string = "Hola, TypeScript";
let numero: number = 42;
let esActivo: boolean = true;

Arreglos y tuplas

Arreglos

let listaNumeros: number[] = [1, 2, 3];

Tuplas

let par: [string, number] = ["edad", 30];

Enums

enum Color {
  Rojo,
  Verde,
  Azul
}

let colorFavorito: Color = Color.Verde;

Funciones en TypeScript

Tipado de parámetros y retorno

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

Parámetros opcionales y por defecto

function construirNombre(nombre: string, apellido?: string): string {
  return apellido ? `${nombre} ${apellido}` : nombre;
}

Funciones flecha

const multiplicar = (x: number, y: number): number => x * y;

Interfaces

Las interfaces definen contratos para clases y objetos.

interface Persona {
  nombre: string;
  edad: number;
  saludar(): void;
}

let juan: Persona = {
  nombre: "Juan",
  edad: 25,
  saludar() {
    console.log(`Hola, me llamo ${this.nombre}`);
  }
};

Clases y herencia

Clases

class Animal {
  nombre: string;

  constructor(nombre: string) {
    this.nombre = nombre;
  }

  mover(distancia: number = 0) {
    console.log(`${this.nombre} se movió ${distancia} metros.`);
  }
}

Herencia

class Perro extends Animal {
  ladrar() {
    console.log("¡Guau!");
  }
}

const miPerro = new Perro("Fido");
miPerro.ladrar();
miPerro.mover(10);

Modificadores de acceso

• public: Accesible desde cualquier lugar.
• private: Solo accesible dentro de la clase.
• protected: Accesible dentro de la clase y clases derivadas.

class Persona {
  private dni: string;
  public nombre: string;

  constructor(nombre: string, dni: string) {
    this.nombre = nombre;
    this.dni = dni;
  }

  protected mostrarDNI() {
    console.log(`Mi DNI es ${this.dni}`);
  }
}

Generics (Genéricos)

Permiten crear componentes que funcionan con varios tipos.

function identidad<T>(arg: T): T {
  return arg;
}

let salida = identidad<string>("Hola");

Módulos y espacios de nombres

Módulos

Los módulos ayudan a organizar el código y a reutilizarlo.

// en archivo matematicas.ts
export function sumar(a: number, b: number): number {
  return a + b;
}

// en archivo principal.ts
import { sumar } from './matematicas';

console.log(sumar(2, 3));

Espacios de nombres

Agrupan código bajo un mismo identificador.

namespace Geometria {
  export namespace Areas {
    export function cuadrado(lado: number): number {
      return lado * lado;
    }
  }
}

let area = Geometria.Areas.cuadrado(5);

Tipos avanzados

Union Types

Permiten que una variable tenga más de un tipo.

let identificador: number | string;
identificador = 10;
identificador = "ABC123";

Type Aliases

Definen nombres personalizados para tipos.

type ID = number | string;

let usuarioID: ID = 123;

Compilación y herramientas

Compilación manual

tsc archivo.ts

Compilación automática

Usando el modo watch:

tsc archivo.ts -w

Integración con bundlers

TypeScript se integra bien con herramientas como Webpack o Parcel para la construcción de aplicaciones.

Integración con librerías JavaScript

Para utilizar librerías escritas en JavaScript, es posible instalar sus definiciones de tipos.

npm install @types/lodash

Luego, puedes importarlas con seguridad de tipos:

import * as _ from 'lodash';

_.chunk(['a', 'b', 'c', 'd'], 2);

Configuración avanzada

Strict Mode

Activar el modo estricto en tsconfig.json ayuda a detectar más errores.

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

Decoradores

Característica experimental que permite añadir metadatos a clases y miembros.

function log(constructor: Function) {
  console.log(`Clase creada: ${constructor.name}`);
}

@log
class MiClase {
  // ...
}

Buenas prácticas

• Usar tipado estricto: Evita errores y mejora la legibilidad.
• Evitar any cuando sea posible: Utilizar tipos específicos.
• Organizar el código en módulos: Facilita el mantenimiento.
• Documentar el código: Ayuda a otros desarrolladores a entender la intención.
• Mantener actualizadas las dependencias: Evita problemas de compatibilidad.

Recursos adicionales

• Sitio oficial de TypeScript: typescriptlang.org