Joan: /* Typescript part IV */

2019-03-21T17:08:33Z

Typescript part IV

Pàgina nova

__TOC__
=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
<pre>
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
</pre>
*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
<pre>
increment = function(x) {
return x+1
};

increment = x => x+1;
</pre>
*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.
<pre>
let name = 'nhpatt';
obj = {name: name} // antigua forma
obj = {name} // nueva forma
</pre>
===Rest y spread===
Operadores (diferentes!) con la misma sintaxis: ... (3 puntos seguidos)

Spread sirve para extraer valores de un array o un objeto:
<pre>
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}`)
};
</pre>
''Rest'' para la operación inversa, de elementos a array:
<pre>
log(1, 2, 3); // uso de rest operator

function log(... array) {
console.log(array) // array [1, 2, 3]
};
</pre>
===Valores por defecto===
En parámetros de una función
<pre>
function ejemplo(valor = 1) {

}
</pre>

=Typescript part II=
==Destructuring==
Descomponer arrays y objetos a variables
<pre>
let arr = [0, 1, 2];

let [a, b, c] = arr;

console.log(a, b, c) // 0, 1, 2
</pre>
Se puede combinar con valores por defecto y operador rest.
<pre>
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
</pre>
También podemos usarlo para invertir variables
<pre>
let a = 0;
let b = 1;

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

console.log(a, b) // 1, 0
</pre>
O para transformar parámetros de entrada de funciones
<pre>
let arr = [0, 1];

log(arr);

function log([a, b]) {
console.log(a, b)
}
</pre>
==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())
<pre>
class AppComponent {

atributo;

metodo() {
}

constructor() { }
}
</pre>

=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
<pre>
let cadena: string;
cadena = 'Hola';
cadena = 2: // ERROR!
</pre>
*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
<pre>
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
</pre>
==Visibilidad==
Public por defecto.
==Constructores breves==
<pre>
constructor(public name = 'Rx') {}
</pre>
Equivale a definir un atributo y fijar su valor:
<pre>
name;

constructor(name = 'Rx') {
this.name = name;
}
</pre>
==Operador Elvis (NO es de Typescript, es sintaxis de templates de Angular)==
Previene errores al recorrer un objeto con valores nulos
<pre>
{{objeto?.propiedad?.valor}}
</pre>

=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

{{Autor}}, març 2019

II. Angular 4 Openwebinars - Historial de revisió

Joan: /* Typescript part IV */