Creando nuestra primera aplicación “Hola Mundo” con TypeScript 3.9

TypeScript |

Hasta la fecha de este Post, TypeScript es uno de los lenguajes de Programación que ofrece muchas mejoras de JavaScript, más adelante no se sabe que pasará con JavaScript, puede que TypeScript reemplace oficialmente a JavaScript, esto no significa que JavaScript va quedar de lado, ya que TypeScript esta basado en JavaScript, pero bueno comencemos creando una aplicación inicial para familiarizarnos con el.

Antes de continuar, te invito a leer el artículo Que es TypeScript y otros Detalles para que te familiarices con este Post, si ya conoces sobre TypeScript, adelante puedes continuar y también te invito a escuchar el Podcast: “Que Hacer Cuando Estamos En Casa” :

Spotify:Sound Cloud:

Bien ahora continuemos con el Post: Creando nuestra primera aplicación Hola Mundo con TypeScript 3.9

TypeScript contiene un superconjunto de métodos, funciones y otras características de JavaScript, si sabes JavaScript se te debe hacer familiar el código de TypeScript.

Desplegando TypeScript

Para mantener el orden crearé un directorio o carpeta con el nombre miappts y luego accedo a este directorio o carpeta que he creado (Estoy usando la consola GitBash)

Ya que TypeScript esta basado en JavaScript, podemos instalarlo usando comandos NPM, para poder ejecutar comandos NPM necesitas instalar Node JS (Si es que no lo tienes instalado), te recomiendo leer el artículo Que es y Como instalar Node JS.

Bueno, entonces iré a mi consola de comandos y ejecuto el siguiente comando para instalarlo de manera global en mi computadora con el flag -g, así tendré soporte para otras aplicaciones que quiera desarrollar más adelante con TypeScript.

Bien con esto tenemos instalado y desplegado TypeScript 3.9 listo para usarlo.

Creando la aplicación Hola Mundo

Dentro del directorio miappts creo un archivo llamado app.ts, tu puedes ponerle el nombre que desees, si te das cuenta la extensión del archivo termina en ts, estas son las iniciales de TypeScript.

Abro el archivo app.ts y comenzaré agregando el siguiente código:

Ahora compilaré mi código TypeScript, para esto ejecuto el siguiente comando en mi consola de comandos.

En el directorio de mi proyecto, se me debe haber creado un nuevo archivo JavaScript llamado app.js

Este archivo app.js contiene el código que ha sido compilado a JavaScript, si lo abro debe tener el siguiente contenido:

Parece el mismo código, lo único que ha cambiado es la declaración de la variable usuario, en TypeScript usamos let, pero al compilarse se cambia a var.

Cuando usamos TypeScript con proyectos más grandes, veremos lo limpio, dinámico y rápido que es TypeScript para desarrollar un proyecto, Angular el popular Framework esta construido sobre TypeScript y es un ejemplo de lo potente que es TypeScript.

Ahora vamos a mostrar nuestro mensaje en una página HTML simple, para esto creoun archivo llamado index.html

Abro el archivo index.html y en el instancio el archivo app.js

Si abro el archivo index.html en el navegador, pues obtengo el mensaje Hola Mundo, Nube Colectiva

Con esto pues, hemos creado nuestra primera aplicación Hola Mundo, en otros tutoriales, crearemos aplicaciones más complejas para ver el potencial de TypeScript.

Conclusión

Puedes ver lo sencillo que es usar TypeScript, si bien creamos una aplicación simple, esta es una base para comenzar y así poder crear aplicaciones más complejas.

Nota

  • Los pasos mencionadas y el código utilizado en este Post pueden ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a TypeScript y JavaScript.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos. 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments