TypeScript es un superconjunto tipado de JavaScript que añade tipos estáticos y otras funcionalidades avanzadas, permitiendo detectar errores en tiempo de compilación y mejorar la mantenibilidad de los proyectos. Es ampliamente usado en el desarrollo web moderno para construir aplicaciones web.

• Introducción a la programación
• JavaScript

• Documentación oficial de TypeScript

1. ¿Qué es TypeScript?
2. Instalación del entorno y configuración básica
3. Tipos de datos básicos
4. Variables y constantes
5. Funciones y tipado de parámetros
6. Interfaces y tipos personalizados
7. Clases y programación orientada a objetos
8. Módulos y namespaces
9. Tipos avanzados y utilitarios
10. Manejo de errores y excepciones
11. Configuración del compilador (tsconfig.json)
12. Integración con proyectos JavaScript y frameworks
13. Buenas prácticas y consejos finales
14. Ejercicios prácticos

TypeScript es un lenguaje de programación creado por Microsoft que se basa en JavaScript, pero añade un sistema de tipos estáticos opcionales. Esto significa que, además de poder escribir código igual que en JavaScript, puedes especificar los tipos de variables, funciones y objetos, lo que ayuda a detectar posibles errores antes de que el programa se ejecute. Gracias a esta característica, los desarrolladores pueden contar con una experiencia mucho más segura y eficiente, ya que el editor o entorno de desarrollo ofrece autocompletado inteligente, advertencias tempranas y un mejor mantenimiento del código.

Hoy en día, TypeScript se ha convertido en una herramienta fundamental en el desarrollo web moderno y se utiliza ampliamente en muchos frameworks y bibliotecas populares, como Angular, que lo integra de forma nativa; React, donde se emplea para crear aplicaciones más robustas; y Vue.js, que también ofrece soporte oficial para TypeScript. Además, TypeScript es muy utilizado en el desarrollo backend con Node.js, así como en la construcción de aplicaciones móviles con frameworks como Ionic o React Native.

Se puede disponer del entorno de TS mediante dos formas:

Previamente es necesario tener instalado Node.js y npm. Puedes verificar si estan instalados mediante los siguientes comandos:

node -v
npm -v

Si te devuelve una versión, perfecto, ya los tienes. Si no, ve a https://nodejs.org/ y descarga la versión recomendada para tu sistema operativo e instálala.

El primer paso es instalar el compilador tsc cpn npm:

• Globalmente (Para usarlo en cualquier proyecto):

npm install -g typescript

• Localmente sobre un proyecto (Se debe crear una carpeta y la estructura del proyecto):

npm init -y
npm install typescript --save-dev

El siguiente paso es crear una estructura de proyecto de la siguiente manera:

carpeta_raiz/
├── src/
│    └── index.ts
└── tsconfig.json

Creamos un archivo tsconfig.json con la configuración básica:

{
  "compilerOptions": {
    "target": "ES6",      // Código JavaScript de salida compatible con ES6
    "module": "CommonJS", // "CommonJS" para módulos Node.js o "ESNext" para navegadores
    "strict": true,       // Activar comprobaciones estrictas de tipos
    "outDir": "./dist"    // Carpeta donde se generará el JS compilado
  },
  "include": ["src"]
}

Escribir un archivo TS con código, en src/index.ts, escribe algo sencillo, por ejemplo:

console.log("Hola Mundo");

Finalmente solo queda compilar y ejecutar. Desde la raíz del proyecto ejecuta:

npx tsc

Esto generará el archivo JavaScript en la carpeta dist/index.js. Ya solo queda ejecutar con Node:

node dist/index.js

Bun es un entorno de ejecución y conjunto de herramientas todo en uno para aplicaciones JavaScript y TypeScript. Está diseñado para ser una alternativa moderna y más rápida que Node.js https://bun.sh/

El primer paso es instalar el entorno de Bun

powershell -c "irm bun.sh/install.ps1 | iex"

curl -fsSL https://bun.sh/install | bash

Puedes verificar si se ha realizado la instalación correctamente, verificando la versión instalada mediante el comando:

bun --version

Ahora ya es posible ejecutar archivos TS directamente

bun index.ts

Otra posibilidad es abrir una sesión REPL (Read–Eval–Print Loop) para ir escribiendo instrucciones línea por línea y obtener el resultado al instante. Esto es muy útil para practicar y hacer pruebas sin compilar archivos.

Ejecuta el comando bun repl para iniciar una sesión interactiva (REPL):

bun repl
Welcome to Bun v1.2.16
Type ".help" for more information.
[!] Please note that the REPL implementation is still experimental!

Todos los lenguajes de programación utilizan números, y puedes realizar operaciones aritméticas con ellos.

Escribe la instrucción 3 + 7 y pulsa la tecla Enter:

3 + 7
10

Como puedes ver, bun evalúa la expresión 3 + 7 y devuelve el resultado correspondiente.

Con JavaScript puedes realizar las operaciones aritméticas más comunes.

Puedes restar dos números:

20 - 15
5

Puedes multiplicar dos números:

3 * 7
21

Puedes dividir dos números:

10 / 5
2

Puedes obtener el resto (también llamado módulo) de una división:

8 % 3
2

También puedes elevar un número a una potencia:

5 ** 2
25

Y puedes construir expresiones complejas para obtener resultados más elaborados:

(5 + 20) / 3
8.333333333333334

Pulsa las teclas CTRL + D para finalizar la sesión REPL.

TypeScript soporta los tipos primitivos de JavaScript, más algunos adicionales:

• boolean — true/false
• number — números enteros y decimales
• string — texto
• array — listas con tipo específico
• tuple — arrays con tipo y tamaño fijo
• enum — enumeraciones
• any — tipo que puede ser cualquiera (usar con precaución)
• void — ausencia de valor (usado en funciones sin retorno)
• null y undefined

Ejemplo:

let isDone: boolean = false;
let age: number = 30;
let userName: string = "Juan";
let numbers: number[] = [1, 2, 3];
let tuple: [string, number] = ["hola", 42];
enum Direction { Up, Down, Left, Right }

Se usan let y const para declarar variables con tipos explícitos o inferidos:

let count: number = 10;
const PI: number = 3.1415;

Podemos definir los tipos de parámetros y el tipo de retorno:

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

const saludo = (nombre: string): string => `Hola, ${nombre}`;

Las interfaces definen la forma de un objeto:

interface Usuario {
  id: number;
  nombre: string;
  activo?: boolean; // opcional
}

const user: Usuario = { id: 1, nombre: "Ana" };

TypeScript soporta clases, herencia, modificadores de acceso, y más:

class Persona {
  private nombre: string;

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

  saludar(): string {
    return `Hola, soy ${this.nombre}`;
  }
}

class Empleado extends Persona {
  private puesto: string;

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

  obtenerPuesto(): string {
    return this.puesto;
  }
}

Para organizar el código usamos módulos:

Archivo math.ts:

export function multiplicar(a: number, b: number): number {
  return a * b;
}

Archivo principal:

import { multiplicar } from './math';

console.log(multiplicar(2, 3)); // 6

• Unión de tipos: string | number
• Tipos literales: 'asc' | 'desc'
• Tipos genéricos:

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

TypeScript usa try/catch igual que JavaScript:

try {
  throw new Error("Algo falló");
} catch (error) {
  console.error(error);
}

Las opciones más usadas:

• "strict": true — modo estricto
• "target" — versión JS de salida
• "module" — sistema de módulos
• "outDir" — carpeta de salida

TypeScript se integra fácilmente en proyectos React, Vue o Angular, y mejora el autocompletado y mantenimiento.

• Usa siempre tipos explícitos cuando sea posible
• Evita el uso indiscriminado de any
• Usa interfaces para definir contratos claros
• Aprovecha el tipado para detectar errores en desarrollo
• Configura el compilador con strict para mayor seguridad

Para consolidar lo aprendido, aquí tienes una serie de ejercicios que cubren los conceptos fundamentales de TypeScript. Intenta resolverlos y comprueba tus respuestas con las soluciones que puedes pedirme después.

Declara variables para almacenar los siguientes datos con su tipo correspondiente:

• Un booleano llamado activo con valor true.
• Un número llamado edad con valor 25.
• Un string llamado nombre con tu nombre.
• Un array de números llamado puntuaciones con los valores [10, 20, 30].

Escribe una función llamada calcularAreaRectangulo que reciba dos parámetros base y altura de tipo number y retorne el área del rectángulo.

Define una interfaz Producto con las propiedades:

• id (number)
• nombre (string)
• precio (number)
• disponible (boolean, opcional)

Crea un objeto que cumpla con esta interfaz.

Crea una clase Animal con una propiedad nombre y un método hacerSonido() que retorne un string. Luego crea una clase Perro que extienda de Animal y sobreescriba el método hacerSonido() para retornar "Guau".

Define una función genérica llamada mostrarElemento que reciba un argumento de tipo genérico T y lo retorne.