04-angular2-typescript

Vista previa del material en texto

Typescript 
Introducción 
Recordemos que Angular es construido bajo typescript, también debemos 
saber que tendremos la posibilidad de crear aplicaciones con Angular 
utilizando typescript y ecmascript en sus distintas versiones. 
• TypeScript es un lenguaje de programación libre y de código 
abierto desarrollado por Microsoft. Es un superconjunto de 
JavaScript, que esencialmente añade tipado estático y objetos 
basados en clases. Anders Hejlsberg, diseñador de C#, ha 
trabajado en el desarrollo de TypeScript. 
• TypeScript extiende la sintaxis de JavaScript, por tanto 
cualquier código JavaScript existente debería funcionar sin 
problemas. Está pensado para grandes proyectos, los cuales a 
través de un compilador de TypeScript se traduce a código 
JavaScript original. Permite además trabajar sin problemas con 
famosas librerías de JavaScript como jQuery, MongoDB, Node.js, y 
D3.js. 
Tipos de Datos 
Gracias a los tipos en typescript podemos tipar clases, variables, 
propiedades, funciones o interfaces en typscript, en este primer tutorial 
vamos a ver los distintos tipos que tenemos disponibles, boolean, string, 
number, any, array y void, entre otros que veremos más adelante. 
Booleans 
var bool: boolean = false; 
console.log(bool); 
Strings 
var name: string = "Iparra"; 
console.log(name); 
Number 
var age: number = 34; 
console.log(age); 
Array 
var hobbies: Array<string> = ["Family", "Program"]; 
console.log(hobbies); 
Enum 
Nos son tipos, pero crean un tipo que podemos asignar más adelante 
https://angular.io/
https://www.uno-de-piera.com/category/angular2/
https://www.uno-de-piera.com/category/ecmascript/
 
enum Color {Red, Green, Blue}; 
var c: Color = Color.Blue; 
console.log(c); 
Any 
Aceptan cualquier cosa cómo su nombre indica. 
var any: any = "any"; 
 any = 23; 
 any = false; 
Void 
Se suele utilizar para funciones que no retornan nada, aquí un claro 
ejemplo. 
function setId(id: number): void{ 
 console.log(id); 
} 
Funciones 
También pueden retornar un tipo, aquí un claro ejemplo. 
function getId(): number{ 
 return 1; 
} 
 
Clases, propiedades y constructor 
Las clases en typescript son cómo en cualquier otro lenguaje de 
programación, tienen propiedades, constructor, los métodos pueden 
devolver tipos o nada (void), existe herencia, super, pueden 
implementar interfaces y todo lo que necesitamos para crear clases de 
verdad, eso es lo que es realmente typescript, herramientas que todos 
los desarrolladores han simulado durante mucho tiempo utilizando 
javascript. 
class User 
{ 
 id: number; 
 name: string; 
 email: string; 
 hobbies: Array<string>; 
 
 constructor(id: number, name: string, email: string, hobbies: 
Array<string>) 
 
 { 
 this.id = id; 
 this.name = name; 
 this.email = email; 
 this.hobbies = hobbies; 
 } 
} 
var user = new User(1, "iparra", "iparra@mail.com", ["Family", 
"Program"]); 
console.log(user); 
Nota: puede seguir el siguiente enlace para activar plugin para 
generar los getter y setters 
https://marketplace.visualstudio.com/items?itemName=Wilson-Godoi.wg-
getters-and-setters 
EN ANGULAR: una clase es creada con el siguiente comando, tener en 
cuenta que debemos estar ubicados dentro del proyecto angular: 
> ng new class path-al-archivo/nombre-clase 
 
Ejemplo: 
> ng new class models/user 
Angular creará un archivo user.ts en el path especificado, luego 
queda para el programador establecer sus atributos y métodos. También 
podríamos haber optado de crear el archivo en forma manual en la 
ubicación que quisiéramos sin la necesidad de ejecutar comando 
alguno. 
Herencia 
Para trabajar con herencia en typescript simplemente debemos utilizar 
la palabra clave extends, por ejemplo. 
class Vehicle { 
 wheels:number; 
 fuel: string; 
 private color: string; 
 constructor(wheels: number, fuel: string, color: string = 
'White') { 
 this.wheels = wheels; 
 this.fuel = fuel; 
 this.color = color; 
 } 
} 
 
class Car extends Vehicle { 
https://marketplace.visualstudio.com/items?itemName=Wilson-Godoi.wg-getters-and-setters
https://marketplace.visualstudio.com/items?itemName=Wilson-Godoi.wg-getters-and-setters
 
 constructor() { 
 super(1, "gasoil", 'Red'); 
 } 
} 
 
class Motorcycle extends Vehicle { 
 
} 
 
var car = new Car(); 
var motorcycle = new Motorcycle(2, 'gasoline'); 
 
console.log(car); 
console.log(motorcycle); 
Interfaces en Typescript 
Las interfaces en typescript nos permiten crear contratos que otras 
clases deben firmar para poder utilizarlos, al igual que en otros 
lenguajes de programación como java o php, en typescript también 
podemos implementar más de una interfaz en la misma clase. 
interface IUser{ 
 name: string; 
 getName(): string; 
} 
 
class User implements IUser{ 
 name: string; 
 constructor(name: string) { 
 this.name= name; 
 } 
 getName(): string{ 
 return this.name; 
 } 
} 
var user = new User("iparra"); 
console.log(user); 
EN ANGULAR: una interface es creada con el siguiente comando, tener 
en cuenta que debemos estar ubicados dentro del proyecto angular: 
> ng new interface path-al-archivo/nombre-interface 
 
Ejemplo: 
> ng new interface models/iUser 
 
Angular creará un archivo i-user.ts en el path especificado, luego 
queda para el programador especificar el código de la misma. También 
podríamos haber optado de crear el archivo en forma manual en la 
ubicación que quisiéramos sin la necesidad de ejecutar comando 
alguno. 
 
Módulos en Typescript 
Los módulos en typescript nos permiten agrupar alguna lógica en 
trozos de código para que sean exportados y utilizados donde y cuando 
necesitemos, es una forma de crear aplicaciones escalables con cierto 
orden y un código fácil de mantener. Aquí se observa un ejemplo que 
no es tan complejo. 
Módulo con clases y funciones 
 
module Shapes 
{ 
 interface IShape{ 
 type(): string; 
 } 
 export class Triangle implements IShape { 
 type(): string{ 
 return "Triangle"; 
 } 
 } 
 export class Square implements IShape { 
 type(): string{ 
 return "Square"; 
 } 
 } 
 //sólo es útil desde dentro del modulo 
 class Circle implements IShape{ 
 type(): string{ 
 return "Circle"; 
 } 
 } 
 
 export function nameModule(): string{ 
 return "Shapes"; 
 }; 
} 
 
var triangle = new Shapes.Triangle(); 
console.log(triangle.type()); 
var square = new Shapes.Square(); 
console.log(square.type()); 
 
/*var circle = new Shapes.Circle(); // error 
console.log(circle.type());*/ 
 
console.log(Shapes.nameModule()); 
Si te fijas, al no utilizar la palabra clave export con la clase 
Circle no podemos utilizarla desde fuera del módulo, es decir, es de 
ámbito privado y sólo accesible desde el mismo módulo. 
Es interesante ver cómo podemos definir una lógica dentro de un 
módulo, clases, interfaces o funciones para después importarlas donde 
necesitemos y utilizarlas. 
Añadir un método a una clase que esté dentro de un módulo es muy 
sencillo, aquí tenemos el ejemplo de otro módulo que hace la 
validación de un email. 
Funciones en Typescript 
Las funciones en typescript son lo mismo que en javascript, la 
principal diferencia son los tipos, pueden tener argumentos tipados y 
devolver un tipo de dato o no devolver nada (void). 
Vamos a ver cómo podemos crear funciones en typescript para entender 
cómo funcionan. 
Definir una función con parámetros 
 
function sum(a: number, b: number): number{ 
 return a + b; 
} 
 
let varSum: (a: number, b: number)=> number= 
function(a: number, b: number): number 
{ 
 return a + b; 
} 
 
console.log(sum(1, 5)); 
console.log(varSum(1, 5)); 
Cómo puedes ver, ambashacen lo mismo, una sencilla suma, y devuelven 
un número, una es una función y otra una función asignada a una 
variable con distinta sintaxis, pero hacen exactamente lo mismo. 
Funciones con parámetros opcionales 
Aunque no es algo exclusivo de las funciones ya que se pueden 
utilizar en cualquier sitio, los parámetros opcionales nos permiten 
definir si un parámetro es requerido o no, aquí un sencillo ejemplo. 
 
function vehicleComponents(wheels: number, fuel: string, color?: 
string): string 
{ 
 if(color){ 
 return "Wheels: " + wheels + ", fuel: " + fuel + ", color: " 
+ color; 
 } 
 else{ 
 return "Wheels: " + wheels + ", fuel: " + fuel; 
 } 
} 
let vehicleWhitColor = vehicleComponents(4, 'oil', 'red'); 
let vehicleWhitouthColor = vehicleComponents(4, 'oil'); 
console.log(vehicleWhitColor); 
console.log(vehicleWhitouthColor); 
Expresiones lambda en Typescript 
Las expresiones lambda en typescript se definen con la sintaxis () => 
{} y es especialmente útil para decirle a nuestra aplicación sobre 
que contexto debe trabajar this, a continuación veremos un ejemplo 
que lo va a dejar todo mucho más claro. 
Cómo ya sabemos, this es una variable que se establece cuando una 
función se llama, this.algo, pero siempre trabaja bajo algún 
contexto, el contexto de una función, de una clase o de todo 
(window), pero a veces debemos acotar más el contexto y ahí es cuando 
entran en juego las expresiones lambda, ya que es la forma en la que 
podemos tener el contexto de this en ese mismo contexto. 
Ejemplo sin expresión lambda 
 
var station = { 
 names: ["Piera", "Martorell", "Manresa", "Igualada", "Cornellá"], 
 randomStation: function() 
 { 
 return function() { 
 var rand = this.names[Math.floor(Math.random() * 
this.names.length)]; 
 return { random : rand }; 
 } 
 } 
} 
var newStation = station.randomStation()(); 
console.log("Station: " + newStation.random); 
Y el resultado es Uncaught TypeError: Cannot read property ‘length’ 
of undefined, esto es así porque desde dentro de la función que 
devuelve la función randomStation no tenemos acceso a las propiedades 
 
del objeto station ya que this está trabajando en el ámbito global 
(window). 
Para que el ejemplo funcione sin utilizar lambda, debemos hacer lo 
siguiente, algo nada práctico ya que debemos declarar names en el 
ámbito global. 
var names = ["Piera", "Martorell", "Manresa", "Igualada", 
"Cornellá"]; 
var station = { 
 randomStation: function() 
 { 
 return function() { 
 console.log(this); 
 var rand = this.names[Math.floor(Math.random() * 
this.names.length)]; 
 return { random : rand }; 
 } 
 } 
} 
var newStation = station.randomStation()(); 
console.log("Station: " + newStation.random); 
Ahora funciona, pero mejor que eso, es utilizar expresiones lambda en 
typescript, de esta forma, names trabajará en el contexto del objeto 
station y this hará referencia a este objeto, veamos. 
Ejemplo con expresiones lambda 
 
var station = { 
 names: ["Piera", "Martorell", "Manresa", "Igualada", "Cornellá"], 
 randomStation: function() 
 { 
 //esta es la clave 
 return() => { 
 console.log(this); 
 var rand = this.names[Math.floor(Math.random() * 
this.names.length)]; 
 return { random : rand }; 
 } 
 } 
} 
var newStation = station.randomStation()(); 
console.log("Station: " + newStation.random);