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:
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
Creemos el archivo TSConfig.json en nuestro proyecto
Activamos las siguientes propiedades dentro de dicho archivo:
outDir: indicando la carpeta dist como el directorio destino de los archivos transpilados
rootDir: indicamos que nuestros archivos TypeScript, los cuales serán “compilados” luego, estarán en la carpeta src
Creamos el archivo 02-demo2.ts dentro de la carpeta src con el siguiente código:
const numbers = [1,3,4];
Probemos la compilación de nuestros archivos:
npx tsc
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?
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
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.
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
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.
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
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:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.