II. Angular 4 Openwebinars

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Typescript part I

¿Por qué usar typescript?

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

Características de ES2016

Template literals

let/const

      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

Arrow functions

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

  increment = x => x+1;

for ... of

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

Clases

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

class AppComponent {

 atributo;

 metodo() {
 }

 constructor() { }
}

Typescript part III

Diferencias de Typescript

Tipos

Els tuipus són:

let cadena: string;
cadena = 'Hola';
cadena = 2: // ERROR!
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

Novedades en Typescript 2.1, 2.2 y 2.3


creat per Joan Quintana Compte, març 2019

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines