Introducción a TypeScript desde el punto de vista de un desarrollador Java. TS en un lenguaje que transpila a JavaScript y se puede usar tanto para el desarrollo web front-end como para el backend con Node.js. Angular 2, el framework de moda, recomienda su uso.

1. Except where otherwise noted, this work is licensed under:
http://creativecommons.org/licenses/by-nc-sa/3.0/
TypeScript para
Javeros
Cómo programar web
front-end y sentirse
como en casa
Leganés, 11 y 12 de
febrero
Micael Gallego

2. ¿Quién soy?
developer

3. ¿Quién soy?
developer

4. ¿Quién soy?
developer

6. Características
● Imperativo
● Funcional (expresiones lambda)
● Recolector de basura
● Tipos estáticos
● Orientado a objetos (con clases)
● Modularidad con paquetes

7. Funcional
expresiones lambda
Java 8
streams

8. Orientado a objetos

9. Tipado estático
Errores en tiempo de compilación

10. Tipado estático
Autocompletar

11. Tipado estático
Refactorizaciones automatizadas

12. Tipado estático
Documentación integrada en el IDE

14. ¿Web front-end?

15. ES5

16. Características
● Imperativo
● Funcional
● Recolector de basura
● Tipos dinámicos
● Orientado a objetos (con prototipos)
● Sin modularidad
ES5

17. Tipos dinámicos
● El compilador no te ayuda
● Hay que ejecutar los tests (si tienes)
● El IDE tampoco te ayuda
● No se puede refactorizar de forma automática
● El autocompletar es muy limitado
● La documentación integrada sólo aparece en
casos muy evidentes
● No se puede navegar a la implementación
ES5

18. Orientado a objetos
con prototipos
● Existen 3 formas diferentes de implementar
“clases”
● Prototipos “a mano”
● Simulación de clases con librerías
● Patrón módulo usando clousures
● Los patrones de diseño OO no se pueden
aplicar directamente
ES5

19. Sin modularidad
● Para independizar código tienes que usar
patrones basados en funciones
ES5
(function() {
var variableTemporal = "a";
//Otro código…
}());
Immediately-Invoked Function Expression (IIFE)

20. ¿Java en front-end?

22. Características
● Framework de desarrollo de aplicaciones web
AJAX / SPA
● El back-end y front-end se desarrollan en Java
● En sus primeras versiones tenía muchos
inconvenientes
● Pesado. Mucho tiempo de compilación
● Sistema de componentes propio (no bootstrap)
● Protocolo de comunicación propio

23. Características
● La versión 2.8 ha mejorado mucho
● JsInterop: Permite integrar fácilmente código Java y
JavaScript
● Se soporta Java 8 (expresiones lambda)
package com.acme;
@JsType
class Foo {
public int x;
public int y;
public int sum() {
return x + y;
}
}
Java
var foo = new com.acme.Foo();
foo.x = 40;
foo.y = 2;
foo.sum(); JS

24. Características
● No lo considero una tecnología de front-end
genérica
● Lo usaría solo para portar código Java existente a
front-end con poco coste
https://news.ycombinator.com/item?id=8554339

25. ¿Tipos estáticos y
POO con clases
en front-end?

27. Características
● Añade tipos estáticos a JavaScript ES6
● Inferencia de tipos
● Tipos opcionales
● El compilador genera código JavaScript ES5
(compatible con los navegadores web actuales)
● Orientado a Objetos con clases (no como ES5)
● Anotaciones (ES7)
http://www.typescriptlang.org/

28. Características
● Mejoras debidas a JavaScript ES6 (ES2015)
● Orientación a Objetos con clases
● Arrow functions con captura de this
● Let
● Estructuras de datos
● Módulos
● Mejoras debidas a JavaScript ES7
● Anotaciones
● Async / await

29. Ventajas frente a JavaScript
● Con el tipado estático el compilador puede verificar
la corrección de muchas más cosas que con el
tipado dinámico
● Los programas grandes son menos propensos a
errores
● Los IDEs y editores pueden: Autocompletar,
Refactorizar, Navegar a la definición
● Muy parecido a Java y C#

30. Facilidad de adopción para JavaScripters
● Los tipos son opcionales
● La inferencia de tipos permite no tener que
escribir los tipos constantemente
● En realidad es JavaScript con más cosas, así que
todo lo conocido se puede aplicar
● Un mismo proyecto puede combinar JS yTS, lo
que facilita migrar un proyecto existente

31. export class Empleado {
private nombre:string;
private salario:number;
constructor(nombre:string,
salario:number){
this.nombre = nombre;
this.salario = salario;
}
getNombre(){
return this.nombre;
}
toString(){
return "Nombre:"+this.nombre+
", Salario:"+this.salario;
}
}
TypeScript

32. Orientación a Objetos
TypeScript vs JavaScript ES5
export class Empleado {
private nombre:string;
private salario:number;
constructor(nombre:string,
salario:number){
this.nombre = nombre;
this.salario = salario;
}
getNombre(){
return this.nombre;
}
toString(){
return "Nombre:"+this.nombre+
", Salario:"+this.salario;
}
}
Clase enTypeScript
function Empleado(nombre, salario){
this.nombre = nombre;
this.salario = salario;
}
Empleado.prototype.getNombre = function(){
return nombre;
};
Empleado.prototype.toString = function(){
return "Nombre:"+this.nombre+",
Salario:"+this.salario;
};
Simulación de clase en JS ES5 con prototipos

33. public class Empleado {
private String nombre;
private double salario;
public Empleado(String nombre,
double salario){
this.nombre = nombre;
this.salario = salario;
}
public String getNombre(){
return nombre;
}
public String toString(){
return "Nombre:"+nombre+
", Salario:"+salario;
}
}
Clase en Java
export class Empleado {
private nombre:string;
private salario:number;
constructor(nombre:string,
salario:number){
this.nombre = nombre;
this.salario = salario;
}
getNombre(){
return this.nombre;
}
toString(){
return "Nombre:"+this.nombre+
", Salario:"+this.salario;
}
}
Clase enTypeScript
Orientación a Objetos
TypeScript vs Java

34. public class Empleado {
private String nombre;
private double salario;
public Empleado(String nombre,
double salario){
this.nombre = nombre;
this.salario = salario;
}
public String getNombre(){
return nombre;
}
public String toString(){
return "Nombre:"+nombre+
", Salario:"+salario;
}
}
Clase en Java
export class Empleado {
private nombre:string;
private salario:number;
constructor(nombre:string,
salario:number){
this.nombre = nombre;
this.salario = salario;
}
getNombre(){
return this.nombre;
}
toString(){
return "Nombre:"+this.nombre+
", Salario:"+this.salario;
}
}
Clase enTypeScript
Orientación a Objetos
TypeScript vs Java

35. public class Empleado {
private String nombre;
private double salario;
public Empleado(String nombre,
double salario){
this.nombre = nombre;
this.salario = salario;
}
public String getNombre(){
return nombre;
}
public String toString(){
return "Nombre:"+nombre+
", Salario:"+salario;
}
}
Clase en Java
export class Empleado {
private nombre:string;
private salario:number;
constructor(nombre:string,
salario:number){
this.nombre = nombre;
this.salario = salario;
}
getNombre(){
return this.nombre;
}
toString(){
return "Nombre:"+this.nombre+
", Salario:"+this.salario;
}
}
Clase enTypeScript
Orientación a Objetos
TypeScript vs Java

36. public class Empleado {
private String nombre;
private double salario;
public Empleado(String nombre,
double salario){
this.nombre = nombre;
this.salario = salario;
}
public String getNombre(){
return nombre;
}
public String toString(){
return "Nombre:"+nombre+
", Salario:"+salario;
}
}
Clase en Java
export class Empleado {
private nombre:string;
private salario:number;
constructor(nombre:string,
salario:number){
this.nombre = nombre;
this.salario = salario;
}
getNombre(){
return this.nombre;
}
toString(){
return "Nombre:"+this.nombre+
", Salario:"+this.salario;
}
}
Clase enTypeScript
Orientación a Objetos
TypeScript vs Java

37. public class Empleado {
private String nombre;
private double salario;
public Empleado(String nombre,
double salario){
this.nombre = nombre;
this.salario = salario;
}
public String getNombre(){
return nombre;
}
public String toString(){
return "Nombre:"+nombre+
", Salario:"+salario;
}
}
Clase en Java
export class Empleado {
private nombre:string;
private salario:number;
constructor(nombre:string,
salario:number){
this.nombre = nombre;
this.salario = salario;
}
getNombre(){
return this.nombre;
}
toString(){
return "Nombre:"+this.nombre+
", Salario:"+this.salario;
}
}
Clase enTypeScript
Orientación a Objetos
TypeScript vs Java

38. public class Empleado {
private String nombre;
private double salario;
public Empleado(String nombre,
double salario){
this.nombre = nombre;
this.salario = salario;
}
public String getNombre(){
return nombre;
}
public String toString(){
return "Nombre:"+nombre+
", Salario:"+salario;
}
}
Clase en Java
export class Empleado {
private nombre:string;
private salario:number;
constructor(nombre:string,
salario:number){
this.nombre = nombre;
this.salario = salario;
}
getNombre(){
return this.nombre;
}
toString(){
return "Nombre:"+this.nombre+
", Salario:"+this.salario;
}
}
Clase enTypeScript
Orientación a Objetos
TypeScript vs Java

39. import { Empleado } from "./Empleado";
let emps = new Array<Empleado>();
emps.push(new Empleado('Pepe', 500));
emps.push(new Empleado('Juan', 200));
for(let emp of emps){
console.log(emp.getNombre());
}
empleados.forEach(emp => {
console.log(emp);
});
Módulos /Variables / for / lambda

40. List<Empleado> emps = new ArrayList<>();
emps.add(new Empleado('Pepe', 500));
emps.add(new Empleado('Juan', 200));
for(Empleado emp : emps){
System.out.println(emp.getNombre());
}
empleados.forEach(emp -> {
System.out.println(emp);
});
Java
import { Empleado } from "./Empleado";
let emps = new Array<Empleado>();
emps.push(new Empleado('Pepe', 500));
emps.push(new Empleado('Juan', 200));
for(let emp of emps){
console.log(emp.getNombre());
}
empleados.forEach(emp => {
console.log(emp);
});
TypeScript
Módulos /Variables / for / lambda

41. List<Empleado> emps = new ArrayList<>();
emps.add(new Empleado('Pepe', 500));
emps.add(new Empleado('Juan', 200));
for(Empleado emp : emps){
System.out.println(emp.getNombre());
}
empleados.forEach(emp -> {
System.out.println(emp);
});
Java
import { Empleado } from "./Empleado";
let emps = new Array<Empleado>();
emps.push(new Empleado('Pepe', 500));
emps.push(new Empleado('Juan', 200));
for(let emp of emps){
console.log(emp.getNombre());
}
empleados.forEach(emp => {
console.log(emp);
});
TypeScript
En Java las clases de la misma carpeta se pueden usar sin importar.
EnTypeScript se tienen que importar porque cada fichero es un módulo distinto
Módulos /Variables / for / lambda

42. List<Empleado> emps = new ArrayList<>();
emps.add(new Empleado('Pepe', 500));
emps.add(new Empleado('Juan', 200));
for(Empleado emp : emps){
System.out.println(emp.getNombre());
}
empleados.forEach(emp -> {
System.out.println(emp);
});
Java
import { Empleado } from "./Empleado";
let emps = new Array<Empleado>();
emps.push(new Empleado('Pepe', 500));
emps.push(new Empleado('Juan', 200));
for(let emp of emps){
console.log(emp.getNombre());
}
empleados.forEach(emp => {
console.log(emp);
});
TypeScript
En Java usamos List y ArrayList del SDK.
EnTypeScript usamos el Array nativo de JavaScript
Módulos /Variables / for / lambda

43. List<Empleado> emps = new ArrayList<>();
emps.add(new Empleado('Pepe', 500));
emps.add(new Empleado('Juan', 200));
for(Empleado emp : emps){
System.out.println(emp.getNombre());
}
empleados.forEach(emp -> {
System.out.println(emp);
});
Java
import { Empleado } from "./Empleado";
let emps = new Array<Empleado>();
emps.push(new Empleado('Pepe', 500));
emps.push(new Empleado('Juan', 200));
for(let emp of emps){
console.log(emp.getNombre());
}
empleados.forEach(emp => {
console.log(emp);
});
TypeScript
En Java List el método es “add”
EnTypeScript Array el método es “push”
Módulos /Variables / for / lambda

44. List<Empleado> emps = new ArrayList<>();
emps.add(new Empleado('Pepe', 500));
emps.add(new Empleado('Juan', 200));
for(Empleado emp : emps){
System.out.println(emp.getNombre());
}
empleados.forEach(emp -> {
System.out.println(emp);
});
Java
import { Empleado } from "./Empleado";
let emps = new Array<Empleado>();
emps.push(new Empleado('Pepe', 500));
emps.push(new Empleado('Juan', 200));
for(let emp of emps){
console.log(emp.getNombre());
}
empleados.forEach(emp => {
console.log(emp);
});
TypeScript
Módulos /Variables / for / lambda

45. List<Empleado> emps = new ArrayList<>();
emps.add(new Empleado('Pepe', 500));
emps.add(new Empleado('Juan', 200));
for(Empleado emp : emps){
System.out.println(emp.getNombre());
}
empleados.forEach(emp -> {
System.out.println(emp);
});
Java
import { Empleado } from "./Empleado";
let emps = new Array<Empleado>();
emps.push(new Empleado('Pepe', 500));
emps.push(new Empleado('Juan', 200));
for(let emp of emps){
console.log(emp.getNombre());
}
empleados.forEach(emp => {
console.log(emp);
});
TypeScript
Módulos /Variables / for / lambda

46. Ventajas respecto a Java
Características que gustarán a los
desarrolladores Java porque simplifica
patrones comunes

47. interface SquareConfig {
color: string;
width?: number;
}
Ventajas respecto a Java
Objetos literales con verificación y sintaxis compacta
function createSquare(config: SquareConfig){
...
}
createSquare({color: "black"});
createSquare({color: "black", width: 20});

48. interface SquareConfig {
color: string;
width?: number;
}
Ventajas respecto a Java
Objetos literales con verificación y sintaxis compacta
function createSquare(config: SquareConfig){
...
}
createSquare({color: "black"});
createSquare({color: "black", width: 20});

49. class Animal {
private name:string;
constructor(name: string) {
this.name = name;
}
}
Ventajas respecto a Java
Sintaxis compacta de definición de “beans”
class Animal {
constructor(private name: string) {
}
}

50. class Animal {
private name:string;
constructor(name: string) {
this.name = name;
}
}
Ventajas respecto a Java
Sintaxis compacta de definición de “beans”
class Animal {
constructor(private name: string) {
}
}

51. class Animal { eat() { } }
class Dog extends Animal { woof() { } }
class Cat extends Animal { meow() { } }
var pet: Animal = undefined;
if (pet instanceof Dog) {
pet.woof();
} else if (pet instanceof Cat) {
pet.meow();
} else {
pet.eat();
}
Ventajas respecto a Java
Type guards Instanceof / typeof

52. class Animal { eat() { } }
class Dog extends Animal { woof() { } }
class Cat extends Animal { meow() { } }
var pet: Animal = undefined;
if (pet instanceof Dog) {
pet.woof();
} else if (pet instanceof Cat) {
pet.meow();
} else {
pet.eat();
}
Ventajas respecto a Java
Type guards Instanceof / typeof

53. Limitaciones respecto a Java
Cosas que los javeros echarán de menos

54. Limitaciones respecto a Java
● El código se ejecuta en una JavaScriptVM, se
aplican todas las limitaciones del mismo
● No hay números de 64 bits (ni long ni double)
● No hay concurrencia con memoria
compartida
● El control del recolector de basura no permite
implementar weak / soft references

55. Programación asíncrona
Simulación de sincronía con async / await
http://www.sitepoint.com/javascript-goes-asynchronous-awesome/

56. http://www.sitepoint.com/javascript-goes-asynchronous-awesome/

57. Editores / IDEs
Hay plugins para la mayoría de los editores / IDEs
SublimeText Visual Studio
Code
WebStorm

58. Editores / IDEs
Hay plugins para la mayoría de los editores / IDEs
SublimeText Visual Studio
Code
WebStorm

59. 59
WebStorm 11

60. 60
WebStorm 11

61. 61
WebStorm 11

62. 62
Atom / atom-typescript
https://atom.io/packages/atom-typescript

63. ¿TypeScript se usa?

64. TypeScript
coffeescript
ES6

65. Angular 2
TypeScript es el lenguaje recomendado

66. Angular 2 recomienda
usarTypeScript
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
name = 'Anybody';
}
app.component.ts
<h1>Hello {{name}}!</h1>
app.html

67. Otros frameworks
soportan el uso deTypeScript

68. Incluso los editores online
TypeScript se puede transpilar a ES5
directamente en el propio browser
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: {
app: "./src"
},
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});

69. ¿Preguntas?
Gracias...