II. Angular 4 Openwebinars

Typescript part I

¿Por qué usar typescript?

Aunque sea un lenguaje nuevo (y eso implica tener que aprenderlo) es muy fácil entenderlo porque:

• Soporta todas las características de Ecmascript 2015
• Encaja muy bien con la filosofía de Angular (de detectar fallos en compilación)
• Nos permite usar anotaciones (también llamados decoradores) para configurar un componente.
• Es un subconjunto de Ecmascript 2015 (ES6) con dos diferencias grandes: tipos y anotaciones.

Características de ES2016

Template literals

• Multilínea
• Interpolación con sintaxis ${variable}
  • Se evalúa cuando se define la cadena, no de forma dinámica como angular
• Permiten parseo de cada parte de la cadena, tagged template literals

let/const

• Reemplazo a var para declarar variables
• Scope restringido al bloque

      for (var i = 0; i < 10; i++) {
          // algo
      }
      console.log(i) // 10!

      for (let j = 0; j < 10; j++) {
          // algo
      }
      console.log(j) // j is not defined

• Sin hoisting, no podemos usar una variable antes de definirla
• Binding en cada iteración, nos permite crear funciones en bucles que utilicen variables dentro del for.

Arrow functions

• Funciones expresadas de forma compactas

  increment = function(x) {
        return x+1
  };

  increment = x => x+1;

• Con retorno implícito si sólo tienen 1 expresión (no hace falta el return ni las llaves)
• No hace faltan los paréntesis en los parámetros si sólo tienen 1 (sino () => 1 o (a,b)=>a+b)
• No bindean this, por lo que es más fácil definir event handlers en el DOM.

for ... of

• Iteración mejorada (no recorre propiedades padre como for in)
• Funciona con todos los iterables (como strings)
• Combinable con destructuring

Sintaxis corta de objetos

Forma breve de definir objetos que usar como nombre de la variable el nombre de la propiedad.

    let name = 'nhpatt';
    obj = {name: name} // antigua forma
    obj = {name} // nueva forma

Rest y spread

Operadores (diferentes!) con la misma sintaxis: ... (3 puntos seguidos)

Spread sirve para extraer valores de un array o un objeto:

    log(...[1, 2, 3]); // uso de spread operator

    function log(a, b, c) {
        console.log(`first value is ${a}, second is ${b} and third ${c}`)
    };

Rest para la operación inversa, de elementos a array:

    log(1, 2, 3); // uso de rest operator

    function log(... array) {
        console.log(array) // array [1, 2, 3]
    };

Valores por defecto

En parámetros de una función

    function ejemplo(valor = 1) {

    }

Typescript part II

Destructuring

Descomponer arrays y objetos a variables

let arr = [0, 1, 2];

let [a, b, c] = arr;

console.log(a, b, c) // 0, 1, 2

Se puede combinar con valores por defecto y operador rest.

let arr = [0, 1, 2];

let [a, ...b] = arr;

console.log(a, b) // 0, [1, 2]


let [a, b, c, d = 3] = arr;

console.log(a, b, c, d) // 0, 1, 2, 3

También podemos usarlo para invertir variables

let a = 0;
let b = 1;

[b, a] = [a, b];

console.log(a, b) // 1, 0

O para transformar parámetros de entrada de funciones

let arr = [0, 1];

log(arr);

function log([a, b]) {
    console.log(a, b)
}

Más características de ES2015/ES6

• Soporte para Maps & Sets
• Soporte nativo de promesas
• Async/await
• Módulos

Clases

Azúcar sintáctico sobre la herencia prototípica con soporte de:

• Herencia (extends)
• Constructores (constructor() {})
• Métodos de instancia (metodo() {})
• Métodos estáticos (static metodo() {})
• Overrides de métodos a hijos (super.metodo())
• Llamadas a constructores padre (super())

class AppComponent {

 atributo;

 metodo() {
 }

 constructor() { }
}

Typescript part III

Diferencias de Typescript

• Tipos
• Interfaces
• Visibilidad
• Decoradores
• Sólo 1 constructor
• Constructores breves

Tipos

Els tuipus són:

• boolean, number, string, arrays, enum (enumerados), Any (cualquiera), Void (ninguno), Object

let cadena: string;
cadena = 'Hola';
cadena = 2: // ERROR!

• Con tipado gradual. Podemos no escribir un tipo y el compilador intentará inferirlo y hacer comprobaciones en tiempo compilación.
• Tipo any para saltarse las comprobaciones de tipos.
• La sintaxis en arrays es

let array1: Array<number>;
let array2: number[];
==Interfaces==
No generan código en producción, sólo son comprobaciones en tiempo de ejecución
<pre>
interface Talk {
    name: String;
}

let charla = {name: 'Rx'}; //implementación implícita

class MyTalk implements Talk {
    name = 'Rx';
}

let charla2 = new MyTalk(); //implementación explícita

Visibilidad

Public por defecto.

Constructores breves

constructor(public name = 'Rx') {}

Equivale a definir un atributo y fijar su valor:

name;

constructor(name = 'Rx') {
 this.name = name;
}

Operador Elvis (NO es de Typescript, es sintaxis de templates de Angular)

Previene errores al recorrer un objeto con valores nulos

{{objeto?.propiedad?.valor}}

Typescript part IV

• Tipos unión North | East;
• Tipos función en interfaces
• Generics y constraints
• Mixins y merging

Novedades en Typescript 2.1, 2.2 y 2.3

• Object Spread y Rest
• Iteradores asíncronos
• Mejoras en mixins
• Tipo Object
• new.target
• Valores por defecto en genéricos
• -strict flag

---

creat per Joan Quintana Compte, març 2019