No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Veamos el TSConfig.json

6/24
Recursos

Nos ayuda a ahorrar mucho trabajo manual como transpilar archivo por archivo, indicar el target, etc.

Creando un archivo TSConfig.json

En la terminal, ubicándonos dentro del directorio en el que queremos que se cree el archivo, ejecutemos:

npx tsc --init

Nos creará automáticamente el archivo con propiedades básicas activadas:
Resultado al correr el comando: npx tsc --init

Dentro del archivo TSConfig.json podemos ver que tiene muchas propiedades comentadas (desactivadas) y de las cuales solo algunas están activadas.

Compilación en TypeScript

Nuestro código TypeScript se transpilará según las propiedades indicadas en nuestro archivo `TSConfig.json``:

npx tsc

Compilación en tiempo real

Nos puede resultar tedioso estar ejecutando el comando anterior siempre después de escribir nuestro código. Para evitar esto, podemos hacer que el compilador esté detectando cada cambio que realicemos en nuestros archivos TypeScript y haga la transpilación de inmediato:

npx tsc --watch

Proyecto

  1. Creemos el archivo TSConfig.json en nuestro proyecto
  2. Activamos las siguientes propiedades dentro de dicho archivo:
  • outDir: indicando la carpeta dist como el directorio destino de los archivos transpilados
    Ejemplo de outDir

  • rootDir: indicamos que nuestros archivos TypeScript, los cuales serán “compilados” luego, estarán en la carpeta src
    Ejemplo de rootDir

  1. Creamos el archivo 02-demo2.ts dentro de la carpeta src con el siguiente código:
const numbers = [1,3,4];
  1. Probemos la compilación de nuestros archivos:
npx tsc
Estructura de archivos del proyecto de TypeScript

Observaremos que los archivos transpilados se encuentran en nuestra carpeta dist.

Contribución creada por: Martín Álvarez.

Aportes 18

Preguntas 10

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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

Para llegar a este curso debes saber por lo menos los fundamentos basicos de JS

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.

ES2016 no es ES6.
.
ES2016 == ES7
ES2015 == ES6
.
Fuente:
https://lenguajejs.com/javascript/introduccion/ecmascript/#versiones-de-ecmascript
.
El archivo tsconfig.json tiene por defecto un target ES7

npx tsc --init

Para abrir la terminal de VSCode puede pueden utilizar los siguientes shortcuts

Ctrl + j

o

Ctrl + `

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

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

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.

Otra alternativa a npx tsc --watch
npx tsc -w *.ts

Wooow es como NPM :0

Comandos para inicializar un archivo de configuración de typescript y para observar un archivo y transpilarlo automáticamente a javascript

Cabe acotar que:

ES2016 aka ES7 is the version of ECMAScript corresponding to the year 2016. This version does not include as many new features as those that appeared in ES6 (2015). However, some useful features have been incorporated.

¿Y cómo apagas nuevamente el watch?
vuelves a ejecutar el comando en consola

npx tsc src/*.ts --outDir dist --target es6

y se detiene el watch y para habilitar

npx tsc --watch
  1. Veamos el TSConfig.json
    Viste lo anterior, que es tedioso estar poniendo demasiadas veces las mismas opciones de compilación, por lo que podemos crear un archivo llamado tsconfig.json y poner las opciones de compilación ahí, de esta manera no tenemos que estar poniendo las opciones de compilación cada vez que queramos compilar nuestro código typescript.
  • Crear un archivo por defecto de configuración de typescript
    $ npx tsc --init

  • Ahora ya no es necesario mandarle otro flag a la hora de compilar, ya que el compilador de typescript va a buscar el archivo tsconfig.json y va a tomar las opciones de compilación de ahí.
    $ npx tsc

  • Para finalizar, cuando hacemos un cambio en nuestro código typescript, es tedioso estar compilando ese código muchas veces, para solucionar esto, podemos añadir como un “escuchador de cambios” a nuestro compilador de typescript, de esta manera cada vez que hagamos un cambio en nuestro código typescript, el compilador de typescript va a compilar automáticamente nuestro código typescript a javascript.
    $ npx tsc --watch

excelente, ese comando es super bueno

En consola ejecutar:

npx --init

Entrar al archivo tsconfig.json y descomentar outDir, luego add la ruta donde vamos a guardar los archivos compilados.
Descomentar rootDir y add la ruta donde estan los archivos .ts

Para compilar constantemente se utiliza –watch y se ejecuta de la siguiente manera:

npx tsc --watch

npx tsc --init

npx tsc

npx tsc --watch