Angular
BECA Java
Verano 2018
Taller de Angular
Herre - jherreri@[Link]
[Link]@[Link]
Taller de Angular
Typescript
para javeros
01
Typescript
para
javeros
Taller Angular Typescript para los que se han criado con Java
Si vengo del mundo Java,
¿Cómo me gustaría que
fuera el mundo Front?
Taller Angular Typescript para los que se han criado con Java
Si vengo del mundo Java, ¿Cómo me gustaría que fuera el mundo Front?
• Un lenguaje orientado a objetos con clases y herencia
• Tipado estático
• Poder ver al codificar como se autocompleta el código
• Cuando hago un cambio en una función/método saber las referencias y poder
reactorizar
• Navegar entre las clases de mi aplicación
• En definitiva, un IDE de desarrollo específico!!!!!!!!
Taller Angular Typescript para los que se han criado con Java
Si vengo del mundo Java, ¿Cómo me gustaría que fuera el mundo Front?
Además, si puede ser:
• Que esté maduro y se use en producción
• Que haya buena documentación en la red
• Que tenga aceptación por parte de la comunidad de desarrollo
• Que sea muy sexy pese a que somos gente que venimos de Back
Taller Angular Typescript para los que se han criado con Java
[Link]
Taller Angular Typescript para los que se han criado con Java
¿Qué es Typescript?
• Un superconjunto de JavaScript que añade tipos
estáticos
• Soporta orientación a objetos con clases y
herencia
• El compilador de TypeScript genera código JS
que se ejecuta en cualquier browser
[Link]
Taller Angular Typescript para los que se han criado con Java
Taller Angular Typescript para los que se han criado con Java
¿Qué son ES6 y ES7?
• ES6 es la última versión de JS (pero ningún navegador la
entiende 100%)
• A ES6 ahora le llaman ES2015
• ES7 es la versión en desarrollo, aunque algunas partes
son bastante estables
• Algunas características de TypeScript se pueden usar en
JavaScript ES6
Taller Angular Typescript para los que se han criado con Java
Características de TS
• Funciones lambda (llamadas arrow functions) en las que this no
cambia de significado
• Módulos (exportar e importar elementos)
• Anotaciones
• Programación pseudo-síncrona con async / await
• Ámbito de variables de bloque (y error si se declara dos veces)
• For each
• Y más cosicas que luego vemos………
Taller Angular Typescript para los que se han criado con Java
Características de TS
• Transpilling: nuestros navegadores no saben cómo leer TypeScript
por lo que tenemos que hacer una compilación del fichero y TS y que
genere un fichero JS que sí entienda el navegador.
“Transpilar” to JavaScript en el navegador “Transpilar” to JavaScript antes de mandarlo al navegador
Typescript para los que se han criado con Java
Clases Java VS Clases TypeScript
Clases Java VS Clases TypeScript
En Java las clases son públicas. En TS las clases se exportan
Clases Java VS Clases TypeScript
En TS los tipos se ponen tras el nombre del atributo y los dos puntos ( : )
Clases Java VS Clases TypeScript
En TS el constructor se define mediante “constructor”
Clases Java VS Clases TypeScript
TS sabe deducir cuál es el tipo por lo que, si quieres, puedes no indicarlo
Clases Java VS Clases TypeScript
En TS siembre que quieras acceder a un elemento de la clase tendrás que usar this
Ejercicio Clase TypeScript
TypeScript Lang. Página oficial de TypeScript
[Link]
En esta URL podremos probar la sintaxis de TS sin necesidad de instalar, de momento, nada. Ni la librería ni un IDE de
desarrollo.
Probaremos a crear una clase como la del ejemplo:
• Nombre de clase: Empleado
• Atributos
• nombre: que será de tipo texto
• salario: que será de tipo numérico.
• Constructor: recibirá como parámetro cada atributo de la clase
• Métodos: todos los getters y un método toString que devolverá una cadena con los atributos concatenados.
• Después de crear la clase, crearemos un objeto del tipo Empleado y luego invocaremos al método toString(().
Imports / Listas / foreach / lambdas
Imports / Listas / foreach / lambdas
En Java las clases de la misma carpeta son del mismo paquete.
En TS cada fichero es un módulo. Hay que importar desde otros ficheros.
Imports / Listas / foreach / lambdas
En TS las variables se declaran con “let” y tiene ámbito de bloque. No se pueden
declarar dos veces.
Se podría usar ”var” como se hace en JS pero el ámbito sería de función y se
podrían redeclarar.
Imports / Listas / foreach / lambdas
En Java List el método es “add”.
En el Array de TS el método es “push”.
Imports / Listas / foreach / lambdas
La esquivalencia a las expresiones lambda de Java se denominan
”arrow functions”.
La única diferencia es el carácter “-” para Java e “=“ para TS.
Lambdas / Arrow functions
En Java no se puede acceder desde una lambda a una variable que no
sea final. Sin embargo, en TS/JS se puede acceder e incluso se puede
modificar desde la propia arrow function.
Más características
Herencia Abstracción
class Animal { abstract class Animal {
constructor(public name: string) { } abstract makeSound(): void;
move(distanceInMeters: number = 0) { move(): void {
[Link](`${[Link]} moved ${distanceInMeters}m.`); [Link](“roaming the earth…”);
} }
}
}
Interfaces
class Snake extends Animal {
interface Person{
constructor(name: string) { super(name); }
firstName: string;
move(distanceInMeters = 5) {
lastName: string;
[Link]("Slithering...");
}
[Link](distanceInMeters);
function greeter(person: Person) {
}
return "Hello, " + [Link] + " " + [Link];
} }
let sam = new Snake("Sammy the Python"); var user = { firstName: "Jane", lastName: "User" };
[Link] = greeter(user);
[Link](1);
Más características
• Declaración de atributos directamente en el constructor
class Animal {
constructor (private name: string) {
}
}
• Getter / Setter con sintaxis de atributo
• Podemos acceder a los atributros de las clases sin utilizar explícitamente los getter y setter. ([Link] / [Link] = false)
• Atributos en clases y funciones “opcionales”
• Podemos marcar un atributo como opcional utilizando un “?” junto al nombre del atributo.
• Anotaciones
• Al igual que en Java nos permiten dar más información a la clase al ser declarada.
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: '[Link]'
})
export class AppComponent { }
• Y muchísimo más en la documentación de TypeScript: [Link]
Editores e IDEs de desarrollo
Hay plugins para la mayoría de los editores / IDES
Editores e IDEs de desarrollo
Visual Studio Code
[Link]
Editores e IDEs de desarrollo
Instalación de un entorno de trabajo
• Instalar [Link] y npm (con la instalación de Node ya tendremos npm)
• Npm es un gestor de dependencias que nos permite compartir y utilizar código reutilizable. ([Link]
• [Link] (versión recomendada para la mayoría)
• Confirmar instalación correcta desde línea de comandos:
• node –v
• npm –v
• Descargar Visual Studio Code
• [Link]
• Instalar TypeScript
• npm install –g typescript
• Comprobar instalación ejecutando el compilador en línea de comandos
• tsc
• Crear Fichero TS y HTML. Compilad el fichero TS y abrir el HTML
function greeter(person: string) { <!DOCTYPE html>
return "Hello, " + person; <html>
} <head><title>TypeScript Greeter</title></head>
<body>
let user = "Herre"; <script src="[Link]"></script>
</body>
[Link] = greeter(user); </html>
Editores e IDEs de desarrollo
Instalación de un entorno de trabajo
• Compilación directamente desde Visual Studio Code
• Creamos una carpeta de trabajo para nuestros ejemplos TS y abrimos esa carpeta en VSC
• Creamos un TypeScript de ejemplo como el que hemos puesto en la slide anterior ([Link]):
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Herre";
[Link](greeter(user));
• Compilamos desde el terminal de VSC ( Ctrl+Ñ o Ver -> Terminal Integrado) Si no funciona el compilador hay que reiniciar
Editores e IDEs de desarrollo
Instalación de un entorno de trabajo
• Ejecución desde Visual Studio Code
• Instalamos la extensión de VSC “Code Runner Extension”
• Abrir el fichero JavaScript generado ([Link]) y se puede hacer lo siguiente:
• Pulsar Ctrl+Alt+N (Botón derecho y Run Code)
• Pulsar F1 y luego seleccionar “Run Code”
• Seleccionar una sección de código y hacer cualquiera de los
dos puntos anteriores
• La salida se mostrará en la consola
Ejercicios TypeScript
Y ahora a currar un poquito
[Link]
Envío de url github, gist, zip, whatever
jherreri@[Link]
Ejercicios TypeScript
Y ahora a currar un poquito
[Link]
Soluciones
[Link]
Envío de url github, gist, zip, whatever
jherreri@[Link]
Taller Angular Typescript para los que se han criado con Java
[Link]
