Fix the conflicts and merge with master

Author: IonutGabi

02-languages/02-apuntes/02-typescript/102 interfaces.ts

@@ -60,9 +60,9 @@ pos.lat = 3.4567; // [ts] Cannot assign to 'lat' because it is a read-only prope
 // por ejemplo:
 
 interface Address {
-  zipCode: number;
-  city: string;
   street: string;
+  zip: number;
+  city: string;
 }
 
 interface Coord {
@@ -75,19 +75,19 @@ const place: Coord = {
   lat: 3.3112,
   lon: 5.1123,
   address: {
-    city: "Málaga",
     street: "Héroes de Sostoa",
-    zipCode: 29002,
+    zip: 29002,
+    city: "Málaga",
   },
 };
 
 // También es frecuente utilizar la extensión de interfaces como método de composición. Es decir, 
 // una interfaz puede extender de otra para combinar propiedades:
 
 interface Address {
-  zipCode: number;
-  city: string;
   street: string;
+  zip: number;
+  city: string;
 }
 
 interface Coord {
@@ -103,9 +103,9 @@ const place: Place = {
   lat: 3.3112,
   lon: 5.1123,
   address: {
-    city: "Málaga",
     street: "Héroes de Sostoa",
-    zipCode: 29002,
+    zip: 29002,
+    city: "Málaga",
   },
 };
 
@@ -115,9 +115,9 @@ interface Place extends Coord, Address {}
 const place: Place = {
   lat: 3.3112,
   lon: 5.1123,
-  city: "Málaga",
   street: "Héroes de Sostoa",
-  zipCode: 29002,
+  zip: 29002,
+  city: "Málaga",
 };
 
 // *** Duck typing ********************************************************************************

02-languages/02-apuntes/02-typescript/103 functions.ts

@@ -1,7 +1,7 @@
 ///-- FUNCIONES ***********************************************************************************
 
 // Tipar una función en TypeScript no es más que especificar los tipos de los argumentos que recibe
-// y el tipo del valor que devuelve. Es importante tener en cuenta que aquellos argumentos que
+// y el tipo del valor que devuelve. Es importante tener en cuenta que aquellos parámetros que
 // especifiquemos serán obligatorios, a menos que usemos un modificador de opcionalidad:
 
 // Veamos un primer ejempo con funciones clásicas:
@@ -60,41 +60,55 @@ const shout: ShoutFunction = (text, upperCase = true) =>
 console.log(shout("hi"));
 
 
+// OPCIONAL: Reusando tipados de función con alias
+
+type TextModifierFn = (text: string, modifier?: boolean) => string;
+
+const shout: TextModifierFn = (text, upperCase = false) =>
+  (upperCase ? text.toUpperCase() : text) + "!!!";
+
+const hyphenize: TextModifierFn = (text, snake = false) => text.replace(" ", snake ? "_" : "-");
+
+console.log(shout("hello world", true)); // HELLO WORLD!!!
+console.log(hyphenize("hello world")); // hello-world
+console.log(hyphenize("hello world", true)); // hello_world
+
+
 // *** Funciones como argumentos ******************************************************************
 
 // En el caso de pasar funciones como argumentos de otras, podemos tipar en línea dichos argumentos 
 // del siguiente modo:
 
-const shout = (text: string, getNumExclamation: () => number): string =>
-  text.toUpperCase() + "!".repeat(getNumExclamation());
+const shout = (text: string, exclamationCallback: () => string) =>
+  text.toUpperCase() + exclamationCallback();
 
-const getRandom = () => Math.ceil(Math.random() * 10); // Este es mi callback.
+const exclamationGenerator = () => "!".repeat(Math.ceil(Math.random() * 10)); // Callback
+
+console.log(shout("WoooW", exclamationGenerator));
+console.log(shout("WoooW", exclamationGenerator));
+console.log(shout("WoooW", exclamationGenerator));
+console.log(shout("WoooW", exclamationGenerator));
 
-console.log(shout("WoW", getRandom));
-console.log(shout("WoW", getRandom));
-console.log(shout("WoW", getRandom));
-console.log(shout("WoW", getRandom));
-console.log(shout("WoW", getRandom));
-console.log(shout("WoW", getRandom));
 
 
 // *** Sobrecarga de funciones ********************************************************************
 
-function switchType(c: string): number;
-function switchType(c: number): string;
-function switchType(c: any) {
-  if (typeof c === "string") {
-    return Number(c);
-  } else {
-    return String(c);
-  }
+function switchType(arg: number): string;
+function switchType(arg: string): number;
+function switchType(arg: string | number): string | number {
+  if (typeof arg === "string") return Number(arg);
+  else return String(arg);
 }
 
-const r1 = switchType(3);
-const r2 = switchType("65");
-const r3 = switchType({}); // [ts] Argument of type '{}' is not assignable to parameter of type 'number'
+const result1 = switchType("105");
+console.log(result1, typeof result1);
+
+const result2 = switchType(105);
+console.log(result2, typeof result2);
 
-// ⚠ Es posible sobrecargar funciones con diferente número de argumentos.
+switchType({});
+        // ^^^ [ts] 1/2 Argument of type '{}' is not assignable to parameter of type 'number'
+        // ^^^ [ts] 2/2 Argument of type '{}' is not assignable to parameter of type 'string'
 
 
 // *** Tipando funciones con interfaces ***********************************************************

02-languages/02-apuntes/02-typescript/106 advanced types.ts

@@ -249,11 +249,7 @@ const day: WorkingDay = "sunday"; // TS error: '"sunday"' is not assignable to t
 
 // También es aplicable a números literales:
 type Dice = 1 | 2 | 3 | 4 | 5 | 6;
-const throwDice = (): Dice => {
-  const randomNum = Math.ceil(Math.random() * 6);
-  return (randomNum !== 0 ? randomNum : 1) as Dice;
-  // return 6; // Dado trucado MUAHAHAHAHA.
-};
+const throwDice = (): Dice => Math.floor(Math.random() * 6 + 1) as Dice;
 
 
 // *** TEMPLATE LITERALS ************************
@@ -275,28 +271,20 @@ type MyDayWithScale = `${DayMood} ${WorkingDay} - Level ${1 | 2 | 3}`;
 // tipo concreto:
 
 // -- Caso Base --
-interface Week {
-  monday: string;
-  tuesday: string;
-  wednesday: string;
-  thursday: string;
-  friday: string;
-  saturday: string;
-  sunday: string;
+interface Person {
+  name: string;
+  age: number;
+  adult: boolean;
 }
-type Day = keyof Week;
+type PersonKey = keyof Person; // type PersonKey = "name" | "age" | "adult";
 
 // -- Caso Práctico --
-const showProps = <O extends object>(obj: O, ...keys: (keyof O)[]): void => {
-  keys.forEach((key) => console.log(obj[key]));
+const showProps = <O extends object>(obj: O, ...keys: (keyof O)[]) => {
+  keys.forEach(key => console.log(key, obj[key]));
 };
 
-const dev = {
-  type: "frontend",
-  languages: ["js", "css", "html"],
-  senior: true,
-};
-showProps(dev, "type", "languages"); // Check intellisense!;
+const javi: Person = { name: "Javi", age: 41, adult: true };
+showProps(javi, "adult", "color"); // Check intellisense!;
 
 
 // *** TIPOS MAPEADOS (MAPPED TYPES) ***************

02-languages/04-playgrounds/02-playground-typescript/package.json

@@ -26,9 +26,9 @@
   },
   "scripts": {
     "prestart": "npm run transpile && npm run copy",
-    "start": "concurrently \"npm:transpile -- -w\" npm:devserver",
+    "start": "concurrently \"npm:transpile -- --watch\" npm:devserver",
     "copy": "copyfiles --flat src/**/*.{html,css} transpiled",
-    "transpile": "tsc",
+    "transpile": "tsc --pretty",
     "devserver": "browser-sync start -c bs-config.json"
   },
   "dependencies": {

02-languages/04-playgrounds/02-playground-typescript/tsconfig.json

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "target": "es5",
-    "module": "esnext",
+    "target": "ES5",
+    "module": "ESNext",
+    // "moduleResolution": "node", // Use node resolution for "undici types" issue
     "allowJs": true,
     "outDir": "transpiled"
   },

04-frameworks/15-astro/04-desplegando-github-io/readme.md

@@ -14,6 +14,8 @@ Para ello creamos un archivo `.github/workflows/deploy.yml`:
 
 > A tener en cuenta, hay unas acciones específicas para Astro y desplegar en Github Pages, pero no las vamos a usar, vamos a hacerlo a mano.
 
+> Recordatorio hay un plugin de Read Hat para VSCode para darle soporte a YML.
+
 _.github/workflows/deploy.yml_
 
 ```yml

04-frameworks/15-astro/07-contenido-dinamico/readme.md

@@ -123,6 +123,7 @@ _./src/pages/about.astro_
 
 -    <p>Aquí iría tu BIO</p>
 <p>Here are a few facts about me:</p>
++  <p>Sobre mi:</p>
 +  <ul>
 +    <li>Me llamo {identity.firstName}.</li>
 +    <li>vivo en {identity.country} y trabajo como {identity.occupation}.</li>
@@ -138,7 +139,8 @@ _./src/pages/about.astro_
 </html>
 ```
 
-También esto soporta rendering condicional como en React:
+
+También tenemos soporte para rendering condicional como en React:
 
 _./src/pages/about.astro_
 
@@ -186,7 +188,7 @@ npm install --save-dev prettier-plugin-astro
 
 - Crear un fichero `.prettierrc` en la raíz del proyecto con el siguiente contenido:
 
-\__.prettierrc_
+_.prettierrc_
 
 ```json
 {
@@ -211,3 +213,5 @@ module.exports = {
   plugins: [require("prettier-plugin-astro")],
 };
 ```
+
+> Ojo si no ten funciona, asegurate que tienes abierto el proyecto en la carpeta raíz donde está el fichero `.prettierrc`, tambíen prueba a recargar las pestañas.

04-frameworks/15-astro/08-estilado-con-scope/readme.md

@@ -70,7 +70,9 @@ y
 
 Vamos a probarlo
 
+```bash
 npm run dev
+```
 
 También podemos sacar los estilos fuera, le metemos el prefijo _.modules_ para que tenga scope
 Si lo ponemos sin modules:
@@ -89,7 +91,7 @@ _./src/pages/about.astro_
 ```diff
 ---
 import type { Identity } from "./about.model.ts";
-+ import styles from "./about.css";
++ import styles from "./about.module.css";
 
 const pageTitle = "Acerca de dinámico";
 ```

04-frameworks/15-astro/10-componentes/readme.md

@@ -101,6 +101,8 @@ import "../styles/global.css";
     <h1>Blog</h1>
 ```
 
+Y en la principal tambien (index), mismos pasos
+
 Vamos a crear un footer:
 
 _./src/components/footer.astro_
@@ -116,8 +118,6 @@ const username = "lemoncode";
 </footer>
 ```
 
-Vamos a importarlo y cambiarlo en la ventana principal
-
 _./src/index.astro_
 
 ````diff
@@ -312,3 +312,4 @@ h1 {
 +
 + }
 ```
+> Si no ves nada es que está en resolucíon móvil (mira la media query), si lo haces más grande se ve (más adelante implementaremos menú hamburguesa para móvil).

04-frameworks/15-astro/11-ejecutando-js-navegador/readme.md

@@ -10,7 +10,7 @@ Vamos a ello.
 
 El menú de cabecera sólo funciona bien si estamos en escritorio, si nos vamos a resolución de móvil, nos haría falta ocultar el menú horizontal y mostrar un menú hamburguesa, para eso nos hace falta JavaScript.
 
-Creamos un componente Hamburguer.
+Creamos un componente Hamburguer (la opción del menú con tres lineas)
 
 _./src/components/hamburger.astro_
 
@@ -123,6 +123,7 @@ h1 {
     display: inline-block;
     padding: 15px 20px;
   }
+  /* OJO ESTO DENTRO DE LA MEDIA QUERY*/
 +  .hamburger {
 +    display: none;
 +  }