El compilador de TypeScript

Sergio Alejandro Trejo Cuxim

student•

Instalación de TypeScript

Con el siguiente comando lo instalaremos de manera global:

npm install -g typescript

Consultar la versión del compilador de TS:

tsc -v

Compilar nuestros ficheros .ts

tsc your_file.ts

Compilar de manera 'automática' nuestros ficheros .ts

tsc --watch your_file.ts

No hay que tenerle miedo al TypeScript, ya que este nos creará un archivo: your_file.js. Es decir un archivo .js compatible con todo.

Gracias por la explicación profesor.

Sergio Esteban Diaz Guerrero

student•

Excelente aporte ;) gracias colega.

Alex Leonardo Rodriguez Carvajal

student•

muchas gracias !

Francisco Javier Martínez Molina

student•

Sí estés en windows y te sale el siguiente error:

aunque hayas ejecutado:

npm install -g typescript

a mi me funciono hacer la siguiente configuración. Abrir Windows PowerShell como administrador y ejecutar:

Set-ExecutionPolicy Unrestricted

Con esto ya puedes usar el comando: tsc desde VS Code

Diego Quiroz

student•

Hola Francko! Me gustaría recomendarte que cheques Windows Subsystem For Linux, Microsoft acaba de liberar la versión 2. Te permite tener un terminal con todo el poder del linux de tu preferencia (Ubuntu, Fedora, etc.). Así no tienes que lidiar con los raros problemas que da el cmd o Powershell en Windows. Estoy seguro que te será de mucha ayuda para seguir con este y más cursos.

Alejandro Diaz

student•

Gracias super útil para resolver este problema que también se me presentó.

Aydee Quispe Mamani

student•

Si no quisieran instalar typescript de manera global, pueden ejecutar:

npx tsc file.ts

npx tsc --watch file.ts

Raul Hernández

student•

Para todos los que se preguntan que es npx

Es un comando para ejecutar paquetes de npm que viene con node :)

Moisés Manuel Morín Hevia

student•

Oka, entonces esto es un ambiente virtual.

Juan Francisco Cevallos Valdivieso

student•

Amigos si no les deja ejecutar desde la terminal del Visual Studio Code, les dejo este video que a mi me funcionó https://www.youtube.com/watch?v=zUszm-f6Xq4 solo al final pongan "Permitir scripts locales y scripts remotos firmados"

Ariel Ayala

student•

También funciona abreviando tsc -w hello.ts

Moisés Manuel Morín Hevia

student•

Thanks, lo tendré en cuenta.

Irving German Manuel Molano Torres

student•

Excelente!

Isela Reyes Perdomo

student•

Si no les funciona el comendo "tsc", escriban "npx tsc" y ya <3

Markoz Peña

student•

Buena idea, eso lo que hace es ejecutare el binario directamente

Isabella Susana

student•

Buen aporte, me sirvió!

Jorge Cruz Perez

student•

Tambien pueden hacer lo siguiente, tener dos ventanas abiertas en VSCode una de ts y la otra de js y observas los cambios en e codigo ![](

Moisés Manuel Morín Hevia

student•

Yo uso la terminal xD gracias por el aporte.

Villegas Hernández Jordán Sinai

student•

muy buen consejo gracias

Santiago Lopera Naranjo

student•

Una opción para trabar mas rapido, sería tener dos servicios levantados, el "--watch" para compilar TypeScript y "nodemon" para auto ejecutar JavaScript, así cuando uno guardemos cambios en los archivos TS podemos ver el resultado de inmediato en JS Ejemplo: tsc --watch hello.ts/ nodemon hello.js

Lina Katherine Larrea

student•

Totalmente. Y ya generando un script de node sería mucho más fácil el proceso de levantar o incluso mandar a producción el archivo :-)

Alex hernandez mitre

student•

tip de PRO.

Javi Felices

student•

Aunque **Powershell **es muy poderosa, hay otras opciones para los que usamos Windows, desde Powershell Core, que es multiplataforma, hasta Terminal, la nueva terminal para Windows 10, o una de las mejores opciones es Git Bash, cuando instalas Git en Windows tienes la opción de instalar esta terminal, por defecto está marcada, y funcionan los comandos Unix, en el caso de Luis que usa MAC, serán los mismos.

Otras opciones son ConEmu, o su versión más ligera cmder.

Lina Katherine Larrea

student•

A mi Git Bash me encanta. Lo único es que siento que no se puede personalizar tanto como las terminales de Mac o Linux T_T

Andrea Ysabel Urdaneta Durango

student•

Typescript debe ser compilado al ser un archivo con un extensión como file.ts al ser compilado nos genera los archivos file.js ya que los navegadores no entienden TypeScript sino JavaScript 😊

Loveu ❤ TypeScript por poner orden

Carlos Guerra

student•

Si en Mac les aparece este error:

Sólo ejecuten la siguiente Instrucción: $ sudo chown -R $USER /usr/local/lib/node_modules

Cesar Roman Santillan

student•

super! me ahorraste la busqueda inparable 👌

Juan Burns

student•

A mi me funciono en windows, porque será?

Erick Alonso

student•

No olviden usar el Sudo al correr el comando de instalación

sudo npm install -g typescript

Alex Camacho

teacher•

🥽 Entorno de desarrollo

El compilador de TypeScript

Para comenzar a trabajar con TypeScript se necesita tenerlo instalado de forma global en nuestro sistema, eso se logra a través del comando npm install -g typescript el cual nos instalará la versión más reciente, para comprobar que versión se instaló y que lo hemos instalado de forma correcta utilizamos el comando tsc -v.

Una vez que se tiene instalado TypeScript ya se puede comenzar a trabajar con él. Hay que recordar que los navegadores no reconocen este código por lo tanto toca transpilarlo a JavaScript. El comando tsc filename.ts realiza esta acción.

Por otro lado también tenemos este comando tsc --watch filename.ts que cada vez que salvemos cambios nos transpilará nuestro archivo de TypeScript a uno de JavaScript.

Juan Osio

student•

Lina Katherine Larrea

student•

Me encanta la manera en que has organizado las últimas clases en un solo archivo. Te tomo la palabra y voy a organizar mis apuntes así también :-)

Cesar Roman Santillan

student•

que buen resumen! muchas gracias

Ivan Andres Diaz Lopez

student•

es decir, tsc es para compilar una sola vez. y Watch es para ir actulizando el mismo archivo?

David Campos

student•

Sí, con Watch el archivo se compilará automáticamente cuando haya cambios en él.

Mauricio Moreno Morales

student•

Los watchers son comunes en una gran cantidad de compiladores o transpiladores, y funcionan de modo que detectan cuando haces un guardado en algún archivo (sea que presiones ctrl + s) y en el momento que detectan cambios transpilan el archivo que fue alterado.

Julio Loarte Huerto

student•

Si les sale este error al ver la versión del TSC:

Es porque esta deshabilitada la ejecución de scripts.
Abrir Windows PowerShell como administrador y ejecutar el comando

Get-ExecutionPolicy

Si nos devuelve Restricted(Restringido), ejecutar el siguiente comando para tenerlo como Unrestricted(Irrestricto):

Set-ExecutionPolicy Unrestricted

Con eso solucione el inconveniente que tenia al utilizar Windows Terminal. Espero les sirva.

Saludos

Ancizar Arroyo Chávez

student•

Muchas gracias, Me sirvió!!!

German Vera

student•

Hasta ahora se entiende jeje

Miguel Angel Reyes Moreno

student•

El compilador de TypeScript

Para instalar esta herramienta debemos hacer npm i -g typescript. La bandera "-g" significa "global" y podremos usar el TSC en nuestros diferentes proyectos. Una vez instalado podemos hacer tsc -v para comprobar qué versión tenemos en nuestro equipo.

¿Cómo funciona el TSC? Tenemos por ejemplo un archivo "hello.ts", el TSC lo tomará y creará un archivo "hello.js". De manera práctica podemos hacer tsc hello.ts

Luego podemos ejecutar el archivo de JavaScript con Node, haciendo node hello.js.

Tenemos la opción de "--watch", lo cual significa que con solo guardar los cambios en el archivo TS, estará modificando automáticamente el archivo JS, simplemente escribimos tsc --watch hello.ts.

Santiago Fitipaldo

student•

Por si les es de ayuda, si al ejecutar el comando 'npm install -g typescript' en MAC reciben un error de EACCES, simplemente ingresen el comando 'sudo npm install -g typescript' para autorizar el acceso a la carpeta donde NPM instala las dependencias globales. A mi me funciono.

Alex Camacho

teacher•

Hola Santiago, Muchas gracias por el aporte. Sigue aportando contenido valioso para la comunidad de esta forma👌 ¡Nunca pares de aprender! 💚

Angel Hernandez

student•

otra buena opcion para usar el watcher y no tener que estar compilando manualmente los archivos que modifiquemos es

tsc -w *.ts

Esto en la carpeta donde tengamos los archivos ts

El compilador de TypeScript

Introducción a TypeScript

El lenguaje de programación TypeScript

Instalación de herramientas para TypeScript

Instalación de herramientas en Windows

Navegación y refactorización

Entorno de Desarrollo

El compilador de TypeScript

El archivo de configuración de TypeScript

Mi primer proyecto TypeScript

Tipos en TypeScript

Tipado en TypeScript

Number, Boolean y String

Any

Void y never

null y undefined

Object

Array

Tupla

Enum

Unión de Tipos, Alias y Tipos Literales

Aserciones de tipo

Funciones en TypeScript

Resumen

Tipos Personalizados

Interfaces

Interfaces: propiedades opcionales

Extensión de interfaces

Clases

Clases públicas y privadas

Métodos Get y Set

Herencia de clases y propiedades estáticas

Resumen

Módulos

Principios de responsabilidad única

Resolviendo módulos

Webpack y agrupación de Módulos

Cierre

Cierre