Iniciando con Angular

TypeScript

Vitmar Aliaga (@cruzjhonson)

Vitmar Aliaga

@cruzjhonson

Systems Engineer / Frontend Developer             

Vitmar Aliaga (@cruzjhonson)

Empecemos

Vitmar Aliaga (@cruzjhonson)

Install

Conceptos iniciales

ES6 es la versión oficial más reciente de javascript, también conocida como ECMAScript 2015.

Vitmar Aliaga (@cruzjhonson)

Install

Conceptos iniciales

Vitmar Aliaga (@cruzjhonson)

Install

const & let

const define variables que no pueden ser reasignadas.

let en cambio simplemente define una nueva variable, y se diferencia de var en que el alcance (scope) de la variable es sólo dentro del bloque donde fue definida

const name = 'Vitmar';
function trabajar() {
    let name = 'Jhonson';
}

Vitmar Aliaga (@cruzjhonson)

Install

cadenas multilínea

Un nuevo tipo de asignación a variables de tipo cadena (string) se consigue usando backticks (`). Estas permiten incluir saltos de línea sin necesidad de agregar símbolos \r y \n.

const name = 'Vitmar';
const saluda = `Hola ${name}`;

Vitmar Aliaga (@cruzjhonson)

Install

funciones flecha

var squares = arr.map(function (x) { return x * x })

var squares = arr.map(x => x * x);

vs

Vitmar Aliaga (@cruzjhonson)

Install

desestructuración/rest/ spread

var foo = ["uno", "dos", "tres"];

// sin destructuración
var uno  = foo[0];
var dos  = foo[1];
var tres = foo[2]; // asignación en tres lineas

// con destructuración
var [uno, dos, tres] = foo; // asignación en una sola linea

[a, b] = [1, 2]
[a, b, ...rest] = [1, 2, 3, 4, 5]
{a, b} = {a:1, b:2}
{a, b, ...rest} = {a:1, b:2, c:3, d:4}  //ES2016

Vitmar Aliaga (@cruzjhonson)

Install

Crear clases

export class Heroe{
  constructor(
    public id: number,
    public nombre: string) { }
}

Esa breve sintaxis hace mucho (TypeScript shortcut.):

• Declara un parámetro constructor y su tipo.
• Declara una propiedad pública del mismo nombre.
• Inicializa esa propiedad con el argumento correspondiente al crear una instancia de la clase.

export class Heroe{
  public id: number;
  public nombre: string;

  constructor(id: number, nombre: string) {
    this.id = id;
    this.name = nombre;
 }
}

=

Vitmar Aliaga (@cruzjhonson)

Install

clases, otros

• Clases.
• plantillas (template literals).
• valores por defecto para parámetros.
• loop for-of.
• tipo de datos Map.
• nuevos métodos para tipos de datos clásicos.

• ES7 -> decoradores

Vitmar Aliaga (@cruzjhonson)

Install

Que es TypeScript?

Vitmar Aliaga (@cruzjhonson)

Install

Que es TypeScript?

TypeScript es un lenguaje gratuito y de fuente abierta (open source), desarrollado y mantenido por Microsoft. Es un superset de javascript que agrega tipos de datos y similitudes con el desarrollo orientado a objetos a javascript.

Github: http://github.com/valiaga

Slides : http://slides.com/vitmaraliaga