Forem: Juan Delgado

Interface en TypeScript

Juan Delgado — Wed, 29 Apr 2020 14:10:10 +0000

Una de las principales ideologías de Typescript es que la verificación de tipos se centra en la forma que tienen los valores. Esto a veces se llama "tipificación de pato" o "subtipificaión". Las interfaces en Typescript son una forma muy poderosa de definir que valores tienen que cumplir ya sea una clase, un objecto, etc...

Pasemos a escribir nuestra primera interfaz en Typescript :

Tipos Avanzados en Typescript

Juan Delgado — Wed, 22 Apr 2020 04:37:39 +0000

Protectores de tipo y tipos diferenciadores

Una expresión común en JavaScript para diferenciar entre dos valores posibles es verificar la presencia de un miembro. Como mencionamos, solo puede acceder a miembros que están garantizados en todos los componentes de un tipo de unión.

let pet = getSmallPet();

// Cada uno de estos accesos a la propiedad causará un error
if (pet.swim) {
  pet.swim();
} else if (pet.fly) {
  pet.fly();
}

Para que funcione el mismo código, necesitaremos usar una aserción de tipo:

let pet = getSmallPet();

if ((pet as Fish).swim) {
  (pet as Fish).swim();
} else if ((pet as Bird).fly) {
  (pet as Bird).fly();
}

Usando el operador in

El operador in ahora actúa como una expresión de reducción para los tipos.

Para una n in expresión x, donde n es un literal de cadena o tipo de literal de cadena y x es un tipo de unión, la rama "verdadera" se estrecha a los tipos que tienen una propiedad opcional o requerida n, y la rama "falsa" se estrecha a los tipos que tienen una opción o faltan propiedad n.

function move(pet: Fish | Bird) {
  if ("swim" in pet) {
    return pet.swim();
  }
  return pet.fly();
}

typeof type guards

function isNumber(x: any): x is number {
  return typeof x === "number";
}

function isString(x: any): x is string {
  return typeof x === "string";
}

function padLeft(value: string, padding: string | number) {
  if (isNumber(padding)) {
    return Array(padding + 1).join(" ") + value;
  }
  if (isString(padding)) {
    return padding + value;
  }
  throw new Error(`Expected string or number, got '${padding}'.`);
}

Sin embargo, tener que definir una función para determinar si un tipo es primitivo es una molestia. Afortunadamente, no necesita abstraer typeof x === "number" en su propia función porque TypeScript lo reconocerá como un protector de tipo por sí solo. Eso significa que podríamos escribir estos cheques en línea.

function padLeft(value: string, padding: string | number) {
  if (typeof padding === "number") {
    return Array(padding + 1).join(" ") + value;
  }
  if (typeof padding === "string") {
    return padding + value;
  }
  throw new Error(`Se espera un string o number, no '${padding}'.`);
}

Tipos Anulables

Efectivamente, null y undefined son valores válidos de cada tipo. Eso significa que no es posible evitar que se asignen un tipo null, incluso cuando desee evitarlo. El inventor de null, Tony Hoare, llama a esto su "error de mil millones de dólares".

let s = "foo";
s = null; // error, 'null' no esta asignado para 'string'
let sn: string | null = "bar";
sn = null; // ok

sn = undefined; // error, 'undefined' no esta asignado para 'string | null'

Parámetros y propiedades opcionales

Con --strictNullChecks, un parámetro opcional agrega automáticamente | undefined:

function f(x: number, y?: number) {
  return x + (y || 0);
}
f(1, 2);
f(1);
f(1, undefined);
f(1, null); // error, 'null' no es asignable a 'number | undefined'

Lo mismo es cierto para las propiedades opcionales:

class C {
  a: number;
  b?: number;
}
let c = new C();
c.a = 12;
c.a = undefined; // error, 'undefined' no es asignable a 'number'
c.b = 13;
c.b = undefined; // ok
c.b = null; // error, 'null' no es asignable a 'number | undefined'

Escribir guardias y aserciones

Dado que los tipos anulables se implementan con una unión, debe usar un protector de tipo para deshacerse de él null. Afortunadamente, este es el mismo código que escribirías en JavaScript:

function f(sn: string | null): string {
  if (sn == null) {
    return "default";
  } else {
    return sn;
  }
}

La eliminación de null es bastante obvia aquí, pero también puede usar operadores terser:

function f(sn: string | null): string {
  return sn || "default";
}

Type Aliases

Los tipos Aliases son similares a las interfaces pero pueden nombrar tipos primitivos, tuplas y cualquier otro tipo que se tendria que escribir a mano

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

function getName(n: NameOrResolver): Name {
  if (typeof n === "string") {
    return n;
  } else {
    return n();
  }
}

También podemos hacer que un tipo Aliases se refiera a sí mismo en una propiedad:

type Tree = {
value: T;
left: Tree;
right: Tree;
};

Junto con los tipos de intersección, podemos hacer algunos tipos bastante alucinantes:

type LinkedList<T> = T & { next: LinkedList<T> };

interface Person {
  name: string;
}

var people: LinkedList<Person>;
var s = people.name;
var s = people.next.name;
var s = people.next.next.name;
var s = people.next.next.next.name;

Enums en TypeScript

Juan Delgado — Tue, 21 Apr 2020 19:16:28 +0000

Las enumeraciones son una de las pocas características que tiene TypeScript que no es una extensión de JavaScript de nivel de tipo.

Las enumeraciones permiten a un desarrollador definir un conjunto de constantes con nombre. El uso de enumeraciones puede hacer que sea más fácil documentar la intención o crear un conjunto de casos distintos. TypeScript proporciona enumeraciones numéricas y basadas en cadenas.

Numeric enums

Primero comenzaremos con enumeraciones numéricas, que probablemente sean más familiares si viene de otros idiomas. Se puede definir una enumeración usando la palabra clave enum.

enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

Arriba, tenemos una enumeración numérica donde Up se inicializa con 1. Todos los siguientes miembros se incrementan automáticamente a partir de ese punto. En otras palabras, Direction.Up tiene el valor 1, Down tiene 2, Left tiene 3 y Right tiene 4.

Si quisiéramos, podríamos dejar los inicializadores por defecto:

enum Direction {
  Up,
  Down,
  Left,
  Right
}

Aquí, Up tendría el valor 0, Down tendría 1, etc...

Usar una enumeración es simple: simplemente acceda a cualquier miembro como una propiedad fuera de la enumeración misma y declare los tipos utilizando el nombre de la enumeración:

enum Respuesta {
    No = 0,
    Si = 1
}

function quedate(nombre: string, mensaje: Respuesta): void {
    if (mensaje === 1) {
        console.log(`Hola ${nombre}`);
    } else {
        console.log(`Vete de aqui ${nombre}`);
    }
}

quedate("Pequeña Andreita", Respuesta.Si);

String enums

Las enumeraciones de cadena son un concepto similar, pero tienen algunas diferencias sutiles de tiempo de ejecución como se documenta a continuación. En una cadena de enumeración, cada miembro debe inicializarse constantemente con una cadena literal o con otro miembro de cadena de enumeración.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

Si bien las enumeraciones de cadenas no tienen un comportamiento de incremento automático, las enumeraciones de cadenas tienen el beneficio de que se "serializan" bien. En otras palabras, si estaba depurando y tuvo que leer el valor de tiempo de ejecución de una enumeración numérica, el valor a menudo es opaco: no transmite ningún significado útil por sí solo (aunque la asignación inversa a menudo puede ayudar), las enumeraciones de cadena le permiten para dar un valor significativo y legible cuando se ejecuta su código, independientemente del nombre del miembro enum.

Heterogeneous enums

Técnicamente, las enumeraciones se pueden mezclar con parametros de cadena y numéricos, pero no está claro por qué querría hacerlo:

enum BooleanLikeHeterogeneousEnum {
  No = 0,
  Yes = "YES"
}

Miembros calculados y constantes

Cada miembro de la enumeración tiene un valor asociado que puede ser constante o calculado . Un miembro de enumeración se considera constante si:

Es el primer miembro de la enumeración y no tiene inicializador, en cuyo caso se le asigna el valor 0:

enum E {
  X
}

No tiene un inicializador y el miembro de enumeración anterior era una constante numérica . En este caso, el valor del miembro de enumeración actual será el valor del miembro de enumeración anterior más uno.

enum E1 {
  X,
  Y,
  Z
}

enum E2 {
  A = 1,
  B,
  C
}

El miembro enum se inicializa con una expresión enum constante. Una expresión enum constante es un subconjunto de expresiones TypeScript que se pueden evaluar completamente en tiempo de compilación. Una expresión es una expresión de enumeración constante si es:

una expresión de enumeración literal (básicamente un literal de cadena o un literal numérico)
una referencia al miembro de enumeración constante previamente definido (que puede originarse en una enumeración diferente)
una expresión de enumeración constante entre paréntesis
uno de los +, -, ~operadores unarios aplica a la expresión enum constante
+, -, *, /, %, <<, >>, >>>, &, |, ^Los operadores binarios con expresiones constantes de enumeración como operandos.

En todos los demás casos, el miembro enum se considera calculado.

enum FileAccess {
  // constant members
  None,
  Read = 1 << 1,
  Write = 1 << 2,
  ReadWrite = Read | Write,
  // computed member
  G = "123".length
}

Unions and Intersection Types en TypeScript

Juan Delgado — Tue, 21 Apr 2020 18:41:23 +0000

Soy una nota nice

A veces debemos de admitir parámetros en una funcion donde el tipo de parametro puede ser por ejemplo String o Number :

function padLef(value: string, padding: any) {
    if (typeof padding === "number") {
        return Array(padding + 1).join(" ") + value;
    }
    if (typeof padding === "string") {
        return  `${value} ${padding}`;
    }
    throw new Error(`Solo se admiten tipos de valores string o number, no se aceptan ${padding}`)
}

console.log(padLef("Hola mundo", 10));

El problema de declarar el parametro padding como any es que recibe cualquier tipo de valor ya sea true* o hasta un **Array y el compilador de Typescript lo aceptara sin problemas.

Para solucionar este problema utilizaremos las uniones de Typescript, donde solo se aceptaran los tipos que se declaren en el parámetro, no hay limite de uniones puedes utilizar 2 o mas uniones si es necesario:

function padLeft(value: string, padding: string | number) {
  // ...
}

let indentedString = padLeft("Hello world", true);

El compilador de Typescript nos dirá que no se puede aceptar valores Booleanos porque en el parametro solo aceptan valores de tipo string o number

Sindicatos discriminantes

Una técnica común para trabajar con uniones es tener un solo campo que use tipos literales que puede usar para permitir que TypeScript reduzca el posible tipo actual. Por ejemplo, vamos a crear una unión de tres tipos que tienen un solo campo compartido.

type NetworkLoadingState = {
    state: "loading";
  };

  type NetworkFailedState = {
    state: "failed";
    code: number;
  };

  type NetworkSuccessState = {
    state: "success";
    response: {
      title: string;
      duration: number;
      summary: string;
    };
  };

  // Crea un tipo que representa sólo uno de los tipos anteriores
  // pero aún no estás seguro de cuál es.
  type NetworkState =
    | NetworkLoadingState
    | NetworkFailedState
    | NetworkSuccessState;

Todos los tipos anteriores tienen un campo llamado state, y luego también tienen sus propios campos. Dado que el campo state es común en todos los tipos internos NetworkState, es seguro para su código acceder sin una verificación de existencia.

Generics de TypeScript

Juan Delgado — Tue, 21 Apr 2020 15:31:23 +0000

En lenguajes como C# y Java, una de las principales herramientas de la caja de herramientas para crear componentes reutilizables son los genéricos, es decir, poder crear un posible .Esto permite a los usuarios consumir estos componentes y utilizar sus propios tipos.

Hola Mundo con Generics

Para empezar, hagamos el "hola mundo" de los genéricos: la función de identity. La función de la identity es una función que devolverá lo que se le pase. Puedes pensar en esto de forma similar al comando .echo

Sin los genéricos, tendríamos que dar a la función de identidad un tipo específico:

 function identity(arg: number): number {
    return arg;
 }

O, podríamos describir la función de identidad usando el tipo:any

 function identity(arg: any): any {
    return arg;
 }

Aunque el uso es ciertamente genérico en el sentido de que hará que la función acepte todos los tipos para el type of, en realidad estamos perdiendo la información sobre cuál era ese tipo cuando la función retorne. Si pasamos un número, la única información que tenemos es que cualquier tipo podría ser devuelto. any arg

En cambio, necesitamos una forma de capturar el tipo de argumento de tal manera que también podamos usarlo para denotar lo que se está devolviendo. Aquí, usaremos una type variable, un tipo especial de variable que funciona con tipos en lugar de valores.

function identity<T>(arg: T): T {
    return arg;
}

Ahora hemos añadido una tipo de variable a la función de identidad. Esto nos permite capturar el tipo que el usuario proporciona (por ejemplo), para poder usar esa información más tarde. Aquí, usamos de nuevo como el tipo de retorno. En la inspección, ahora podemos ver que el mismo tipo se utiliza para el argumento y el tipo de retorno. Esto nos permite traficar ese tipo de información en un lado de la función y en el otro.

Decimos que esta versión de la función es genérica, ya que funciona sobre una serie de tipos. A diferencia de la utilización , también es tan precisa (es decir, no pierde ninguna información) como la primera función que utilizó números para el argumento y devuelve type. identity any identity

Una vez que hemos escrito la función de identidad genérica, podemos llamarla de una de dos maneras. La primera forma es pasar todos los argumentos, incluyendo el tipo de argumento, a la función:

let output = identity<string>("myString");  // El tipo de salida será 'string'
console.log(output);

Aquí nos fijamos explícitamente como uno de los argumentos de la llamada a la función, denotando el uso de los argumentos de alrededor en lugar de .T string <> ()

La segunda forma es también quizás la más común. Aquí usamos el tipo de inferencia de argumento, es decir, queremos que el compilador establezca el tipo de argumento por nosotros automáticamente basado en el tipo de argumento que pasamos en: T

let output = identity("myString");  // El tipo de salida será 'string'

Fíjense que no tuvimos que pasar explícitamente el tipo en los corchetes angulares (); el compilador sólo miró el valor , y estableció su tipo. Mientras que la inferencia de los argumentos de tipo puede ser una herramienta útil para mantener el código más corto y más legible, puede ser necesario pasar explícitamente los argumentos de tipo como hicimos en el ejemplo anterior cuando el compilador falla en la inferencia del tipo, como puede suceder en ejemplos más complejos.<> "myString" T

Trabajando con Variables de Tipo Genérico

Cuando comiences a usar genéricos, notarás que cuando creas funciones genéricas, el compilador hará que uses correctamente cualquier parámetro tecleado genéricamente en el cuerpo de la función. Es decir, que realmente tratas estos parámetros como si pudieran ser cualquier tipo de identidad.

Tomemos nuestra función de antes:

function identity<T>(arg: T): T {
    return arg;
}

¿Y si queremos registrar también la longitud del argumento en la consola con cada llamada? Podríamos estar tentados a escribir esto:

function loggingIdentity<T>(arg: T): T {
    console.log(arg.length);  // Error: T doesn't have .length
    return arg;
}

Digamos que en realidad hemos pretendido que esta función funcione en matrices de más que directamente. Ya que estamos trabajando con matrices, el número de miembros debería estar disponible. Podemos describirlo como si creáramos matrices de otros tipos:

function loggingIdentity<T>(arg: T[]): T[] {
    console.log(arg.length);  // La matriz tiene una longitud, así que no hay más errores.
    return arg;
}

Puedes leer el tipo de como "la función genérica toma un parámetro y un argumento que es un array de s, y devuelve un array de s". Si pasamos una serie de números, obtendríamos una serie de números de vuelta. Esto nos permite utilizar nuestra variable de tipo genérico como parte de los tipos con los que estamos trabajando, en lugar de todo el tipo, dándonos una mayor flexibilidad.

Podemos escribir el ejemplo de la muestra de esta manera:

function loggingIdentity<T>(arg: Array<T>): Array<T> {
    console.log(arg.length);  // La matriz tiene una longitud, así que no hay más errores.
}

Escribiendo una interfaz genérica

interface GenericIdentityFn {
    <T>(arg: T): T;
}

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: GenericIdentityFn = identity;

Clases Genéricas

Una clase genérica tiene una forma similar a una interfaz genérica. Las clases genéricas tienen una lista de parámetros de tipo genérico entre corchetes angulares () siguiendo el nombre de la clase.

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

Este es un uso bastante literal de la clase, pero es posible que haya notado que nada está restringiendo a usar solo el tipo. Podríamos haber usado o incluso objetos más complejos.

let stringNumeric = new GenericNumber<string>();
stringNumeric.zeroValue = "";
stringNumeric.add = function(x, y) { return x + y; };

console.log(stringNumeric.add(stringNumeric.zeroValue, "test"));

Al igual que con la interfaz, colocar el parámetro type en la propia clase nos permite asegurarnos de que todas las propiedades de la clase están trabajando con el mismo tipo.

(MEGA) Diseño y Programación Orientada a Objetos en C+

Juan Delgado — Fri, 03 Apr 2020 17:15:56 +0000

La programación orientada a objetos (OOP) es una estructura de programación en la que los programas se organizan en torno a objetos en oposición a la acción y la lógica. Esta es esencialmente una filosofía de diseño que utiliza un conjunto diferente de lenguajes de programación como C#. Entender los conceptos de OOP puede ayudar a tomar decisiones sobre cómo debe diseñar una aplicación y qué lenguaje usar.

Todo en OOP se coloca junto como "objetos" autosostenibles. Un objeto es una combinación de variables, funciones y datos que realiza un conjunto de actividades relacionadas. Cuando el objeto realiza esas actividades, define el comportamiento del objeto. Además, un objeto es una instancia de una clase. Además, C# ofrece soporte completo para OOP incluyendo herencia, encapsulación, abstracción y polimorfismo.

¿Que aprenderás en este curso?
En este curso sobre desarrollo de software con C# orientado a objetos aprenderás a construir software utilizando buenas prácticas de programación orientada a objetos, identificar puntos de mejora en los distintos módulos de una aplicación, realizar diagramas UML de las clases del sistema y aplicar los cinco principios SOLID de diseño orientado a objetos.

ENCUENTRALO AQUI Y DESCARGALO GRATIS: https://codepici-blog.site/udemy-diseno-y-programacion-orientada-a-objetos-en-c/

Curso JavaScript desde cero

Juan Delgado — Mon, 21 Oct 2019 02:14:19 +0000

En este curso aprenderás los fundamentos de este gran lenguaje de programación que se utiliza en toda la web. Javascript es el único lenguaje con el que se puedes programar desde el Frondend y el Backend.

¿Por qué aprender JavaScript?

Un lenguaje para dominarlos a todos, tanto frontend, como backend, como aplicaciones móviles y de escritorio.
Es fácil de empezar a desarrollar. Es el lenguaje más activo en este momento, con una comunidad cada vez más grande.Uno de los lenguajes más solicitados en el mundo laboral.Nos ofrece esta la posibilidad de desarrollar videojuegos mediante diferentes motores.

¿Qué aprenderás en el curso?

Aprenderas el lenguaje en su versión más reciente y aprenderás a crear un juego estilo Mario Bros.

Temario :

Historia
Variables y tipos
Funciones
Arrays
Diccionarios
Objetos
Prototipos
High-order functions

Aqui puedes entontrar el curso y lo puedes descarga gratis miralo aquí

Espero y te sirva!! 🤓💻

Guía rápida de Yarn

Juan Delgado — Tue, 15 Oct 2019 15:06:38 +0000

Yarn es un gestor de paquetes rápido, confiable y seguro, es una excelente alternativa a npm ya que yarn es mucho mas rápido porque almacena en cache los paquetes descargados y realiza operaciones en paralelo para maximizar la utilización de recursos. En este post te voy a mostrar las cosas mas importantes que debes de saber, como descargarlo y como utilizarlo.

Instalación

Te mostrare dos maneras de instalar Yarn, estas son :

Deberás de tener Instalado Node.js para poder utilizarlo

Descargando el Instalar de Window

Win: Descargar Instalador

Esta es la manera mas rápida y fácil de instalar Yarn, ejecuta en tu consola o terminal lo siguiente :

npm install --global yarn

Ahora comprueba que Yarn se instalo correctamente ejecutando el siguiente comando:

yarn --version

Si todo salio bien deberá de aparecerte la versión mas reciente de Yarn

Como Utilizarlo

Después de instalar Yarn puedes empezar a utilizarlo ejecutando un simple comando:

yarn init

Puedes utilizar yarn incluso si ya estabas trabajando con npm, lo único que debes de hacer es borrar el archivo package-lock.json para que yarn trabaje sin problemas

Instalar todas las dependencias de un proyecto:

yarn o yarn install

Instalar dependencias:
- yarn add [package] - ejemplo: yarn add vue
- yarn add [package]@[version] - ejemplo: yarn add vue@[2.6.8]
- yarn add [package] --dev - ejemplo: yarn add vue --dev
Actualizar dependías:

yarn upgrade [package] - ejemplo: yarn upgrade vue
Eliminar dependías:

yarn remove[package] - ejemplo: yarn remove vue

Y listo eso es todo por este post, ya aprendiste como poder utilizar Yarn en tus proyectos de una manera rápida y fácil. Cualquier duda o sugerencia la puedes dejar en los comentarios.

Actualmente estoy trabajando en la construcción de un Blog personal, lo estoy desarrollando con Gridsome un generador de sitios estáticos y obviamente con Vue. Me gustaría recibir unas opiniones de como luce mi Blog y que mas podría añadirle, si me quieres ayudar me puedes dejar un comentario, seria de gran ayuda. Este es mi Blog CodePici

My Colors 🐱‍🏍

Juan Delgado — Mon, 02 Sep 2019 13:51:14 +0000