update ts notes for functions

Author: fjcalzado

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

@@ -1,49 +1,70 @@
 ///-- FUNCIONES ***********************************************************************************
 
 // Tipar una función en TypeScript no es más que especificar los tipos de los argumentos que recibe
-// y el tipo de dato que devuelve. Es importante tener en cuenta que el número de argumentos que
-// especifiquemos son obligatorios.
+// y el tipo del valor que devuelve. Es importante tener en cuenta que aquellos argumentos que
+// especifiquemos serán obligatorios, a menos que usemos un modificador de opcionalidad:
+
+// Veamos un primer ejempo con funciones clásicas:
 function shout(text: string, upperCase: boolean): string {
   return (upperCase ? text.toUpperCase() : text) + "!!!";
 }
 
-const t1 = shout("hi"); // [ts] Expected 2 arguments, but got 1
-const t2 = shout("hi", true);
-console.log(t2); // "HI!!!"
+console.log(shout("hi")); // [ts] Expected 2 arguments, but got 1
+console.log(shout("hi", true)); // "HI!!!"
 
-// Su homólogo en arrow function
+// Su homólogo en arrow function:
 const shout = (text: string, upperCase: boolean): string =>
   (upperCase ? text.toUpperCase() : text) + "!!!";
 
-const t3 = shout("hi"); // [ts] Expected 2 arguments, but got 1
-const t4 = shout("hi", false);
-console.log(t4); // "hi!!"
+console.log(shout("hi")); // [ts] Expected 2 arguments, but got 1
+console.log(shout("hi", true)); // "HI!!!"
+
+
+// *** Argumentos opcionales y argumentos por defecto *********************************************
+
+// Utilizando el operador [?] sobre un argumento podremos declararlo como opcional a la hora de 
+// invocar la función:
 
-// *** Argumentos Opcionales
-// Utilizando el operador [?] sobre un argumento significa que dicho argumento es opcional
-// a la hora de invocar a la función
 const shout = (text: string, upperCase?: boolean): string =>
   (upperCase ? text.toUpperCase() : text) + "!!!";
 
-// Si no pasamos explícitamente un argumento opcional su valor es, al igual que
-// en JavaScript, undefined.
+// Si no pasamos explícitamente un argumento opcional su valor es, al igual que en otros casos
+// ya vistos en JavaScript, undefined:
 console.log(shout("hi")); // "hi!!!" ---> upperCase = undefined.
 
-// *** Argumentos por defecto
-// También es posible declarar el tipo de valores por defecto, aunque por lo general es más legible
-// el no declarar el tipo y dejar que TypeScript lo infiera del propio valor por defecto.
-// ⚠ Al añadir un valor por defecto, no se puede usar el operador opcional de forma explícita.
-// Será TS quien automáticamente lo marque como opcional si está inicializado con un valor por 
-// defecto y no hay más argumentos obligatorios a continuación.
+// Suele ser muy habitual en caso de argumentos opcionales establecer su valor por defecto, como ya 
+// vimos en JavaScript. Cuando esto sucede hay 2 cosas a tener en cuenta:
+//   - Primero, suele ser más legible no declarar el tipo del argumento y dejar que lo infiera del 
+//     propio valor por defecto.
+//   - Segundo, no podemos declararlo como opcional al mismo tiempo que ponemos valor por defecto. 
+//     Esto es así porque en cuanto usamos valores por defecto TS lo reconoce automáticamente como
+//     opcional.
 
-// el tipo ya es opcional
 const shout = (text: string, upperCase: boolean = true): string =>
   (upperCase ? text.toUpperCase() : text) + "!!!";
 
 console.log(shout("hi")); // "HI!!!"
 
-// *** Funciones como argumentos
-// También es posible tipar argumentos que son funciones:
+
+// *** Alias **************************************************************************************
+
+// Hasta ahora, en los ejemplos vistos, el tipado de la funcion va integrado en la propia 
+// declaración o definición de la función. Es decir, es un tipado en línea o inline. Sin embargo, 
+// podemos extraer el tipo de una función aparte, y reusarlo cuando queramos. 
+// A esto se le conoce como alias y para ello usamos el operador type:
+
+type ShoutFunction = (text: string, upperCase?: boolean) => string;
+const shout: ShoutFunction = (text, upperCase = true) =>
+  (upperCase ? text.toUpperCase() : text) + "!!!";
+
+console.log(shout("hi"));
+
+
+// *** 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());
 
@@ -56,21 +77,12 @@ console.log(shout("WoW", getRandom));
 console.log(shout("WoW", getRandom));
 console.log(shout("WoW", getRandom));
 
-// *** Alias
-// En estos ejemplos vistos, el tipado de la funcion va integrado en la propia
-// declaración/definición de la función. Sin embargo, podemos extraer el typo de una función
-// aparte, y reusarlo cuando queramos. Para ello usamos el operador "type".
-// Esto se conoce como ALIAS:
-type ShoutFunction = (text: string, getNumExclamation: () => number) => string;
-const shout: ShoutFunction = (text, getNumExclamation) =>
-  text.toUpperCase() + "!".repeat(getNumExclamation());
 
-console.log(shout("TS rocks", getRandom));
+// *** Sobrecarga de funciones ********************************************************************
 
-// *** Sobrecarga de funciones
 function switchType(c: string): number;
 function switchType(c: number): string;
-function switchType(c) {
+function switchType(c: any) {
   if (typeof c === "string") {
     return Number(c);
   } else {
@@ -84,8 +96,11 @@ const r3 = switchType({}); // [ts] Argument of type '{}' is not assignable to pa
 
 // ⚠ Es posible sobrecargar funciones con diferente número de argumentos.
 
-// *** Tipando funciones en un interfaz, o lo que es lo mismo, usando interfaces para
-// diseñar funciones.
+
+// *** Tipando funciones con interfaces ***********************************************************
+
+// O lo que es lo mismo, usando interfaces para diseñar funciones:
+
 interface RepeatString {
   (text: string, n: number): string;
 }
@@ -94,9 +109,10 @@ const repeatString: RepeatString = (text, n) => Array(n).fill(text).join(" ");
 
 console.log(repeatString("echo", 3)); // "echo echo echo"
 
-// ¿Para que es útil esto?
-// Para añadirle propiedades a una función. Las funciones no dejan de ser objetos, de esta forma
-// podríamos obligar a que una función tenga ciertas propiedades:
+// ¿Para que es realmente útil esto?
+// Para añadirle propiedades a una función. Ya dijimos que las funciones no dejan de ser objetos, y 
+// por tanto podrían tener propiedades. De esta forma podríamos obligar a que una función tenga 
+// ciertas propiedades tipadas de cierta forma:
 
 interface RepeatStringFunction {
   (text: string, n: number): string;