Funmadentos de Typescript

leandrotomassini · Feb 5, 2022 · 235d16b · 235d16b
1 parent a31d93e
commit 235d16b
Show file tree

Hide file tree

Showing 24 changed files with 581 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,6 @@
+![Angular](https://i.imgur.com/CJRb80k.png)
 # Angular
 Angular es un framework para aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página.
+
+* [Basic types](https://www.typescriptlang.org/docs/handbook/2/basic-types.html)
+* [Decorators](https://www.typescriptlang.org/docs/handbook/decorators.html#class-decorators)
diff --git a/workspace/1- Inicial/.gitignore b/workspace/1- Inicial/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+
+
+package-lock.json
+
diff --git a/workspace/1- Inicial/README.md b/workspace/1- Inicial/README.md
@@ -0,0 +1,27 @@
+# Proyecto para reforzar TypeScript - ECMAScript 20XX
+
+* Lo primero que debemos de hacer después de descargar el código es ejecutar el comando:
+
+```
+npm install
+```
+Ese comando descargará todos los módulos de node necesarios para ejecutar el proyecto.
+
+
+* Cuando termine de instalar los node_modules, entonces podermos ejecutar el proyecto de con el siguiente comando
+
+```
+npm start
+```
+Para que eso funcione, recuerden que deben de ejecutar ese comando en el mismo directorio donde se encuentra el ```package.json```
+
+## Cambiar el puerto
+Por defecto, el puerto que configuré para este proyecto es el ```8081```, pero si necesitan cambiarlo porque pueda que ese puerto lo use su computadora, pueden cambiarlo abriendo el ```package.json``` >> scripts. Ahí verán la instrucción que lanza el servidor de desarrollo
+
+```
+"start": "webpack-dev-server --mode development --open --port=8081"
+```
+
+Simplemente cambian el puerto por el que ustedes necesiten y listo. (lógicamente graban los cambios antes de ejecutar el ```npm start``` nuevamente)
+
+
diff --git a/workspace/1- Inicial/assets/css/style.css b/workspace/1- Inicial/assets/css/style.css
@@ -0,0 +1,42 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap');
+
+*, html, body {
+    font-family: 'Roboto', sans-serif;
+    color: white;
+}
+
+body{
+    background: rgb(36,81,166);
+    background: linear-gradient(90deg, rgba(36,81,166,1) 11%, rgba(68,129,210,1) 100%);
+    padding: 5px 30px;
+}
+
+h1 {
+    font-weight: lighter;
+    padding: 10px;
+    margin-bottom: 20px;
+}
+
+input, button {
+    width: 35%;
+    padding: 10px;
+    color: black;
+    font-size: 18px;
+    font-family: 'Roboto', sans-serif;
+    border-radius: 10px;
+    border: 0px;
+}
+
+button, video{
+    margin-right: 10px;
+}
+
+img {
+    border-radius: 5px;
+    width: 150px;
+    height: 150px;
+}
+
+ol {
+    text-align: left;
+}
diff --git a/workspace/1- Inicial/assets/img/favicon.png b/workspace/1- Inicial/assets/img/favicon.png
diff --git a/workspace/1- Inicial/index.html b/workspace/1- Inicial/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Curso Angular</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+    <link rel="shortcut icon" href="assets/img/favicon.png">
+</head>
+<body>
+    <h1>TypeScript - ES20XX </h1>
+    <hr>
+
+
+
+    <script src="bundle.js"></script>
+</body>
+</html>
diff --git a/workspace/1- Inicial/package.json b/workspace/1- Inicial/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "rxjs-dev",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "typescript": "^3.6.3",
+    "webpack": "^4.40.2",
+    "webpack-dev-server": "^3.8.1"
+  },
+  "devDependencies": {
+    "ts-loader": "^6.1.2",
+    "css-loader": "^3.2.0",
+    "webpack-cli": "^3.3.9"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development --open --port=8081"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/workspace/1- Inicial/src/ejercicios/01-tipos-basicos.ts b/workspace/1- Inicial/src/ejercicios/01-tipos-basicos.ts
@@ -0,0 +1,14 @@
+/*
+    ===== Código de TypeScript =====
+*/
+
+let nombre: string = 'Strider';
+let hp: number | string = 95;
+let estaVivo: boolean = true;
+
+hp = 'FULL';
+
+
+console.log( nombre, hp );
+
+
diff --git a/workspace/1- Inicial/src/ejercicios/02-arr-obj-interface.ts b/workspace/1- Inicial/src/ejercicios/02-arr-obj-interface.ts
@@ -0,0 +1,24 @@
+/*
+    ===== Código de TypeScript =====
+*/
+
+let habilidades: string[] = ['Bash','Counter', 'Healing'];
+
+interface Personaje {
+    nombre: string;
+    hp: number;
+    habilidades: string[];
+    puebloNatal?: string;
+}
+
+
+const personaje: Personaje = {
+    nombre: 'Strider',
+    hp: 100,
+    habilidades: ['Bash','Counter','Healing']
+}
+
+personaje.puebloNatal = 'Pueblo Paleta';
+
+
+console.table( personaje );
diff --git a/workspace/1- Inicial/src/ejercicios/02-interface.ts b/workspace/1- Inicial/src/ejercicios/02-interface.ts
@@ -0,0 +1,19 @@
+let habilidades: string[] = ['Bash', 'Counter', 'Healing'];
+
+interface Personaje {
+    nombre: string;
+    hp: number;
+    habilidades: string[];
+    puebloNatal?: string;
+}
+
+const personaje: Personaje = {
+    nombre: 'Strinder',
+    hp: 100,
+    habilidades: ['Bash', 'Counter', 'Healing']
+}
+
+personaje.puebloNatal = 'Pueblo Paleta';
+
+
+console.table(personaje);
diff --git a/workspace/1- Inicial/src/ejercicios/03-Funciones.ts b/workspace/1- Inicial/src/ejercicios/03-Funciones.ts
@@ -0,0 +1,43 @@
+/*
+    ===== Código de TypeScript =====
+*/
+
+
+function sumar(a: number, b:number): number {
+    return a + b;
+}
+
+const sumarFlecha = (a:number, b:number):number => {
+    return a + b;
+}
+
+function multiplicar( numero: number, otroNumero?: number, base:number = 2 ): number {
+    return numero * base;
+}
+
+
+interface PersonajeLOR {
+    nombre: string;
+    pv: number;
+    mostrarHp: () => void;
+}
+
+
+function curar( personaje: PersonajeLOR, curarX:number ): void {
+
+    personaje.pv += curarX;
+}
+
+const nuevoPersonaje: PersonajeLOR = {
+    nombre: 'Strider',
+    pv: 50,
+    mostrarHp() {
+        console.log( 'Puntos de vida:', this.pv );
+    }
+}
+
+curar( nuevoPersonaje, 20 );
+
+nuevoPersonaje.mostrarHp();
+
+
diff --git a/workspace/1- Inicial/src/ejercicios/04-Tarea-tipado.ts b/workspace/1- Inicial/src/ejercicios/04-Tarea-tipado.ts
@@ -0,0 +1,36 @@
+/*
+    ===== Código de TypeScript =====
+*/
+interface SuperHeroe {
+    nombre: string;
+    edad: number;
+    direccion: Direccion,
+    mostrarDireccion: () => string;
+}
+
+interface Direccion {
+    calle: string;
+    pais: string;
+    ciudad: string;
+}
+
+
+
+const superHeroe: SuperHeroe = {
+    nombre: 'Spiderman',
+    edad: 30,
+    direccion: {
+        calle: 'Main St',
+        pais: 'USA',
+        ciudad: 'NY'
+    },
+    mostrarDireccion() {
+        return this.nombre + ', ' + this.direccion.ciudad + ', ' + this.direccion.pais;
+    }
+}
+
+
+const direccion = superHeroe.mostrarDireccion();
+console.log( direccion );
+
+
diff --git a/workspace/1- Inicial/src/ejercicios/05-Desestructuracion-basica.ts b/workspace/1- Inicial/src/ejercicios/05-Desestructuracion-basica.ts
@@ -0,0 +1,42 @@
+/*
+    ===== Código de TypeScript =====
+*/
+
+interface Reproductor {
+    volumen: number;
+    segundo: number;
+    cancion: string;
+    detalles: Detalles 
+}
+
+interface Detalles {
+    autor: string;
+    anio: number;
+}
+
+const reproductor: Reproductor = {
+    volumen: 90,
+    segundo: 36,
+    cancion: 'Mess',
+    detalles: {
+        autor: 'Ed Sheeran',
+        anio: 2015
+    }
+}
+
+const { volumen, segundo, cancion, detalles } = reproductor;
+const { autor } = detalles;
+
+
+// console.log('El volumen actual de: ', volumen );
+// console.log('El segundo actual de: ', segundo );
+// console.log('La canción actual de: ', cancion );
+// console.log('El autor es: ', autor );
+
+
+const dbz: string[] = ['Goku', 'Vegeta', 'Trunks'];
+const [ , , p3 ] = dbz;
+
+// console.log('Personaje 1:', p1 );
+// console.log('Personaje 2:', p2 );
+console.log('Personaje 3:', p3 );
diff --git a/workspace/1- Inicial/src/ejercicios/06-desestructuracion-funcion.ts b/workspace/1- Inicial/src/ejercicios/06-desestructuracion-funcion.ts
@@ -0,0 +1,41 @@
+/*
+    ===== Código de TypeScript =====
+*/
+
+export interface Producto {
+    desc: string;
+    precio: number;
+}
+
+const telefono: Producto = {
+    desc: 'Nokia A1',
+    precio: 150
+}
+
+const tableta: Producto = {
+    desc: 'iPad Air',
+    precio: 350
+}
+
+
+
+export function calculaISV( productos: Producto[] ):[number, number] {
+
+    let total = 0;
+
+    productos.forEach(  ({ precio }) => {
+        total += precio;
+    })
+
+    return [total, total * 0.15];
+
+}
+
+
+// const articulos = [ telefono, tableta ];
+
+// const [ total, isv ] = calculaISV( articulos );
+
+// console.log('Total:', total );
+// console.log('ISV:', isv);
+
diff --git a/workspace/1- Inicial/src/ejercicios/07-import-export.ts b/workspace/1- Inicial/src/ejercicios/07-import-export.ts
@@ -0,0 +1,22 @@
+import { Producto, calculaISV } from './06-desestructuracion-funcion';
+/*
+    ===== Código de TypeScript =====
+*/
+
+const carritoCompras: Producto[] = [
+    {
+        desc: 'Telefono 1',
+        precio: 100
+    },
+    {
+        desc: 'Telefono 2',
+        precio: 150
+    },
+];
+
+const [total, isv] = calculaISV( carritoCompras );
+
+console.log( 'Total', total );
+console.log( 'ISV', isv )
+
+