introducción a TypeScript y ECMAScript 6 (ES6) [miguel angel torres egea]

Aquesta pàgina és només de lectura. Podeu veure'n el codi font, però no podeu canviar-la. Consulteu el vostre administrador si penseu que això és degut a algun error.
= introducción a TypeScript y ECMAScript 6 (ES6)
  * uso intensivo en aplicaciones Angular
  * decoradores = característica experimental en ES6, pero consolidados en Angular
  * JavaScript tiene tipado débil de tipos, lo que no nos avisa de situaciones que pueden producir errores.

== TypeScript
  * {{ :development:angular:typescript.pdf |}}
  * [[https://www.typescriptlang.org/]]
  * superconjunto de ECMAScript 6 (lo dota de mayores funcionalidades, destacando el tipoado de datos)
  * ficheros **.ts**, no ejecutables directamente, necesita ser compilado
    * por defecto al compilar se genera código ECMAScript 5
  * definición de los tipos en los parámetros de las funciones

== instalación
  * <code bash>npm install -g typescript</code>

== compilación
  * compilar (tsc = TypeScript Console): ''tsc <APP>''
  * compilar automaticamente el fichero ante cambios: ''tsc <APP> -w''
  * compilar automaticamente todos los ficheros ante cambios: <code bash>tsc --init # genera fichero tsconfig.json
tsc -w # generará el fichero .js correspondiente para cada .ts</code>
  * este fichero **tsconfig.json** además:
    * versión ES que debe generarse
    * nivel exigencia de los warnings
    * compilación incremental o no
    * directorios de origen y destino
    * si se permiten características experimentales (aka decoradores)

=== ejemplo
<code javascript; app.js>
var alumno = {
	nombre: "Joan"
}

function saludar(nombre) {
   	console.log("Hola " + nombre);
}

saludar(alumno);
</code>
  * ''node app.js'' -> Hola [Object object]

<code javascript; app.ts>
var alumno = {
	nombre: "Joan"
}

function saludar(nombre:string) {
   	console.log("Hola " + nombre);
}

saludar(alumno);
</code>

== tipos
  * se declaran los tipos, aunque pueden ser inferidos por el valor
  * number, string, boolean
  * vector (array)
    * del mismo tipo
    * <code javascript>let myArray: numbers[] = [15,16];</code>
    * <code javascript>let myArray: Array<number> = [15,16];</code>
  * tupla:
    * diferentes tipos
    * <code javascript>let tupla: [string, number, boolean] = ["Juan", 8, true];</code>
  * enum
    * <code javascript>enum Vehiculo { Coche, Camion, Bus }</code>
    * <code javascript>let miVehiculo: Vehiculo = Vehiculo.camion;
console.log(miVehiculo) // 1
let otroVehiculo: string = Vehiculo[1];
console.log(otroVehiculo) // Camion</code>
  * any:
    * <code javascript>let cantidad: any = 1; # pierde el sentido usar typescript!</code>
  * void
    * valor vacío
    * <code javascript>function miFuncion(): void {
    console.log(Math.PI * 3);
}</code>
  * null
  * undefined
  * never
  * object
  * type assertions:
    * conversiones a convenio y responsabilidad del programador
    * aka **casting**
    * <code javascript>let miVariable: any = "Soy una cadena";
let unValor: string <string>MiVariable;
let unValor: string = miVariable as string;</code>

=== clases
  * definición de clases
  * por defecto visibilidad pública, permite **public**, **private**, **protected**
  * <code javascript>class Greeter {
    constructor(private greeting: string) { }
    greet() {
        return "Hello, " + this.greeting;
    }
}</code>
    * al usar **private**, sabe que **greeting** es un atributo de la clase
  * extends: creación de subclases a partir de otra
  * implements: 
    * implementa un **interface**:
      * declaración sin código ni valores
      * creación de nuevos tipos
  * abstract: clase abstracta no instanciable
  * super: hacer referencia a la superclase desde una subclase

=== interfaces
  * se declarar indicando las propiedades y métodos que contendran
  * sin valores ni métodos:<code javascript>interface Sumergible {
  tiempoMaxBajoElAgua: number;
  profundidadMaxima: number;

  ascender(): void;
}</code>
  * <code javascript>interface Producto {
    readonly nombre: string; // solo lectura
    precio?: number; // optional
    stock: number;
}

let miProd: Producto;

miProd = { nombre: "Reloj XYZ", stock: 50 }
console.log(miProd.nombre + ": " + miProd.stock + " unidades");

miProd.nombre = "Gafas sol ABC";
console.log(miProd.nombre);</code>
  * como nuevo tipo:<code javascript>interface CitaCalendario {
  fechaHora: Date;
  titulo: string;
  lugar: string;
}
let cita1: CitaCalendario;</code>
    * readonly: solo permite una sola asignación
    * ? : valor opcional