Scribd
Cargar
44 vistas41 páginas

Beca Java - Angular - Typescript

Este documento proporciona una introducción a Angular y TypeScript. Explica que TypeScript es un superconjunto de JavaScript que añade tipado estático y características orientadas a objetos. El documento también cubre conceptos como clases, interfaces, herencia y más características de TypeScript. Además, recomienda editores e IDEs como Visual Studio Code para desarrollar con TypeScript.

Cargado por

chicodetko
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
44 vistas41 páginas

Beca Java - Angular - Typescript

Este documento proporciona una introducción a Angular y TypeScript. Explica que TypeScript es un superconjunto de JavaScript que añade tipado estático y características orientadas a objetos. El documento también cubre conceptos como clases, interfaces, herencia y más características de TypeScript. Además, recomienda editores e IDEs como Visual Studio Code para desarrollar con TypeScript.

Cargado por

chicodetko
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 41

Angular

BECA Java
Verano 2018

Taller de Angular
Herre - [email protected]
[email protected]
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 

http://www.typescriptlang.org/
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

http://www.typescriptlang.org/
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

http://www.typescriptlang.org/play/

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 {

console.log(`${this.name} moved ${distanceInMeters}m.`); console.log(“roaming the earth…”);

} }
}
}

Interfaces
class Snake extends Animal {
interface Person{
constructor(name: string) { super(name); }
firstName: string;
move(distanceInMeters = 5) {
lastName: string;
console.log("Slithering...");
}
super.move(distanceInMeters);
function greeter(person: Person) {
}
return "Hello, " + person.firstName + " " + person.lastName;
} }

let sam = new Snake("Sammy the Python"); var user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);
sam.move(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. (foo.bar / foo.bar = 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: 'app.component.html'
})
export class AppComponent { }

• Y muchísimo más en la documentación de TypeScript: http://www.typescriptlang.org/docs/home.html


Editores e IDEs de desarrollo

Hay plugins para la mayoría de los editores / IDES


Editores e IDEs de desarrollo

Visual Studio Code

http://code.visualstudio.com/
Editores e IDEs de desarrollo

Instalación de un entorno de trabajo

• Instalar Node.js 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. (https://www.npmjs.com)
• https://nodejs.org (versión recomendada para la mayoría)
• Confirmar instalación correcta desde línea de comandos:
• node –v
• npm –v

• Descargar Visual Studio Code


• https://code.visualstudio.com/

• 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="hello-world.js"></script>
</body>
document.body.innerHTML = 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 (greeter.ts):

function greeter(person: string) {


return "Hello, " + person;
}
let user = "Herre";
console.log(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 (greeter.js) 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

https://git.io/v5g2R

Envío de url github, gist, zip, whatever


[email protected]
Ejercicios TypeScript

Y ahora a currar un poquito

https://git.io/v5g2R
Soluciones

https://git.io/v5g2r
Envío de url github, gist, zip, whatever
[email protected]
Taller Angular Typescript para los que se han criado con Java 

http://www.typescriptlang.org/

También podría gustarte