Curso Angularn Tema 01b 15/01/2019 Curso JavaScript.

Presentación del tema: "Curso Angularn Tema 01b 15/01/2019 Curso JavaScript."— Transcripción de la presentación:

1 Curso Angularn Tema 01b 15/01/2019 Curso JavaScript

2 Introducción Typescript
Instalación y ejecución del compilador Tipos básicos Funciones Clases e interfaces Escritura de código reutilizable con genéricos Angular y Typescript

3 Introducción a typescript

4 Tipos dinámicos contra tipos estáticos
Introducción a Typescript Beneficios de aprender y utilizar Typescript

5 Diferencia entre tipos dinámicos y estáticos
Tipo determinado en la declaración Puede cambiar a lo largo de todo el programa libre de errores No puede cambiar en tiempo de ejecución sin causar un error

6 Introducción a Typescript
JavaScript fuertemente tipado Compilador Javascript OpenSource Compila a Javascript Desarrolladopor Microsoft Estilo de programación más declarativo Totalmente soportado por Angular 2/4/5

7 ¿Qué ofrece TypeScript
Validación de tipos estático Características ES6 Objetos basados en clase Modularidad

8 Beneficios Editores

9 Amigos de TypeScript

10 Instalación y Ejecución del compilador TypeScript

11 Instalación de TypeScript
Compilación de un fichero de ejemplo TypeScript

12 Descargar e Instalar Node
Descarga de node

13 Actualizar node Ejecutar: npm-windows-upgrade
Ejecutar powerShell como administrador: Set-ExecutionPolicy Unrestricted -Scope CurrentUser –Force npm install --global --production npm-windows-upgrade Ejecutar: npm-windows-upgrade npm-windows-upgrade --npm-version latest

14 Actualizar node

15 Editor Visual Studio Code

16 Actualizar npm En una terminal ejecutar npm i –g npm

17 Instalar typescript npm i -g typescript

18 Ejemplo 1 Crear el fichero ejemplo-01.ts

19 Código javascript generado
Compilar el fichero Código javascript generado Fichero generado

20 Tipos básicos

21 Tipos básicos Variables Vectores y Matrices

22 Tipos básicos String Boolean Number Enum Any Void Null Undefined

23 playground Typescript

24

25

26 Vectores y Matrices

27

28 Trabajando con funciones

29 Declaración de funciones y expresiones
Tipos de función Parámetros opcionales Parámetros por defecto

30 Declaración de funciones y expresiones

31

32

33 Parámetros opcionales

34 Parámetros por defecto en una función

35 Nº indefinido de parámetros en una función

36 Clases e Interfaces

37 Importancia de tener clases
Definición de una clase Herencia Definición de una interfaz

38 Clases Ofrece una abstracción estructural
Forma consistente para los desarrolladores Desarrollo orientado a objetos utiliza concepto de clase

39

40 Ejemplo de una clase

41 Herencia

42

43 class Persona { public hobby: string; constructor( private nombre: string, private edad: number) { } info(): void { console.log(this.nombre + ' ' + this.edad); } const pedro = new Persona('Pedro', 20); pedro.info(); class Jugador extends Persona { constructor(nombre: string, edad: number) { super(nombre, edad); const alejandro = new Jugador('Alejandro', 35); alejandro.info(); console.log(pedro); console.log(alejandro);

44 Interfaz Contienen solo la decoración de los miembros Es un contrato
Se usa para describir un tipo complejo

45

46 interface Persona { nombre: string, edad: number } const juan: Persona = { nombre: 'Juan', edad: 50 interface Vehiculo{ drive(): any; class Automovil implements Vehiculo{ drive(): void { console.log('conduciendo un automóvil'); class Bicicleta implements Vehiculo{ console.log('conduciendo una bicicleta'); const auto = new Automovil(); const bici = new Bicicleta(); auto.drive(); bici.drive();

47 Genericos

48 Función genérica Problema de cola Solución al problema de cola

49

50

51 Number.toString(); String.toString(); Boolean.toString(); function primitivetoString<T>(type: T): string { return type.toString(); } [Number, Boolean, String].forEach(function (type) { console.log(primitivetoString(type)); })

52

53 class ColaDeNumeros { private datos = []; push(item: number) { this.datos.push(item); } pop() { this.datos.shift(); const cola = new ColaDeNumeros(); cola.push(1); cola.push(2); cola.push(3); console.log(cola);

54

55 class Cola<T> { private datos = []; push(item: T) { this.datos.push(item); } pop() { this.datos.shift(); const colaDeNumeros = new Cola<number>(); colaDeNumeros.push(10); colaDeNumeros.push(20); console.log(colaDeNumeros); const colaDeCadenaCaracteres = new Cola<string>(); colaDeCadenaCaracteres.push('Curso'); colaDeCadenaCaracteres.push('TypeScript'); console.log(colaDeCadenaCaracteres);

56