Esdocu
typescript

Introducción a TypeScript

Descubre qué es TypeScript, sus ventajas frente a JavaScript puro, cómo configurar tu entorno de desarrollo local y escribe tu primer programa usando el compilador para entender su funcionamiento.

El vertiginoso crecimiento de JavaScript dio lugar a aplicaciones empresariales masivas, pero también evidenció las debilidades de su tipado dinámico en proyectos complejos. Este capítulo sienta las bases para superar dichas limitaciones. Aprenderás qué es TypeScript, por qué su enfoque como superset con tipado estático previene fallos antes de que ocurran y cómo el compilador transforma el código en JavaScript puro mediante la transpilación. Además, prepararás tu entorno local paso a paso con Node.js y Visual Studio Code, permitiéndote escribir, compilar y ejecutar con éxito tu primer programa "Hola Mundo".

1.1 ¿Qué es TypeScript y por qué usarlo?

Para entender el propósito de TypeScript, primero debemos mirar hacia el lenguaje sobre el cual está construido: JavaScript. Diseñado en 1995 en apenas diez días, JavaScript nació con el objetivo de añadir pequeñas interacciones dinámicas a las páginas web de la época. Sin embargo, el desarrollo web evolucionó de forma masiva, y JavaScript pasó de validar formularios sencillos a sostener aplicaciones empresariales de enorme complejidad (como suites de ofimática en la nube, redes sociales y plataformas de streaming).

A medida que las bases de código crecían, las limitaciones nativas de JavaScript comenzaron a pasar factura a los desarrolladores, dando origen a la necesidad de una herramienta más robusta.

¿Qué es TypeScript?

TypeScript es un lenguaje de programación de código abierto desarrollado y mantenido por Microsoft. Su definición técnica se compone de tres pilares fundamentales:

  • Es un superset (supra-conjunto) de JavaScript: Esto significa que todo código JavaScript válido es, automáticamente, código TypeScript válido. TypeScript no reemplaza a JavaScript, sino que se posiciona sobre él, extendiendo sus capacidades.
  • Añade tipado estático opcional: A diferencia de JavaScript, donde las variables pueden cambiar de tipo de datos libremente durante la ejecución, TypeScript permite (y fomenta) definir qué tipo de datos admitirá cada variable, parámetro o función.
  • Es un lenguaje compilado (o transpíclado): Los navegadores web y los entornos de ejecución como Node.js no entienden TypeScript de forma nativa. Por lo tanto, el código TypeScript pasa por un proceso de compilación donde se eliminan todas las anotaciones de tipo y se genera JavaScript puro (ES5, ES6, etc.), listo para ser ejecutado en cualquier entorno.

El siguiente esquema en texto plano ilustra la relación de contención entre ambos lenguajes y el flujo hacia la ejecución:

+-------------------------------------------------------+
|  TYPESCRIPT (Superset)                                |
|                                                       |
|   * Tipado Estático Estricto                          |
|   * Interfaces y Type Aliases                         |
|   * Características Avanzadas de POO                  |
|                                                       |
|    +---------------------------------------------+    |
|    |  JAVASCRIPT (Estándar ECMAScript)           |    |
|    |                                             |    |
|    |   * Tipado Dinámico                         |    |
|    |   * Funciones, Objetos, Arreglos            |    |
|    +---------------------------------------------+    |
+-------------------------------------------------------+
                           |
                           | [Proceso de Compilación / Transpilación]
                           v
+-------------------------------------------------------+
|  JAVASCRIPT PURO RESULTANTE (ES5 / ES6 / etc.)       |
|  (Entendido por Navegadores, Node.js, Deno)           |
+-------------------------------------------------------+

El problema principal: Tipado dinámico vs. Tipado estático

La diferencia crucial entre JavaScript y TypeScript radica en cuándo se validan los tipos de datos.

  • JavaScript tiene tipado dinámico: Los tipos se resuelven en tiempo de ejecución (runtime). Una variable puede comenzar siendo un número y terminar convirtiéndose en un objeto de forma accidental. Los errores de tipo se descubren cuando el usuario final interactúa con la aplicación.
  • TypeScript ofrece tipado estático: Los tipos se verifican en tiempo de compilación. El entorno de desarrollo (IDE) y el compilador analizan el flujo de datos antes de que el código se ejecute, deteniendo los errores de inmediato.

Ejemplo práctico en JavaScript (Peligro en ejecución)

Imagina una función matemática simple para calcular el total de un carrito de compras en JavaScript:

function calcularTotal(precio, impuesto) {
    return precio + impuesto;
}

// Un desarrollador confunde los parámetros y pasa un texto en lugar de un número
console.log(calcularTotal(100, "15")); 
// Resultado impreso: "10015" (En lugar de 115 debido a la coacción de tipos)

El motor de JavaScript no arroja ningún error al escribir o ejecutar este código; simplemente concatena los valores. En una aplicación real, esto se traduciría en una falla crítica de lógica financiera que podría pasar desapercibida hasta llegar a producción.

Ejemplo equivalente en TypeScript (Seguridad preventiva)

Veamos cómo reacciona TypeScript ante el mismo escenario:

function calcularTotal(precio: number, impuesto: number): number {
    return precio + impuesto;
}

// El editor de código marcará inmediatamente el segundo argumento con una línea roja
console.log(calcularTotal(100, "15")); 
// ERROR de compilación: Argument of type 'string' is not assignable to parameter of type 'number'.

El compilador bloquea la generación del archivo final hasta que el error sea corregido, garantizando que el comportamiento matemático en producción sea el esperado.

¿Por qué usar TypeScript? Ventajas clave

Adoptar TypeScript en el flujo de desarrollo de proyectos modernos aporta beneficios tangibles que impactan directamente en la calidad del software y la productividad del equipo:

  1. Detección temprana de errores: Cerca del 15% de los errores comunes en JavaScript pueden ser detectados de forma automática por el analizador estático de TypeScript antes de que el código llegue a una fase de pruebas.
  2. Autocompletado e Intellisense inteligente: Al conocer la estructura exacta de los objetos y las firmas de las funciones, los editores de código modernos (como Visual Studio Code) proporcionan sugerencias precisas, documentación contextual flotante y autocompletado en tiempo real. Esto reduce drásticamente la necesidad de consultar constantemente la documentación externa.
  3. Refactorización segura: Modificar el nombre de una propiedad o cambiar la estructura de una función en un proyecto grande puede ser caótico en JavaScript. En TypeScript, renombrar un elemento se propaga de forma automática y precisa por todo el proyecto, garantizando que ninguna referencia quede rota.
  4. Código autodocumentado: Los tipos actúan como un contrato claro. Al leer la firma de una función, cualquier desarrollador del equipo sabrá con exactitud qué parámetros requiere y qué tipo de datos devolverá, facilitando el mantenimiento a largo plazo.

Nota de diseño: Es importante recalcar que TypeScript es una herramienta de diseño y desarrollo. Una vez compilado a JavaScript, todas las comprobaciones de tipos desaparecen por completo. Esto significa que TypeScript no añade sobrecarga de rendimiento ni ralentiza la ejecución de tus aplicaciones en el navegador o servidor.

1.2 Instalación y configuración del entorno

Para comenzar a escribir y ejecutar código TypeScript de manera profesional, es necesario preparar un entorno de desarrollo en tu máquina local. Este entorno consta de tres componentes principales: el entorno de ejecución de JavaScript (Node.js), el administrador de paquetes (npm) y el compilador oficial de TypeScript (tsc), además de un editor de código optimizado.

Paso 1: Instalación de Node.js y npm

Dado que el compilador de TypeScript está escrito en JavaScript y se ejecuta como una herramienta de línea de comandos, necesitamos Node.js instalado en el sistema. Al instalar Node.js, se incluye de forma automática npm (Node Package Manager), que utilizaremos para descargar las herramientas de TypeScript.

  1. Ve al sitio web oficial de Node.js.
  2. Descarga la versión LTS (Long Term Support) recomendada para la mayoría de los usuarios, ya que garantiza estabilidad a largo plazo.
  3. Ejecuta el instalador descargado y sigue los pasos predeterminados en tu sistema operativo (Windows, macOS o Linux).

Para verificar que la instalación se realizó correctamente, abre tu terminal (Símbolo del sistema, PowerShell o la Terminal de macOS/Linux) y ejecuta los siguientes comandos:

node -v
npm -v

Ambos comandos deberían retornar la versión de software instalada (por ejemplo, v20.x.x y 10.x.x).

Paso 2: Instalación del Compilador de TypeScript

Con npm listo, podemos instalar el paquete oficial de TypeScript. Existen dos formas de hacerlo: de manera global en el sistema o de manera local en un proyecto específico. Para dar tus primeros pasos, realizaremos una instalación global, lo que te permitirá usar el comando del compilador desde cualquier carpeta de tu computadora.

En tu terminal, ejecuta el comando correspondiente a tu sistema operativo:

  • Windows / Linux / macOS (General):
npm install -g typescript
  • macOS / Linux (Si requiere permisos de administrador):
sudo npm install -g typescript

Una vez finalizado el proceso, verifica que el compilador esté disponible ejecutando:

tsc -v

Este comando invocará al TypeScript Compiler (tsc) y mostrará la versión actual en pantalla (por ejemplo, Version 5.x.x).

Paso 3: Configuración del Editor de Código (IDE)

Aunque puedes escribir TypeScript en cualquier editor de texto plano, la experiencia óptima se logra con un editor que entienda el lenguaje de manera nativa para ofrecer autocompletado y detección de errores en tiempo real.

La opción estándar en la industria es Visual Studio Code (VS Code), desarrollado también por Microsoft. Posee soporte integrado de primer nivel para TypeScript sin necesidad de configurar complementos externos.

  1. Descarga e instala VS Code desde su sitio web oficial.
  2. Al abrir un archivo con la extensión .ts, el editor activará automáticamente su motor de inferencia estática.

Paso 4: Creación y estructura del espacio de trabajo

Para confirmar que todas las piezas del entorno interactúan correctamente, estructuraremos un directorio de trabajo básico desde la terminal:

  1. Crea una carpeta para tus prácticas y accede a ella:
mkdir curso-typescript
cd curso-typescript
  1. Inicializa un archivo de configuración de TypeScript en esa carpeta:
   tsc --init

Este último comando generará un archivo crucial llamado tsconfig.json en la raíz de tu directorio. Este archivo le indica al compilador que la carpeta actual es un proyecto TypeScript y define las reglas bajo las cuales se evaluará y transformará tu código a JavaScript puro.

El siguiente diagrama detalla cómo queda estructurado tu entorno local listo para el desarrollo:

[ Tu Computadora ]
       |
       +---> Node.js (Entorno de ejecución de herramientas)
       |       |
       |       +---> npm (Gestor de paquetes)
       |               |
       |               +---> TypeScript Compiler (tsc) <--- [Ejecutable global]
       |
       +---> Visual Studio Code (IDE con soporte TypeScript nativo)
               |
               +---> [ Carpeta: curso-typescript ]
                       |
                       +---> tsconfig.json (Configuración del proyecto)

Con Node.js corriendo, el compilador tsc instalado globalmente y un proyecto inicializado con su tsconfig.json, tu entorno local está completamente preparado para recibir y procesar las instrucciones del lenguaje.

1.3 Tu primer programa: Hola Mundo

Con el entorno de desarrollo perfectamente configurado, es momento de escribir, compilar y ejecutar tu primer programa en TypeScript. Este ejercicio te permitirá experimentar de primera mano el flujo de trabajo típico de un desarrollador de TypeScript: escribir código con tipado, invocar al compilador y ejecutar el archivo JavaScript resultante.

Paso 1: Creación del archivo TypeScript

Abre la carpeta curso-typescript que creamos en la sección anterior dentro de tu editor de código (Visual Studio Code).

  1. Crea un nuevo archivo en la raíz del proyecto.
  2. Nómbralo obligatoriamente con la extensión .ts, la cual identifica a los archivos de código fuente de TypeScript: hola.ts.
  3. Escribe las siguientes líneas de código dentro del archivo:
// Declaramos una variable con un tipo explícito 'string'
let mensaje: string = "¡Hola Mundo desde TypeScript!";

// Imprimimos el contenido en la consola del sistema
console.log(mensaje);

A nivel de sintaxis, puedes notar de inmediato la diferencia con JavaScript tradicional: después del nombre de la variable (mensaje), hemos añadido dos puntos (:) seguidos de la palabra clave string. Esta es una anotación de tipo, y le indica firmemente al editor y al compilador que esta variable solo puede almacenar texto.

Paso 2: Compilación de TypeScript a JavaScript

Los motores de ejecución de JavaScript (como el navegador o Node.js) no pueden procesar el archivo hola.ts directamente de forma nativa. Si intentas ejecutarlo tal cual, el sistema arrojará un error de sintaxis al no reconocer la anotación : string. Por lo tanto, debemos transformar este código a JavaScript puro utilizando el TypeScript Compiler (tsc).

  1. Abre la terminal integrada de Visual Studio Code (puedes usar el atajo `Ctrl + `` o ir al menú superior Terminal -> New Terminal).
  2. Asegúrate de estar posicionado en la carpeta donde guardaste tu archivo.
  3. Ejecuta el compilador especificando el nombre del archivo de origen:
tsc hola.ts

Tras una breve pausa (si no hay errores en tu código), la terminal no mostrará ningún mensaje de éxito, pero notarás un cambio inmediato en el explorador de archivos de tu proyecto: el compilador ha generado un nuevo archivo llamado hola.js justo al lado de tu archivo original.

Si abres el archivo generado hola.js, verás que el compilador ha removido el rastro de TypeScript para transformarlo en código estándar compatible:

// Archivo hola.js generado automáticamente
var mensaje = "¡Hola Mundo desde TypeScript!";
console.log(mensaje);

Paso 3: Ejecución del programa

Ahora que tienes el archivo JavaScript puro listo (hola.js), puedes ejecutarlo en tu computadora utilizando el entorno de ejecución de Node.js que instalamos previamente.

En la misma terminal, ejecuta el siguiente comando:

node hola.js

La terminal imprimirá inmediatamente el resultado esperado de tu programa:

¡Hola Mundo desde TypeScript!

El flujo de trabajo cíclico

A partir de este punto, cada vez que construyas software utilizando TypeScript, repetirás un ciclo de desarrollo lógico. El siguiente diagrama describe los pasos exactos que toma tu código desde que lo concibes en el editor hasta que cobra vida en la pantalla:

+------------------------------------+
|        1. Escribir Código          |
|      Archivo fuente: hola.ts       |
+------------------------------------+
                  |
                  v
+------------------------------------+
|       2. Invocar al Compilador     |
|         Comando: tsc hola.ts       |
+------------------------------------+
                  |
        +---------+---------+
        |                   |
  ¿Hay Errores?       ¿Código Limpio?
        |                   |
        v                   v
 [ Bloqueo: Corregir ] [ Genera: hola.js ]
        ^                   |
        +-------------------+
                            |
                            v
              +----------------------------+
              |   3. Ejecutar JavaScript   |
              |     Comando: node hola.js  |
              +----------------------------+
                            |
                            v
              +----------------------------+
              |    4. Salida en Consola    |
              |     "¡Hola Mundo..."       |
              +----------------------------+

Este proceso garantiza que el código que se pone en ejecución ha pasado con éxito la rigurosa inspección del sistema de tipos de TypeScript.

1.4 Entendiendo el proceso de compilación

Para dominar TypeScript de forma profesional, es indispensable comprender exactamente qué ocurre cuando ejecutas el comando tsc. A diferencia de los lenguajes compilados tradicionales (como C++ o Go), que transforman el código fuente en instrucciones binarias de máquina directamente ejecutables por el procesador, TypeScript realiza un proceso denominado transpilación (o compilación de código fuente a código fuente).

El compilador toma tu código TypeScript de alto nivel y lo traduce a JavaScript de alto nivel, removiendo por completo la capa de tipado en el camino.

Las dos responsabilidades del compilador

El TypeScript Compiler (tsc) trabaja realizando dos tareas completamente independientes al mismo tiempo:

  1. El análisis de tipos (Type Checking): Revisa minuciosamente que se respeten los contratos de datos establecidos. Si asignas un texto a una variable numérica, el comprobador generará alertas.
  2. La transformación de código (Transpilation): Elimina las anotaciones de tipo, interfaces y alias para generar un archivo con sintaxis JavaScript pura. Además, adapta las características modernas del lenguaje a versiones de JavaScript más antiguas si así se lo configuras.

Un concepto fundamental que debes asimilar es que estas dos tareas no dependen la una de la otra. Por defecto, incluso si el comprobador encuentra errores de tipo en tu archivo, el compilador completará la transpilación y generará el archivo .js resultante. Esto se debe a que TypeScript asume que tú, como desarrollador, tienes el control de la lógica y podrías querer probar el código en ejecución a pesar de las advertencias.

Anatomía del proceso de compilación

Cuando el comando tsc procesa un archivo, el compilador ejecuta de forma interna un flujo estructurado en fases consecutivas:

[ Archivo .ts ]
       |
       v
+-------------------------------------------------------+
| 1. Análisis Sintáctico (Parsing)                     |
|    El código se lee y se convierte en un árbol        |
|    de estructura lógica (AST).                        |
+-------------------------------------------------------+
       |
       v
+-------------------------------------------------------+
| 2. Comprobación de Tipos (Type Checking)              |
|    Se validan las reglas de asignación y firmas de   |
|    funciones. Si hay fallas, se reportan en consola.  |
+-------------------------------------------------------+
       |
       v
+-------------------------------------------------------+
| 3. Transformación y Emisión (Emit)                    |
|    Se eliminan las estructuras exclusivas de TS.      |
|    Se traduce la sintaxis moderna al estándar elegido.|
+-------------------------------------------------------+
       |
       v
[ Archivo .js limpio ]
  1. Análisis (Parsing): El compilador lee el texto plano del archivo .ts y genera una estructura de datos en memoria llamada AST (Abstract Syntax Tree), la cual representa la jerarquía gramatical de tu programa.
  2. Comprobación (Type Checking): El validador recorre el AST examinando cada variable y operación. Si intentas invocar un método que no existe en un objeto, esta fase detiene el flujo para imprimir los errores en la terminal.
  3. Emisión (Emit): Si el análisis concluye, el emisor toma el AST, remueve quirúrgicamente los tipos (como : string, : number o las declaraciones de interfaces) y escribe el código limpio en el archivo .js final.

Borrado de tipos en acción (Type Erasure)

La consecuencia directa de este proceso es el fenómeno conocido como borrado de tipos (Type Erasure). En el entorno de ejecución (runtime), los tipos de TypeScript no existen. No ocupan espacio en memoria ni consumen ciclos de procesamiento.

Mira este ejemplo de conversión directa:

// Código fuente en TypeScript (Antes de compilar)
interface Usuario {
    id: number;
    nombre: string;
}

function darBienvenida(persona: Usuario): string {
    return "Hola, " + persona.nombre;
}

Al pasar por el compilador, todo lo que no pertenezca al estándar de JavaScript es erradicado:

// Código emitido en JavaScript (Después de compilar)
function darBienvenida(persona) {
    return "Hola, " + persona.nombre;
}

La interfaz Usuario desapareció y el parámetro persona perdió su restricción de tipo. El resultado es JavaScript sumamente limpio y optimizado para cualquier navegador.

Resumen del capítulo

En este Capítulo 1: Introducción a TypeScript, hemos establecido los cimientos teóricos y prácticos indispensables para iniciar con éxito nuestro camino en el lenguaje:

  • Identificamos la naturaleza de TypeScript como un superset de JavaScript que introduce tipado estático opcional para resolver los problemas de escalabilidad y errores silenciosos en tiempo de ejecución propios del tipado dinámico.
  • Preparamos nuestro entorno local instalando Node.js, configurando el gestor de paquetes npm y adquiriendo de forma global el compilador oficial de TypeScript (tsc), apoyándonos en Visual Studio Code como el entorno ideal de desarrollo.
  • Escribimos y ejecutamos nuestro primer programa, asimilando el flujo de trabajo cíclico elemental: codificar con extensiones .ts, transpilar el código y ejecutar el archivo .js resultante mediante Node.js.
  • Desmitificamos el proceso de compilación, aprendiendo que el compilador opera dividiendo sus tareas entre la verificación estricta de tipos en desarrollo y la remoción completa de los mismos (Type Erasure) para emitir código JavaScript puro compatible con los estándares de la industria.

© 2026 Esdocu. Contenido bajo licencia MIT.

Editar esta página