Veamos el TSConfig.json
Contenido del curso
Irving Juárez
Fernando Peralta
Laura Roa
Migdualy Alejandra Gonzalez Martinez
Reinaldo Mendoza
Pepe Sosa
Jordan Jaramillo
Pedro Carreño
Joseph Humberto Cueva
Nelson Alejandro Rivas Mendoza
Diego Forero
Team Platzi
Cristian Eduardo Najera Leal
Rodrigo Andrés Moreno Pertúz
Miguel Angel Reyes Moreno
German Pinilla
Josafat Morales Toledo
Nicolas Molina
Profesor
Diego Andrade
David Alejandro González Barba
David Elias Gatica Morales
Pepe Sosa
Fernando Peralta
Juan David Reyes
Sebastian Rios Sabogal
Ismael Cruz Procel
Gonzalo Peñaranda
Jose Mauricio Hualpa lopez
Daniel Camacho
Andres Salazar Pizarro
Nicolas Molina
Profesor
Alfonso Neil Jiménez Casallas
Daniel Camacho
Juan José Tabares Nieto
Gonzalo Blasco
Jefred Bedoya
Manuel Guzmán
Jhon Acevedo Lema
Como resumen, el comando npx tsc --init inicializa un archivo tsconfig.ts. En este va estar la configuración como el target, ourDir, strictMode, etc. Evitándonos tener que poner esas flags en cada compilación.
.
Una vez con ese archivo, solo corremos el comando npx tsc y listo.
.
Y ya por ultimo, podemos evitarnos la compilación continua corriendo el comando npx tsc --watch
tsc o tsc --watch , sin npx tambien funciona.
Gracias por tu resumen! Me ayudo mucho para mis notas! solo si creo que en vez de tsconfig.ts es tsconfig.json 😃
Para llegar a este curso debes saber por lo menos los fundamentos basicos de JS
Y asi entiendes los beneficios de fallar temprano
Si tu, como yo, no quieres tener una terminal abierta y constantemente estar cambiando entre ventanas para trabajar, puedes abrir la terminal de VSCode con "Ctrl + ñ" de este modo podrás ejecutar comandos con la terminal integrada sin necesidad de ventanas extra.
Para los que no les funcione el Ctrl + ñ pueden abrirla desde el menu de VSCode donde dice Terminal > Nueva terminal :)
tambien funciona con el comando Ctrl + `
Para abrir la terminal de VSCode puede pueden utilizar los siguientes shortcuts
Ctrl + j
o
Ctrl + `
Cabe destacar:
Ctrl + j // oculta/muestra el panel de la terminal Ctrl + ` // coloca el focus en la terminal
Con WebStorm de Jetbrains, se configura tanto el linter como el watch desde la configuración del IDE y funciona super bien, sin necesidad de consolas adicionales
WebStorm es el camino!!!
npx tsc --init
Veamos el TSConfig.json
npx tsc --init
Podemos dejar un watch para que se ejecute cada vez que se modifique un archivo: npx tsc --watch
Explorando el tsconfig.json en TypeScript
En nuestras interacciones previas, hemos aprendido a usar TypeScript para transpilar archivos .ts a JavaScript, lo cual es esencial para que el código sea ejecutado por navegadores y Node.js. Sin embargo, este proceso puede resultar tedioso, especialmente en proyectos más grandes, donde es necesario gestionar múltiples configuraciones y archivos. Afortunadamente, TypeScript ofrece una solución eficiente a través del archivo de configuración tsconfig.json.
- ¿Qué es el tsconfig.json?
El tsconfig.json es un archivo crucial que permite configurar cómo se transpilan los archivos TypeScript en un proyecto. Este archivo facilita la gestión de opciones de compilación, evitando la necesidad de especificar comandos y configuraciones de forma manual para cada archivo.
- Creando el archivo tsconfig.json
Para generar un archivo tsconfig.json en la raíz de tu proyecto, simplemente ejecuta el siguiente comando en la terminal:
- Opciones clave en tsconfig.json
Al abrir el archivo tsconfig.json, verás una serie de opciones configurables. Algunas de las más relevantes incluyen:
target: Define la versión de JavaScript a la que deseas transpilar tu código. Por ejemplo, puedes cambiarlo a es2020 o esnext para aprovechar características más recientes de JavaScript.module: Especifica el sistema de módulos que se utilizará. Las opciones comunes son commonjs, es6 o amd.strict: Si se establece en true, habilita todas las verificaciones de tipo estricto, lo que puede ayudar a detectar errores potenciales más rápidamente.outDir: Especifica la carpeta de salida para los archivos JavaScript transpilados. Deberás habilitar esta opción para organizar mejor tu proyecto.rootDir: Define el directorio raíz de los archivos TypeScript, permitiendo al compilador localizar los archivos a transpilar. Por lo general, se establece en ./src.Veremos el target:
- Configurando tsconfig.json
Una vez creado el archivo, es recomendable habilitar y personalizar las opciones mencionadas. Por ejemplo, puedes agregar o modificar las siguientes líneas:
Con estas configuraciones, el compilador sabe que debe colocar todos los archivos JavaScript transpilados en el directorio dist, mientras que los archivos TypeScript se encuentran en src.
- Ejecutando el Compilador
Una vez configurado el tsconfig.json, puedes compilar tu proyecto ejecutando simplemente:
.ts ubicados en el directorio especificado.
- Compilación en Tiempo Real
Para mejorar aún más el flujo de trabajo, TypeScript permite la compilación en tiempo real. Esto es especialmente útil durante el desarrollo, ya que el compilador puede monitorear los cambios en los archivos y transpilar automáticamente. Para habilitar esta función, usa el siguiente comando:
que pasa si lo tengo global y en un proxyecto x quiero otra version?? dentro del proyecto puedo correr la otra version o me dara problemas??
Hola, si tienes una versión global de TS y luego entras a un proyecto que tiene una versión local, se puede manejar npm tiene comandos para lograrlo.
Por ejemplo, si quieres compilar TS usando tu instalación global, usarías el comando
tsc
Pero si quieres tomar la versión de tu proyecto, te ubicas dentro de la carpeta de tu proyecto y ejecutas.
npx tsc
npx va a buscar la versión de TS dentro de tu proyecto y no la global.
Así no se pronuncia target. Profesor debe revisar la pronunciación. Revisar también la pronunciación de async, pues también debe ser corregida.
Igual le entendiste
Es una clase en español puede usar anglicismos o palabras del inglés y pronunciarlos en español sin problema.
Si quieres detener el "watch" para que tus archivos no estén monitoreados, presiona:
"Ctrl + S" luego confirma con "s" y enter.
Espero le sirva a alguien.
ctrl + c , también sirve para terminar procesos
Es mas rápido ctr + c :3
El compilador de TS en el fondo usa algo como babel para pasar el código a JS o simplemente tiene su propio transpilador?
TypeScript provee su propio transpilador.
Tengo una pregunta:
En el caso de que los traspile con errores, si corrijo los detalles en el archivo .ts, si los vuelvo a traspilar, los archivos .js ya generados se sobreescriben?
sip :u
asi es mientras tu outDir este apuntando a la misma ubicacion, npx tsc --outDir /ruta en el curso los trasnpilamn de esta manera pero te recomeindo siempre hacerlo en el ts.config, pero para evitar siemrpe lanzar el comando con compilacion continua el actualzia los js. automaticamente con npx tsc --watch o npx tsc -w *.ts
¿Una consulta porqué cuando sigo todas las indicaciones y llego a generar el archivo JavaScript me aparece solamente el "Use Strict" pero en el contenido no me aparece nada.
Hola, al parecer no estás indicando el archivo correcto a compilar, pero nos puedes compartir tu repo para verlo a más detalle.
les comparto el [link](TypeScript: TSConfig Reference - Docs on every TSConfig option (typescriptlang.org)) a la referencia de TSConfig en la documentación oficial
Otra alternativa a
npx tsc --watchnpx tsc -w *.ts
Si están trabajando en Windows con WSL y en comando npx tsc --watch no actualiza en tiempo real, deben agregar en el archivo tsconfig.json lo siguiente:
{
"compilerOptions": {
// opciones actuales
},
"watchOptions": {
"watchFile": "fixedPollingInterval",
"watchDirectory": "fixedPollingInterval"
}
}
tsconfig.json │ ├── Propósito: Configuración centralizada del compilador │ ├── Creación: npx tsc --init │ ├── Estructura: │ ├─ compilerOptions: Opciones de compilación │ ├─ include: Qué archivos compilar │ └─ exclude: Qué archivos NO compilar │ ├── Opciones principales: │ ├─ target: Versión JavaScript (es2020 recomendado) │ ├─ module: Sistema de módulos (commonjs) │ ├─ outDir: Carpeta salida (./dist) │ ├─ rootDir: Carpeta entrada (./src) │ ├─ strict: Tipado estricto (true) │ └─ esModuleInterop: Compatibilidad (true) │ ├── Compilación: │ ├─ npx tsc: Compilar una vez │ └─ npx tsc --watch: Compilación automática │ └── Flujo de desarrollo: 1. Configuras tsconfig.json una vez 2. Ejecutas npx tsc --watch 3. Desarrollo sin pensar en compilación 4. El compilador hace su trabajo automáticamente
tsconfig.json es el "centro de control" de tu proyecto TypeScript. Una vez configurado, no necesitas pensar en opciones de compilación. El compilador sabrá exactamente qué hacer, y puedes enfocarte en escribir buen código.
El tsconfig.json es el cerebro de tu proyecto en TypeScript. Define cómo el compilador debe comportarse, qué archivos incluir y qué reglas de seguridad aplicar.
Pilares de Configuración
compilerOptions: Controla el comportamiento del compilador. Aquí defines la versión de JavaScript de salida (target), el sistema de módulos (module) y la rigurosidad de los tipos (strict).include y exclude: Determinan qué archivos forman parte de la compilación y cuáles ignorar, optimizando el rendimiento y evitando errores innecesarios.Por qué se crean tantos archivos con otras extensiones como .d.ts .d.ts.map .js.map?
Porque por defecto está activado estas opciones.
// Other Outputs // "sourceMap": true, // "declaration": true, // "declarationMap": true,
sin embargo según la doc en desarrollo, depuración son recomendable, por ahora deshabilitar.