2º tutorial: Angularjs 2 desde 0 – ¿Como funciona typeScript?

0
67
Como funciona typescript
Como funciona typescript

En este segundo tutorial de Angularjs2 vamos a enseñarte con un ejemplo simple como funciona typescript y que ventajas tiene utilizarlo para tus futuras creaciones webs.

Resumen

  1. Dejar comentarios si tenéis dudas.
  2. Podéis coger los códigos de ejemplo sin problema, aunque yo no lo recomiendo ya que el objetivo es que aprendáis haciéndolo vosotros mismos.
  3. Vamos aprender Angular JS 2 con ejemplos,conceptos básicos y explicaciones sencillas desde 0. Si tienes ganas, vas a aprender sin tener conocimientos previos de este framework.

1º Paso: Creamos un fichero Javascript

Creamos un fichero .js y lo llamamos por ejemplo clase_1.js

2º Paso: Creamos una función llamada “saludo”

Vamos a empezar realizando esta función en Javascript.

function saludo(nombre){
  console.log("Bienvenido: " + nombre);
}

En esta función simple llamada “saludo” pasamos un parámetro nombre que va a imprimir por consola: Bienvenido junto al nombre como parámetro de la función. Tengo que decir que el uso de la consola es una muy buena práctica para depurar código cuando se esta trabajando en javascript.

2º Paso: Creamos un objeto

Creamos un objeto llamado persona que va a tener la propiedad nombre cuyo valor es (Jose)

var persona = {
     nombre: "Jose"

};

3º Paso: Llamamos a la función

En el tercer paso vamos a llamar a la función “saludo” y le pasamos como parámetro el objeto persona que acabamos de crear.

saludo(persona);

Código completo clase_1.js

function saludo(nombre){
 console.log("Bienvenido: " + nombre);
}

var persona = {
 nombre: "Jose"
};

saludo(persona);

4º Paso: Creamos un fichero html

Creamos un fichero .html y lo llamamos por ejemplo clase_1.html. En este fichero vamos a realizar una llamada al fichero clase_1.js.

<html>

    <head charset="utf-8">
    	<title>Clase 1: TypeScript</title>
    </head>
    <body>

    	<script type="text/javascript" src="clase_1.js"></script>

    </body>

</html>

 

5º Paso: Vamos a ejecutar el código

Nota: Como banco de pruebas para probar todos estos códigos podéis utilizar xammp 

Si ejecutamos el código y nos vamos al navegador vemos el siguiente resultado:

consola
Pulsa F12 en Chrome para poder ver la consola

Como vemos el problema podría ser bastante sencillo de ver porque el código es bastante simple, lógico ¿verdad? pero igualmente no buscamos ese resultado. Nosotros queremos que nos aparezca por consola: Bienvenido José

Si vemos el código javascript se puede interpretar sin dificultad, saludo manda un objeto llamado persona con un parámetro y la función saludo esta esperando una sola variable que sería (nombre) aquí esta el problema. Esto en javascript no hay forma de saberlo, no nos devuelve ningún tipo de error como en otros lenguajes.

¿Cómo convertimos nuestro código en typescript y para que?

Por ahora es bastante más simple de lo que uno puede llegar a pensar. Vamos a limitarnos a cambiar la extensión .js por .ts de typescript. Para mejorar nuestro código y tener un verdadero control de errores vamos a implementar en la función lo siguiente:

function saludo(nombre:string){
  console.log("Bienvenido" + nombre);
}

Con esto le estamos diciendo que el parámetro nombre de nuestra función saludo tiene que ser obligatoriamente de tipo string. Ahora guardamos los cambios y abrimos la consola de comandos en la ruta donde tengamos los ficheros. Vamos a compilar los ficheros con el siguiente comando:

Comando: tsc clase_1.ts

cmd
cmd

Cuando compilamos nos genera un nuevo archivo javascript clase_1.js y además nos devuelve un código de error por la consola: El argumento de tipo nombre {nombre:string} que sería en nuestro código: saludo(persona) no es asignable al parámetro de tipo string de la función.

Lo mejor es que no debemos buscar mucho porque no dice incluso la línea del error (9,8) que se puede interpretar como: linea: 9 y la columna 8 del código. Muy util cuando tenemos archivos con muchas líneas.

¿Cómo solucionamos el problema de la línea 9?

Muy fácil, solamente añadimos persona.nombre en el argumento y volvemos a ejecutar el comando para compilar de nuevo los ficheros:

saludo(persona.nombre);

Comando: tsc clase_1.ts

Después de realizar el comando, como he mencionado, nos genera un archivo .js con el mismo nombre que el .ts si te das cuenta typescript nos sirve como intermediario para comprobar errores del código y cuando se compila se genera el javascript. Si probamos el código ahora si funciona.

consola 2
consola 2

Conclusión: Por ahora esta sería una pequeña introducción al mundo de typescript. Algunos pueden llegar a pensar que es un poco molesto tener que escribir tsc por comando cada vez que quieres compilar el typescript, sin embargo, más adelante enseñaré a ver los códigos visualmente por pantalla.

 

 

Dejar respuesta

Please enter your comment!
Please enter your name here