Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 18D : 11H : 30M : 12S

Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

El compilador de TypeScript5/32

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.

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

npx tsc file.ts

npx tsc --watch file.ts

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”

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

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

También funciona abreviando tsc -w hello.ts

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.

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
![](Captura de pantalla 2020-09-10 a la(s) 17.16.47.png

Si en Mac les aparece este error:
Screen Shot 2020-06-09 at 23.48.11.png

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

screencapture-notion-so-Instalaci-n-d7ffa3994982439092922dddaba61560-2020-10-29-21_59_30.png

Si no les funciona el comendo “tsc”, escriban “npx tsc” y ya ❤️

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

Si tienen este error al ejecutar ts -v:
tsc : No se puede cargar el archivo C:\Users\JHONATAN1\AppData\Roaming\npm\tsc.ps1 porque la ejecución de scripts está deshabilitada en este sistema…

Les recomiendo estos pasos a ejecutar:

  • Ejecutar windows + R --> gpedit.msc
  • ir a Plantillas administrativas> Componentes de Windows> Windows PowerShell>
  • Seleccionar Activar la ejecución de scripts, click derecho, editar
  • Seleccionar Habilitada y Permitir todos los scripts, Aplicar.
    Espero y les sirva.

Hasta ahora se entiende jeje

tsc es el compilador de TyprScript y nos permite implementar una servico llamado watch para monitorear los cambios dentro de nuestro archivo ts

Saludos! No sé si a alguien le pasó pero estoy trabajando en un entorno Windows y prácticamente al ejecutar tsc con el flag --watch me daba un error que hacía referencia a que estaba protegido de los scripts. Para solucionar esto es necesario abrir la PoweShell (como Administrador) y pegar el siguiente comando Set-ExecutionPolicy Unrestricted y decir sí a todo

¿Hay ocaciones particulares donde debamos usar tsc unicamente o tsc --watch, o siempre podremos usar ambos?

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
Captura de pantalla 2020-12-14 204428.png

🥽 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.

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

sudo npm install -g typescript

Si quieren probar TypeScript le recomiendo mucho usar el playground que puede interactuar con el enteramente en web es oficial por parte de los creadores del lenguaje.

https://www.typescriptlang.org/play

Si te sale algún error como lo siguiente:
-> tsc: command not found
->tsc: comando no encontrado

Ejecuta los siguientes comandos.

Typescript observe los cambios en tu archivo:
->npx tsc --watch nombre_de_tu_archivo.ts

NodeJS observe los cambios en tu archivo compilado js:
->npm install nodemon -g
-> npx nodemon nombre_de_tu_archivo.js

Solo como curiosidad…
Esta forma de trabajar ya la usaba antes de conocer TypeScript.
Usaba el comando de consola watch** combinado con node:

watch node archivo.js

**
$ watch
Usage:
watch [options] command
Options:
-b, --beep beep if command has a non-zero exit
-c, --color interpret ANSI color and style sequences
-d, --differences[=<permanent>]
highlight changes between updates
-e, --errexit exit if command has a non-zero exit
-g, --chgexit exit when output from command changes
-n, --interval <secs> seconds to wait between updates
-p, --precise attempt run command in precise intervals
-t, --no-title turn off header
-w, --no-wrap turn off line wrapping
-x, --exec pass command to exec instead of “sh -c”

-h, --help display this help and exit
-v, --version output version information and exit

For more details see watch(1).

Interesante lo del watch, se me hace como el nodemon para nodejs

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.

Se encarga de verificar los diferentes tipos de procesamiento. main.ts -> Tsc -> main.js
tsc main.ts -> main.js -> node hello.js
tsc --watch main.ts = Ejecuta un servicio que observa los cambios en el archivo.
El código en TS se trabaja & se compila a JS luego todo el tiempo se esta monitoreando & compilando a JS.

Para los que tienen MAC y no pudieron instalar aca les dejo una solucion:
1 . sudon npm install -g typescript
2 . pasword (ingresar la clave)
PlatziSalu2!

No he podido avanzar en el curso, tengo un error me dice: “tsc no reconoce como un comando interno o esterno, programa o archivo por lotes ejecutables”

alguien me puede ayudar con eso?

Tambien pueden evitar tener que instalar typescript globalmente que en muchos casos es innecesario usando

npx tsc --version

Lo único que le falta a este proceso de desarrollo es usar nodemon:

npm install -g nodemon
nodemon hello.js

comando: tsc --watch

Typescript looks awesome 😎
Estoy muy emocionado con este curso.
![ts](ts.JPG

En mi caso para usar el comando tsc, modifiqué la política para el usuario actual:
politicas PowerShell.jpg

Al ejecutar tsc hello.ts también me ejecuta, tengo la versión 12.16.0 de node.

.

Usando el compilador
(Entrada)Hello.ts - TS  (Salida)hello.js

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.

El profesor dijo que no se podia ejecutar el archivo Typescript con node, lo intente y si funciono…

.

THE COMPILER OF TYPESCRIPT
Veremos la estructura de un proyecto puro en typescript

src → components → utils.ts

VSC es una herramienta muy util a la hora de utilizar typescript

ejemplo cambiamos el nombre de un objeto que puede que se este haciendo uso de el en otros archivos

usamos f2 para remplazar el nombre y vsc lo detectara los cambios que hicimos y que mas archivos afecta este cambio y lo que tenemos que hacer es guardar cambios en dicho archivo y quedaran los cambios.

TypeScript Programming with Visual Studio Code

a comenzar con fuerza

Esta bien decir que TypeScript es a JS lo que SASS es a CSS (Por dar un ejemplo) ó Pug a HTML ? 🤥🤥

aporte.png

Funciona perfecto.

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.

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

npx tsc file.ts

npx tsc --watch file.ts

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”

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

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

También funciona abreviando tsc -w hello.ts

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.

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
![](Captura de pantalla 2020-09-10 a la(s) 17.16.47.png

Si en Mac les aparece este error:
Screen Shot 2020-06-09 at 23.48.11.png

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

screencapture-notion-so-Instalaci-n-d7ffa3994982439092922dddaba61560-2020-10-29-21_59_30.png

Si no les funciona el comendo “tsc”, escriban “npx tsc” y ya ❤️

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

Si tienen este error al ejecutar ts -v:
tsc : No se puede cargar el archivo C:\Users\JHONATAN1\AppData\Roaming\npm\tsc.ps1 porque la ejecución de scripts está deshabilitada en este sistema…

Les recomiendo estos pasos a ejecutar:

  • Ejecutar windows + R --> gpedit.msc
  • ir a Plantillas administrativas> Componentes de Windows> Windows PowerShell>
  • Seleccionar Activar la ejecución de scripts, click derecho, editar
  • Seleccionar Habilitada y Permitir todos los scripts, Aplicar.
    Espero y les sirva.

Hasta ahora se entiende jeje

tsc es el compilador de TyprScript y nos permite implementar una servico llamado watch para monitorear los cambios dentro de nuestro archivo ts

Saludos! No sé si a alguien le pasó pero estoy trabajando en un entorno Windows y prácticamente al ejecutar tsc con el flag --watch me daba un error que hacía referencia a que estaba protegido de los scripts. Para solucionar esto es necesario abrir la PoweShell (como Administrador) y pegar el siguiente comando Set-ExecutionPolicy Unrestricted y decir sí a todo

¿Hay ocaciones particulares donde debamos usar tsc unicamente o tsc --watch, o siempre podremos usar ambos?

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
Captura de pantalla 2020-12-14 204428.png

🥽 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.

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

sudo npm install -g typescript

Si quieren probar TypeScript le recomiendo mucho usar el playground que puede interactuar con el enteramente en web es oficial por parte de los creadores del lenguaje.

https://www.typescriptlang.org/play

Si te sale algún error como lo siguiente:
-> tsc: command not found
->tsc: comando no encontrado

Ejecuta los siguientes comandos.

Typescript observe los cambios en tu archivo:
->npx tsc --watch nombre_de_tu_archivo.ts

NodeJS observe los cambios en tu archivo compilado js:
->npm install nodemon -g
-> npx nodemon nombre_de_tu_archivo.js

Solo como curiosidad…
Esta forma de trabajar ya la usaba antes de conocer TypeScript.
Usaba el comando de consola watch** combinado con node:

watch node archivo.js

**
$ watch
Usage:
watch [options] command
Options:
-b, --beep beep if command has a non-zero exit
-c, --color interpret ANSI color and style sequences
-d, --differences[=<permanent>]
highlight changes between updates
-e, --errexit exit if command has a non-zero exit
-g, --chgexit exit when output from command changes
-n, --interval <secs> seconds to wait between updates
-p, --precise attempt run command in precise intervals
-t, --no-title turn off header
-w, --no-wrap turn off line wrapping
-x, --exec pass command to exec instead of “sh -c”

-h, --help display this help and exit
-v, --version output version information and exit

For more details see watch(1).

Interesante lo del watch, se me hace como el nodemon para nodejs

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.

Se encarga de verificar los diferentes tipos de procesamiento. main.ts -> Tsc -> main.js
tsc main.ts -> main.js -> node hello.js
tsc --watch main.ts = Ejecuta un servicio que observa los cambios en el archivo.
El código en TS se trabaja & se compila a JS luego todo el tiempo se esta monitoreando & compilando a JS.

Para los que tienen MAC y no pudieron instalar aca les dejo una solucion:
1 . sudon npm install -g typescript
2 . pasword (ingresar la clave)
PlatziSalu2!

No he podido avanzar en el curso, tengo un error me dice: “tsc no reconoce como un comando interno o esterno, programa o archivo por lotes ejecutables”

alguien me puede ayudar con eso?

Tambien pueden evitar tener que instalar typescript globalmente que en muchos casos es innecesario usando

npx tsc --version

Lo único que le falta a este proceso de desarrollo es usar nodemon:

npm install -g nodemon
nodemon hello.js

comando: tsc --watch

Typescript looks awesome 😎
Estoy muy emocionado con este curso.
![ts](ts.JPG

En mi caso para usar el comando tsc, modifiqué la política para el usuario actual:
politicas PowerShell.jpg

Al ejecutar tsc hello.ts también me ejecuta, tengo la versión 12.16.0 de node.

.

Usando el compilador
(Entrada)Hello.ts - TS  (Salida)hello.js

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.

El profesor dijo que no se podia ejecutar el archivo Typescript con node, lo intente y si funciono…

.

THE COMPILER OF TYPESCRIPT
Veremos la estructura de un proyecto puro en typescript

src → components → utils.ts

VSC es una herramienta muy util a la hora de utilizar typescript

ejemplo cambiamos el nombre de un objeto que puede que se este haciendo uso de el en otros archivos

usamos f2 para remplazar el nombre y vsc lo detectara los cambios que hicimos y que mas archivos afecta este cambio y lo que tenemos que hacer es guardar cambios en dicho archivo y quedaran los cambios.

TypeScript Programming with Visual Studio Code

a comenzar con fuerza

Esta bien decir que TypeScript es a JS lo que SASS es a CSS (Por dar un ejemplo) ó Pug a HTML ? 🤥🤥

aporte.png

Funciona perfecto.