improvements in language notes

Author: fjcalzado

02-languages/02-apuntes/01-javascript/105 destructuring.js

@@ -67,13 +67,12 @@ console.log(iso3); // "SPA"
 
 // Incluso podemos aplicar "destructuring" sobre objetos que se pasan como argumento de una
 // función:
-const student = {
-  name: "Evan",
-  surname: "Smith",
-  country: "USA",
+
+const showFullName = ({ name, surname }) => {
+  console.log(`${name} ${surname}`);
 };
-const getName = ({ name }) => name;
-console.log(getName(student)); // "Evan"
+
+showFullName(student); // "Evan Smith"
 
 // "DESTRUCTURING" SOBRE ARRAYS
 

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

@@ -1,121 +1,139 @@
 ///-- INTERFACES **********************************************************************************
 
-// Una interfaz no es más que un contrato especificando las propiedades que un objeto debe tener.
-// Uno de los objetivos más básicos que tienen las interfaces es que nos permiten dar nombres a
-// las estructuras y por lo tanto podemos reusarlos.
+// Una interfaz no es más que un contrato especificando las propiedades de un objeto: cómo deben
+// llamarse dichas propiedades y de que tipo deben ser. El objetivo de los interfaces, además de 
+// tipar objetos, es darle nombre a las estructuras y poder reutilizarlos.
 
-interface Geoposition {
-  latitude: number;
-  longitude: number;
+interface Coord {
+  lat: number;
+  lon: number;
 }
 
-const pos: Geoposition = {
-  latitude: 3.3112,
-  longitude: 5.1123,
+const pos: Coord = {
+  lat: 3.3112,
+  lon: 5.1123,
 };
 
 // En caso de no especificar todas las propiedades lanzará un error de compilación
-const pos1: Geoposition = {
-  //  ^^^^ [ts] Type '{ latitude: number; }' is not assignable to type 'Geoposition'.
-  latitude: 3.3112,
+const pos: Coord = {
+  //  ^^^^ [ts] Property 'lon' is missing in type '{ lat: number; }'.
+  lat: 3.3112,
 };
 
 // También si especificamos propiedades por exceso, lanzaría un error.
-const pos2: Geoposition = {
-  latitude: 3.3112,
-  longitude: 5.1123,
-  altitude: 325,
+const pos: Coord = {
+  lat: 3.3112,
+  lon: 5.1123,
+  alt: 325, // [ts] Object literal may only specify known properties, and 'alt' does not exist in
+            // type 'Coord'
 };
 
-// Podemos ANIDAR, es decir, utilizar interfaces como tipos dentro de otras inferfaces:
+// *** Modificadores: optional & readonly *********************************************************
+
+// TypeScript soporta propiedades opcionales mediante el operador [?]. Una propiedad opcional es 
+// aquella que puede ser declarada (y por tanto tendrá un valor asignado) o no. Si no la declaramos,
+// su valor sería undefined.
+
+// Además, podemos forzar a que ciertas propiedades sean de sólo lectura. Para ello usaremos el 
+// operador "readonly" delante de la propiedad. Con esto conseguimos establecer el valor de la 
+// propiedad a la hora de crear el objeto denegando la posibilidad (a nivel de compilación) de 
+// reasignar dicha propiedad.
+
+interface Coord {
+  readonly lat: number;
+  readonly lon: number;
+  alt?: number;
+}
+
+const pos: Coord = {
+  lat: 3.3112,
+  lon: 5.1123,
+  // alt: 350, // Optional
+};
+
+pos.lat = 3.4567; // [ts] Cannot assign to 'lat' because it is a read-only property
+
+
+// *** Anidamiento y extensión de interfaces ******************************************************
+
+// Podemos anidar interfaces dentro de otros. Esta es una forma jerárquica de componer interfaces,
+// por ejemplo:
+
 interface Address {
   zipCode: number;
   city: string;
   street: string;
 }
 
-interface Citizen {
-  name: string;
+interface Coord {
+  lat: number;
+  lon: number;
   address: Address;
 }
 
-const citizen: Citizen = {
+const place: Coord = {
+  lat: 3.3112,
+  lon: 5.1123,
   address: {
     city: "Málaga",
     street: "Héroes de Sostoa",
     zipCode: 29002,
   },
-  name: "Javier",
 };
 
-// *** Propiedades Opcionales
-// TypeScript soporta propiedades opcionales mediante el operador [?]. Una propiedad opcional no es
-// más que aquella cuyo valor puede ser ser definido o no (en este segundo caso sería undefined).
+// 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:
 
-// Podemos definir propiedades opcionales de una interfaz
-interface Book {
-  isbn: number;
-  author?: string;
-}
-const book1: Book = { isbn: 764589621 };
-console.log(book1.author); // undefined
-const book2: Book = { isbn: 854632187, author: "Rolan" };
-console.log(book2.author); // Rolan
-
-// *** Propiedades Read-Only
-// Podemos forzar a que ciertas propiedades sean de sólo lectura. Para ello usaremos el operador
-// "readonly" delante de la propiedad. Con esto conseguimos establecer el valor de la propiedad a
-// la hora de crear el objeto denegando la posibilidad (a nivel de compilación) de reasignar
-// dicha propiedad:
-interface Product {
-  readonly id: number;
-  stock: number;
+interface Address {
+  zipCode: number;
+  city: string;
+  street: string;
 }
-const product: Product = { id: 998, stock: 0 };
-product.stock = 20;
-product.id = 339; // [ts] Cannot assign to 'id' because it is a constant or a 'read-only' property
 
-// Extendiendo interfaces
-interface MyEvent {
-  type: string;
+interface Coord {
+  lat: number;
+  lon: number;
 }
 
-interface MyKeyboardEvent extends MyEvent {
-  key: string;
+interface Place extends Coord {
+  address: Address;
 }
 
-const keyboardEvent: MyKeyboardEvent = {
-  key: "shift",
-  type: "keyboard event",
+const place: Place = {
+  lat: 3.3112,
+  lon: 5.1123,
+  address: {
+    city: "Málaga",
+    street: "Héroes de Sostoa",
+    zipCode: 29002,
+  },
 };
 
-// Podemos extender de varias interfaces a la vez, esto es posible ya que las interfaces sólo
-// especifican las propiedades que un objeto debe de tener (a pesar de usar extends no tiene
-// por qué estar relacionado con la herencia prototípica)
+// Incluso sería posible la extensión múltiple:
+interface Place extends Coord, Address {}
 
-interface Soldier {
-  swordType: string;
-}
+const place: Place = {
+  lat: 3.3112,
+  lon: 5.1123,
+  city: "Málaga",
+  street: "Héroes de Sostoa",
+  zipCode: 29002,
+};
 
-interface Ranger {
-  ammoType: string;
-  totalAmmo: number;
-}
+// *** Duck typing ********************************************************************************
 
-interface Ninja extends Soldier, Ranger {
-  smokeBombs: number;
-}
+// TypeScript no tan estricto a la hora de tipar como pudiera parecer a priori y no ejecuta un 
+// chequeo semántico de los tipos sino que hace una comparación estructural. 
 
-const ninja: Ninja = {
-  swordType: "katana",
-  ammoType: "shuriken",
-  totalAmmo: 10,
-  smokeBombs: 3,
-};
+// Es decir, al trabajar con interfaces, TypeScript NO comprueba que un objeto o instancia es de 
+// tipo "X" (comprobación semántica) sino que comprueba que su estructura es compatible con el 
+// contrato que indica el tipo "X" (comprobación estructural). 
+
+// Como curiosidad, el nombre de duck typing viene de un antiguo dicho: "Si camina como un pato, 
+// nada como un pato y hace cuack, entonces es que probablemente sea un pato".
+
+// Vemos el siguiente ejemplo:
 
-// *** Duck typing
-// TypeScript no tan estricto a la hora de tipar y no tiene en cuenta semánticamente los tipos,
-// sino que sigue una comparación estructural. Vemos el siguiente ejemplo:
 interface User {
   id: number;
   name: string;
@@ -147,29 +165,36 @@ printUserName(julia);
 // Pero tampoco hay problemas a la hora de utilizarlo con un objeto de tipo Dog
 printUserName(laika);
 
-// Esto es, por lo que decimos, User y Dog comparten la misma estructura, si intentamos usarlo con
-// otra interfaz que no comparta sus mismos atributos dará un error de tipos
+// ¿Cómo es posible que pueda pasar como argumento 'user' un objeto de tipo Dog? Porque, aun siendo 
+// objetos de tipos diferentes, los interfaces User y Dog comparten la misma estructura. 
+// Y TypeScript no hace un chequeo semántico, es decir, no comprueba que el argumento user tenga que 
+// estar forzosamente tipado con el interface User sino que comprueba que su estructura encaja con 
+// lo especificado en dicho interface.
+
+// Si intentamos usarlo con otra interfaz que no comparta sus mismos atributos dará un error 
+// de tipos:
+
 interface Cat {
   name: string;
 }
 
 const garfield: Cat = { name: "Garfield" };
+
+// Garfield no tiene "id: number" por lo que no es compatible con el tipo esperado para
+// el argumento user
 printUserName(garfield);
-// Garfield no tiene "id: number" por lo que no compatible con el tipo que necesita
 
-// Como vemos si la interfaz no tiene las propiedades requeridas no podrá ser usado por la función.
-// Sin embargo esto no significa que la interfaz pueda tener más propiedades
+// Como vemos, si la interfaz no tiene, como mínimo, las propiedades requeridas no podrá ser usada 
+// como argumento de la función.
+// Sin embargo, si dispone de las propiedades necesarias cómo mínimo, aunque tenga más propiedades, 
+// si que podría validarse debido al duck typing:
 
-interface Fish {
+interface Cat {
   id: number;
   name: string;
-  colors: string[];
+  color: string;
 }
 
-const bob: Fish = { id: 319, name: "Bob", colors: ["white", "yellow"] };
-printUserName(bob);
-// bob al tener "id: number" y "name: string" es compatible, pese a tener más propiedades de
-// las requeridas
+const garfield: Cat = { id: 43, name: "Garfield", color: "orange" };
 
-// Es decir, actualmente la función printUserName necesita un objeto que estructuralmente tenga
-// como mínimo las dos propiedades de User,
+printUserName(garfield); // OK!