jeanlescure/hola-mundo-typescript.md

## hola-mundo-typescript.md

      
    Raw
  

              hola-mundo-typescript.md
            
          
    Creando nuestra primera aplicación “Hola Mundo” con TypeScript

(Fuente: Nube Colectiva)
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.
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)
# Creo el directorio o carpeta 
mkdir mi-app-ts 
 
# Ingreso al directorio o carpeta 
cd mi-app-ts
Ya que TypeScript esta basado en JavaScript, podemos instalarlo usando comandos NPM:
# Instala Typescript globalmente si no lo tienes instalado
npm install -g typescript
Nota: para poder ejecutar comandos NPM necesitas tener instalado Node JS
Bien con esto tenemos instalado y desplegado TypeScript listo para usarlo.
Creando la aplicación Hola Mundo

Dentro del directorio mi-app-ts 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.
/mi-app-ts
├── app.ts // Abro este archivo
Abro el archivo app.ts y comenzaré agregando el siguiente código:
function saludo(mensaje: string) {
    return "Hola Mundo, " + mensaje;
}
 
let usuario: string = "Nube Colectiva";
 
document.body.textContent = saludo(usuario);
Ahora compilaré mi código TypeScript, para esto ejecuto el siguiente comando en mi consola de comandos:
# Compilo mi código 
tsc app.ts
En el directorio de mi proyecto, se me debe haber creado un nuevo archivo JavaScript llamado app.js
/mi-app-ts
├── app.js // Se me ha creado este Archivo 
├── app.ts
Este archivo app.js contiene el código que ha sido compilado a JavaScript, si lo abro debe tener el siguiente contenido:
function saludo(mensaje) {
    return "Hola Mundo, " + mensaje;
}
var usuario = "Nube Colectiva";
document.body.textContent = saludo(usuario);
Parece el mismo código, lo único que ha cambiado es la declaración de la variables mensaje  yusuario, en TypeScript usamos definimos que ambas son de tipo string, pero al compilarse se quita esta definición de tipo, y de la misma manera let cambia a var.
Ahora vamos a mostrar nuestro mensaje en una página HTML simple, para esto creoun archivo llamado index.html
/mi-app-ts
├── app.js
├── app.ts
├── index.html // Abro este archivo
Abro el archivo index.html y en el instancio el archivo app.js
<!doctype html> 
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 
    <head>
     <title>Creando nuestra primera aplicación Hola Mundo con TypeScript</title>
    </head>
 
    <body>
        <!-- Acá se muestra el mensaje Hola Mundo --> 
    </body>
 
    <!-- Instancio mi archivo JavaScript --> 
    <script type="text/javascript" src="app.js"></script>
 
</html>
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.