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
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
It helps us to save a lot of manual work like transpiling file by file, specifying the target, etc.
Creating a TSConfig.json file
In the terminal, locating us inside the directory in which we want the file to be created, let's execute:
npx tsc --initIt will automatically create the file with basic properties enabled:
Inside the TSConfig.json file we can see that it has many properties commented out (disabled) and of which only some are enabled.
Compiling in TypeScript
Our TypeScript code will be transpiled according to the properties indicated in our `TSConfig.json`` file:
npx tscReal-time compilation
We may find it tedious to be running the above command always after writing our code. To avoid this, we can make the compiler be detecting every change we make in our TypeScript files and do the transpilation immediately:
npx tsc --watchProject
- Let's create the
TSConfig.jsonfile in our project. - We activate the following properties inside that file:
outDir: indicating the
distfolder as the destination directory for the transpiled files.
rootDir: we indicate that our TypeScript files, which will be "compiled" later, will be in the
srcfolder.
- We create the file
02-demo2.tsinside the src folder with the following code:
const numbers = [1,3,4];- Let's test the compilation of our files:
npx tsc
We will notice that the transpiled files are located in our dist folder.
Contributed by: Martin Alvarez.
Contributions 27
Questions 13
Sort by:
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.
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
Para abrir la terminal de VSCode puede pueden utilizar los siguientes shortcuts
Ctrl + j
o
Ctrl + `
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:
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.
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.
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
Want to see more contributions, questions and answers from the community?