Logo FPCode

Fundamentos de TypeScript

Tutorial básico y avanzado de TypeScript, cubriendo los aspectos fundamentales y esenciales para desarrollo frontend.

Por José Luís Ferrer Rodríguez | Actualizado:

Introducción

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.

Conocimiento previo

Referencias

Índice

  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

1. ¿Qué es TypeScript?

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.

2. Instalación del entorno y configuración básica

Se puede disponer del entorno de TS mediante dos formas:

2.2 Compilador TS

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

Terminal window
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):
Terminal window
npm install -g typescript
  • Localmente sobre un proyecto (Se debe crear una carpeta y la estructura del proyecto):
Terminal window
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:

Terminal window
npx tsc

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

Terminal window
node dist/index.js

2.3 Bun

Logo Bun

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

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

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

Terminal window
bun --version

Ahora ya es posible ejecutar archivos TS directamente

Terminal window
bun index.ts

2.3.1 Sesión REPL

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):

Terminal window
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:

Terminal window
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:

Terminal window
20 - 15
5

Puedes multiplicar dos números:

Terminal window
3 * 7
21

Puedes dividir dos números:

Terminal window
10 / 5
2

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

Terminal window
8 % 3
2

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

Terminal window
5 ** 2
25

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

Terminal window
(5 + 20) / 3
8.333333333333334

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

3. Tipos de datos básicos

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 }

4. Variables y constantes

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

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

5. Funciones y tipado de parámetros

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}`;

6. Interfaces y tipos personalizados

Las interfaces definen la forma de un objeto:

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


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

7. Clases y programación orientada a objetos

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;
  }
}

8. Módulos y namespaces

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

9. Tipos avanzados y utilitarios

  • Unión de tipos: string | number
  • Tipos literales: 'asc' | 'desc'
  • Tipos genéricos:
function identidad<T>(arg: T): T {
  return arg;
}

10. Manejo de errores y excepciones

TypeScript usa try/catch igual que JavaScript:

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

11. Configuración del compilador (tsconfig.json)

Las opciones más usadas:

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

12. Integración con proyectos JavaScript y frameworks

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

13. Buenas prácticas y consejos finales

  • 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

14. Ejercicios prácticos de TypeScript

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.

Ejercicio 1: Tipos básicos y variables

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].

Ejercicio 2: Funciones tipadas

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

Ejercicio 3: Interfaces

Define una interfaz Producto con las propiedades:

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

Crea un objeto que cumpla con esta interfaz.

Ejercicio 4: Clases y herencia

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".

Ejercicio 5: Tipos avanzados

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