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 鈥渃ompilados鈥 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 鈥渆scuchador 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 鈥搘atch y se ejecuta de la siguiente manera:

npx tsc --watch

npx tsc --init

npx tsc

npx tsc --watch