TypeScript: Introducción y configuración del entorno

JavaScript resuelve los tipos en tiempo de ejecución. Esto significa que un error tan trivial como pasar un string donde se esperaba un number solo se manifiesta cuando el código ya está corriendo, frecuentemente en producción y bajo la forma de un NaN silencioso o una excepción difícil de rastrear. TypeScript ataca este problema en la raíz: agrega un sistema de tipos estático sobre JavaScript que traslada la detección de errores desde el runtime hacia el tiempo de compilación.

¿Cómo se ejecuta el código? AST, bytecode y runtime

Para entender qué aporta TypeScript conviene recordar el ciclo de vida de un programa en un motor de JavaScript:

1. El programa se parsea hacia un AST (Abstract Syntax Tree).
2. El AST se compila a bytecode.
3. El bytecode es evaluado por el runtime.

TypeScript se inserta antes de este flujo. El compilador tsc toma tu código .ts, construye su propio AST, lo somete al typechecker y, si todo es válido, emite JavaScript estándar que cualquier motor puede ejecutar.

flowchart LR
    A[Código TypeScript] --> B[AST de TypeScript]
    B --> C{Typechecker}
    C -- válido --> D[JavaScript emitido]
    C -- error --> E[Error en compilación]
    D --> F[AST de JavaScript]
    F --> G[Bytecode]
    G --> H[Runtime]

La conclusión clave: el typechecker es una capa de verificación que se ejecuta antes de generar el JavaScript final. Los errores de tipo nunca llegan al runtime porque la compilación se detiene antes.

El sistema de tipos

TypeScript admite tanto anotaciones de tipo explícitas como inferencia automática. Ambas estrategias coexisten en el mismo archivo:

let a: number = 1                // a es number
let b: string = 'hello'          // b es string
let c: boolean[] = [true, false] // c es un arreglo de booleanos

let a = 1                        // a es number (inferido)
let b = 'hello'                  // b es string (inferido)
let c = [true, false]            // c es boolean[] (inferido)

La diferencia esencial frente a JavaScript se resume así:

Instalación de TypeScript

TypeScript se distribuye como un paquete de Node, por lo que necesitas tener Node.js instalado. Inicializa el proyecto y agrega las dependencias de desarrollo:

npm init -y
npm install --save-dev typescript @types/node

@types/node aporta las definiciones de tipos del entorno de ejecución de Node, indispensables si vas a trabajar en el backend.

tsconfig.json: el corazón de la configuración

El archivo tsconfig.json, ubicado en la raíz del proyecto, define cómo el compilador interpreta y transforma tu código. Una configuración base sólida luce así:

{
  "compilerOptions": {
    "lib": ["es2015"],
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "es2015"
  },
  "include": ["src"]
}

Cada opción cumple un rol concreto:

• include: indica las rutas donde tsc debe buscar los archivos a compilar.
• lib: declara qué librerías de tipos (APIs del entorno) asume disponibles el proyecto.
• module: define el sistema de módulos del código emitido (commonjs, esnext, etc.).
• outDir: ubicación de los archivos JavaScript compilados.
• sourceMap: genera source maps para depurar el TypeScript original desde el navegador o Node.
• strict: habilita el conjunto completo de comprobaciones estrictas. Es la opción que más valor aporta.
• target: versión de JavaScript a la que se transpila el código.

Puedes consultar el catálogo completo de opciones en la documentación oficial de tsc, o explorarlas desde la terminal:

npx tsc --help

El archivo de entrada: index.ts

El punto de entrada convencional es src/index.ts. Comencemos con el clásico mensaje de prueba:

console.log('hello world from TS!')

Compila el proyecto y ejecútalo:

npx tsc
node ./dist/index.js

tsc lee la configuración de tsconfig.json, transpila todo lo que esté bajo src y deposita el resultado en dist.

Hola mundo y la verificación de tipos en acción

Observemos cómo el typechecker protege contra asignaciones inválidas:

let msg: string = 'Hola mundo';
console.log(msg);
msg = 'David Casas';
console.log(msg);
// msg = 123 // Error: number no es asignable a string

Al compilar, TypeScript transpila a JavaScript plano eliminando las anotaciones:

var msg = 'Hola mundo';
console.log(msg);
msg = 'David Casas';
console.log(msg);

El tipo string desaparece del código emitido porque su único propósito era validar en compilación. Esta propiedad —los tipos se borran tras la verificación— se conoce como type erasure.

Watch mode: compilación continua

Compilar manualmente tras cada cambio rompe el flujo de trabajo. El compilador incluye un modo observador que recompila de forma incremental cada vez que detecta una modificación:

npx tsc --watch
# o su forma corta
npx tsc -w

Mantén este proceso abierto en una terminal mientras desarrollas: cada vez que guardes un archivo .ts, verás de inmediato los errores de tipo o la salida actualizada en dist.

Conclusión

TypeScript no reemplaza a JavaScript; lo eleva añadiendo una capa de verificación estática que captura errores antes de ejecutar una sola línea. Con Node instalado, un tsconfig.json en modo strict y el compilador en watch mode, ya tienes un entorno profesional listo para los siguientes temas de la serie.

En el próximo artículo profundizaremos en los tipos básicos del lenguaje: any, unknown, number, string, symbol, objetos, uniones e intersecciones.