TypeScript y tsconfig.json

Este artículo explica TypeScript y tsconfig.json.

Partiendo del papel básico de TypeScript, explicaremos, con ejemplos específicos, cómo funciona tsconfig.json dentro de un proyecto.

YouTube Video

TypeScript y tsconfig.json

TypeScript es 'JavaScript con tipos'. Sin embargo, para utilizar TypeScript de manera efectiva en proyectos reales, es esencial entender correctamente tsconfig.json y configurarlo intencionadamente.

¿Por qué necesitamos TypeScript?

En primer lugar, la razón principal para usar TypeScript es 'la capacidad de detectar errores antes de la ejecución.'.

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

Este código no causaría un error en JavaScript hasta el momento de ejecución, pero en TypeScript genera un error de tipo en tiempo de compilación.

Esta 'detección temprana' mejora enormemente la eficiencia y la calidad del desarrollo.

¿Cómo se ejecuta TypeScript?

En principio, TypeScript no se puede ejecutar tal cual. Debes convertirlo a JavaScript usando tsc (el compilador de TypeScript)..

1npm install -D typescript
2npx tsc --init

• Al realizar esta operación, se genera tsconfig.json, que proporciona el archivo central que define el comportamiento del proyecto TypeScript.

¿Cuál es el papel de tsconfig.json?

tsconfig.json es un archivo de configuración que determina 'qué archivos', 'con qué reglas', y 'cómo convertirlos'.. Aunque al principio pueda parecer complejo, solo unos pocos ajustes son realmente importantes.

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• Con solo estos ajustes, es posible el desarrollo moderno y seguro en TypeScript.

target: La versión de JavaScript a generar

target determina el nivel de especificación del JavaScript de salida.

1"target": "ES2020"

Con esto, TypeScript generará JavaScript equivalente a ES2020. Para entornos antiguos, selecciona ES5; para los más recientes, elige ES2022, etc.

Al especificar ESNext

1"target": "ESNext"

• ESNext indica generar la sintaxis de JavaScript más reciente disponible tal cual. TypeScript no transpila la sintaxis y deja que el entorno de ejecución, como Node.js o los navegadores, se encargue de ello.

• Por lo tanto, ESNext es adecuado si solo se apunta a Node.js en su versión más reciente o si se está usando Babel o un empaquetador para transpilar por separado. Por otro lado, si el entorno de ejecución no admite la sintaxis más reciente, esto puede causar errores en tiempo de ejecución, por lo que se debe tener precaución.

module: Especificar el formato de los módulos

module especifica el formato de los módulos.

1"module": "ESNext"

• ESNext es el estándar en el frontend y en entornos modernos de Node.js.
• Elige "CommonJS" solo si necesitas CommonJS.

strict: Maximizar la seguridad de tipos

strict es un interruptor para maximizar la seguridad de TypeScript.

1"strict": true

• Activar esto detectará exhaustivamente tipos ambiguos y posibles errores.

modo strict y any implícito

Cuando activas strict, TypeScript trata como error aquellas variables cuyo tipo no puede inferirse.

1function printValue(value) {
2	console.log(value);
3}

• Esta variable value no tiene información de tipo al declararse, por lo que TypeScript no puede determinar su tipo. Como resultado, se usa any implícitamente, lo que generará una advertencia (error) en modo strict.

1function printValue(value: number) {
2	console.log(value);
3}

• Al especificar explícitamente el tipo así, TypeScript entiende que 'esta variable solo maneja números'. En TypeScript, es más importante que el tipo pueda determinarse de forma única que que pueda omitirse.

include/exclude: Controlar qué archivos compilar

En tsconfig.json, puedes especificar qué archivos incluir y qué archivos excluir de la compilación.

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• Con esto, solo los archivos en src serán gestionados por TypeScript.
• node_modules especificado en exclude se excluirá de la compilación incluso si está en una ruta incluida por include.

outDir: Especificar el directorio de salida

Especifica outDir para gestionar la ubicación de los archivos generados en la compilación.

1"outDir": "dist"

• Con esto, todos los resultados compilados se generarán en la carpeta dist. En la práctica, separar el código fuente de los artefactos de compilación es un estándar.

rootDir: Especificar el directorio fuente

rootDir especifica el directorio que TypeScript considera como raíz del código fuente.

1"rootDir": "src"

• Esta configuración permite a TypeScript preservar la estructura de directorios basada en src al generar los archivos de salida. Por ejemplo, src/index.ts se generará como dist/index.js.

• La estructura del directorio especificada en rootDir se replicará en outDir.

esModuleInterop: Uniendo CommonJS y Módulos ES

A continuación, veamos esModuleInterop.

1"esModuleInterop": true

• Si está activado, podrás usar módulos CommonJS de forma segura con la sintaxis import.

1import fs from "fs";

• Esta configuración es casi imprescindible cuando se usa Node.js.

noImplicitAny: Prohibir el uso implícito de 'any'

También es importante reforzar las comprobaciones de tipos en tsconfig.json.

1"noImplicitAny": true

• Con esto, puedes prohibir los tipos any implícitos. Esto te permite detectar de manera confiable lugares donde olvidaste especificar un tipo.

Configuración para detectar código no utilizado

Las configuraciones para detectar código no utilizado también son útiles para mejorar el mantenimiento.

1"noUnusedLocals": true,
2"noUnusedParameters": true

• Con esto, las variables y argumentos innecesarios se señalan inmediatamente mediante advertencias.

lib: Definir las APIs integradas disponibles

lib es una configuración que especifica las APIs estándar que TypeScript asume que existen.

1"lib": ["ES2020", "DOM"]

• Con esta configuración, los siguientes tipos estarán disponibles:. Con ES2020, estarán disponibles características modernas como Promise, Map y Set. Con DOM, están disponibles APIs de navegador como document, window y HTMLElement.

En frontend, incluye DOM; para proyectos solo de Node.js, elimina DOM para evitar que se incluyan tipos globales innecesarios.

moduleResolution: Reglas de resolución de módulos

moduleResolution determina cómo se resuelven los módulos especificados en las sentencias import.

1"moduleResolution": "Node"

Las dos opciones principales son las siguientes:.

• Si especificas Node, se utilizan las reglas de resolución de módulos de Node.js.
• Classic es el método antiguo y específico de TypeScript, pero rara vez se usa hoy en día.

En entornos que usan Node.js o un empaquetador, es seguro especificar explícitamente Node.

Un tsconfig.json mínimo y listo para producción

Basándonos en lo visto hasta ahora, un tsconfig.json mínimo y listo para producción sería así:.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

Esta configuración proporciona una base segura tanto para proyectos de frontend como de Node.js.

Resumen: tsconfig.json es un 'libro de reglas'

tsconfig.json no es solo un archivo de configuración, sino un 'libro de reglas' que se aplica a todo el proyecto. Con tsconfig.json, se definen claramente políticas importantes como las siguientes:.

• El nivel de seguridad de tipos.
• Convenciones de codificación para tu equipo.
• Prevención de errores futuros.

Al comprender tsconfig.json, podrás no solo escribir TypeScript, sino también diseñar tus proyectos para un uso seguro de TypeScript.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video