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
Introducción a TypeScript
Por qué usar TypeScript
TypeScript vs. JavaScript
Configurado nuestro proyecto
Atrapando bugs
El compilador de TypeScript
Veamos el TSConfig.json
Tipos de datos primitivos
Qué es el tipado en TypeScript
Tipos inferidos
Numbers
Booleans
Strings
Arrays
Tipos de datos especiales
Any
Union Types
Alias y tipos literales
Null y Undefined
Funciones
Retorno de funciones
Objetos en funciones
Objetos como tipos
Módulos: import y export
Usando librerías que soportan TypeScript
Usando librerías que NO soportan TypeScript
Próximos pasos
Toma el Curso de Tipos Avanzados y Funciones en TypeScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Convierte tus certificados en títulos universitarios en USA
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
20 Días
0 Hrs
52 Min
9 Seg
Veamos el TSConfig.json
6/24Recursos
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.jsonen nuestro proyecto - Activamos las siguientes propiedades dentro de dicho archivo:
outDir: indicando la carpeta
distcomo 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.tsdentro 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 26
Preguntas 13
Ordenar por:
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.
Para abrir la terminal de VSCode puede pueden utilizar los siguientes shortcuts
Ctrl + j
o
Ctrl + `
npx tsc --init
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
## **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:
Este comando crea un archivo de configuración con ajustes predeterminados, similar al siguiente:
\- 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:
### 
Este comando leerá la configuración y transpilará automáticamente todos los archivos `.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:
Con esta opción, cada vez que realices un cambio en tu código TypeScript, el compilador lo detectará y generará el archivo JavaScript correspondiente sin necesidad de ejecutar manualmente el comando cada vez.
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.
les comparto el \[link]\([TypeScript: TSConfig Reference - Docs on every TSConfig option (typescriptlang.org)](https://www.typescriptlang.org/tsconfig)) a la referencia de TSConfig en la documentación oficial
Otra alternativa a
npx tsc --watch
npx tsc -w *.ts
Con el comando `npx tsc --watch` permite leer constantement los archivos TypeScript para transpilarlos en el momento.
Con el comando `npx tsc` permite leer el archivo de configuración tsconfig.json para saber la configuración con la que debe transpilar los archivos TypeScript.
El comando `npx tsc --init` permite crear un archivo tsconfig.json con una configuración por defecto.
El archivo `tsconfig.json` permite definir la configuración de nuestro proyecto y especificarle opciones como cuál será el target, el outDir, etc.
Jeje, creo que ese paso lo adelante en la clase pasada, pero ahora entiendo de una forma mas simple esto.
Dejo mi aporte de esta clase
https://github.com/CarlosArgelio/typescript-basic/commit/e960faa61c3c0e42d26a5e7da8c925ffad055361
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
- 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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?