DEV Community: Cristian Fernando

Advent.js 2025🎅🏼| Reto #2: Fabrica los juguetes

Cristian Fernando — Thu, 04 Dec 2025 02:44:07 +0000

La fábrica de Santa ha empezado a recibir la lista de producción de juguetes.
Cada línea indica qué juguete hay que fabricar y cuántas unidades.

Los elfos, como siempre, han metido la pata: han apuntado algunos juguetes con cantidades que no tienen sentido.

Tienes una lista de objetos con esta forma:

toy: el nombre del juguete (string)
quantity: cuántas unidades hay que fabricar (number) Tu tarea es escribir una función que reciba esta lista y devuelva un array de strings con:

Cada juguete repetido tantas veces como indique quantity
En el mismo orden en el que aparecen en la lista original
Ignorando los juguetes con cantidades no válidas (menores o iguales a 0, o que no sean número)
🧩 Ejemplos

const production1 = [
  { toy: 'car', quantity: 3 },
  { toy: 'doll', quantity: 1 },
  { toy: 'ball', quantity: 2 }
]

const result1 = manufactureGifts(production1)
console.log(result1)
// ['car', 'car', 'car', 'doll', 'ball', 'ball']

const production2 = [
  { toy: 'train', quantity: 0 }, // no se fabrica
  { toy: 'bear', quantity: -2 }, // tampoco
  { toy: 'puzzle', quantity: 1 }
]

const result2 = manufactureGifts(production2)
console.log(result2)
// ['puzzle']

const production3 = []
const result3 = manufactureGifts(production3)
console.log(result3)
// []

Mi solución:

Puedes consultar mi repositorio en GitHub con todos los retos del Advent.js 2025

crisdux / adventjs-2025

Practica tu lógica de programación con retos de código javascript

Advent.js 2025 🎅

Advent.js 2025🎅🏼| Reto #1: Filtrar los regalos defectuosos

Santa ha recibido una lista de regalos, pero algunos están defectuosos. Un regalo es defectuoso si su nombre contiene el carácter #.

Ayuda a Santa escribiendo una función que reciba una lista de nombres de regalos y devuelva una nueva lista que solo contenga los regalos sin defectos.

Ejemplos

const gifts1 = ['car', 'doll#arm', 'ball', '#train']
const good1 = filterGifts(gifts1)
console.log(good1)
// ['car', 'ball']

const gifts2 = ['#broken', '#rusty']
const good2 = filterGifts(gifts2)
console.log(good2)
// []

const gifts3 = []
const good3 = filterGifts(gifts3)
console.log(good3)
// []

Advent.js 2025🎅🏼| Reto #2: Fabrica los juguetes

La fábrica de Santa ha empezado a recibir la lista de…

View on GitHub

Puedes seguir todos los retos del Advent.js en este tweed de @midudev

// Detect dark theme var iframe = document.getElementById('tweet-1995586403544002855-178'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1995586403544002855&theme=dark" }

Advent.js 2025🎅🏼| Reto #1: Filtrar los regalos defectuosos

Cristian Fernando — Thu, 04 Dec 2025 02:31:10 +0000

Santa ha recibido una lista de regalos, pero algunos están defectuosos. Un regalo es defectuoso si su nombre contiene el carácter #.

Ayuda a Santa escribiendo una función que reciba una lista de nombres de regalos y devuelva una nueva lista que solo contenga los regalos sin defectos.

Ejemplos

const gifts1 = ['car', 'doll#arm', 'ball', '#train']
const good1 = filterGifts(gifts1)
console.log(good1)
// ['car', 'ball']

const gifts2 = ['#broken', '#rusty']
const good2 = filterGifts(gifts2)
console.log(good2)
// []

const gifts3 = []
const good3 = filterGifts(gifts3)
console.log(good3)
// []

Mi solución:

Puedes consultar mi repositorio en GitHub con todos los retos del Advent.js 2025

crisdux / adventjs-2025

Practica tu lógica de programación con retos de código javascript

Advent.js 2025 🎅

Advent.js 2025🎅🏼| Reto #1: Filtrar los regalos defectuosos

Santa ha recibido una lista de regalos, pero algunos están defectuosos. Un regalo es defectuoso si su nombre contiene el carácter #.

Ayuda a Santa escribiendo una función que reciba una lista de nombres de regalos y devuelva una nueva lista que solo contenga los regalos sin defectos.

Ejemplos

const gifts1 = ['car', 'doll#arm', 'ball', '#train']
const good1 = filterGifts(gifts1)
console.log(good1)
// ['car', 'ball']

const gifts2 = ['#broken', '#rusty']
const good2 = filterGifts(gifts2)
console.log(good2)
// []

const gifts3 = []
const good3 = filterGifts(gifts3)
console.log(good3)
// []

Advent.js 2025🎅🏼| Reto #2: Fabrica los juguetes

La fábrica de Santa ha empezado a recibir la lista de…

View on GitHub

Puedes seguir todos los retos del Advent.js en este tweed de @midudev

// Detect dark theme var iframe = document.getElementById('tweet-1995586403544002855-239'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1995586403544002855&theme=dark" }

Creación de un entorno de pruebas para frontend: React, TypeScript y Vitest ⚛️

Cristian Fernando — Wed, 29 Oct 2025 15:00:51 +0000

Índice

Introducción
Creación de proyecto
Instalacion y configuracion para testing básico
Instalacion y configuracion para testing avanzado
Consideraciones finales
Conclusiones
Referencias

1. Introducción

El presente post es un ejemplo práctico de cómo crear y configurar un entorno de testing para frontend usando React, Vitest y TypeScript.

El post no se enfoca en el uso de ninguna de estas tecnologías ni brinda ejemplos de testing, sólo se concentra en enseñar la creación de un ambiente de pruebas propicio y listo para usar.

Dicho eso, comencemos.

2. Creación de proyecto

El proyecto lo creamos con Vite, React + SWC y TypeScript haciendo uso de pnpm como gestor de dependencias.

Posteriormente hacemos una limpieza del proyecto creado borrando archivos que no nos servirán para este ejemplo.

El repositorio final del ejemplo lo tendrás disponible al final de este post.

3. Instalacion y configuracion para testing básico

Como primer paso vamos a instalar vitest, es el framework que usaremos para poder realizar las pruebas pertinentes.

pnpm add -D vitest

Con vitest instalado ya podemos hacer pruebas unitarias básicas.

Adicionalmente instalaremos la dependencia @vitest/ui para poder ver la implementación de los test de manera más gráfica y cómoda:

pnpm add @vitest/ui

Y finalmente configuramos los scripts en nuestro package.json:

 "scripts": {
   "dev": "vite",
   "build": "tsc -b && vite build",
   "lint": "eslint .",
   "preview": "vite preview",
   "test": "vitest",
   "test:ui": "vitest --ui"
 }

En el proyecto encuentras una carpeta helpers con un archivo math.tsx con una función de suma básica que luego se importa y se prueba en math.test.tsx.

En la raíz del proyecto corremos las pruebas con pnpm run test y tendremos lo siguiente:

Ahora si queremos ver las pruebas en un entorno mas grafico podemos hacer pnpm run test:ui y luego veremos esto en el navegador:

Y listo, así de fácil podemos crear un entorno de testing básico en react.

4. Instalacion y configuracion para testing avanzado

Para poder hacer testing de la ui de un componente de react tenemos que instalar algunas dependencias adicionales, veamos cómo se hace.

Primero instalaremos Testing Library, es una libreria que permite hacer testing de interfaces de usuario moderna y fácil de usar.

Para instalarlo nos dirigimos a la pagina de Testing Library y buscamos el comando para instalarlo con React y TypeScript, ahora te dejo el link directo.

En la página nos dan la dependencia para instalarlo con npm

npm install --save-dev @testing-library/react @testing-library/dom @types/react @types/react-dom

Pero para pnpm seria:

pnpm add -D @testing-library/react @testing-library/dom @types/react @types/react-dom

Listo!

Ahora procedemos a las configuraciones.

Vamos a nuestro archivo vite.config.ts que originalmente se ve así:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

Debemos cambiar la importación de defineConfig para que sea desde vitest/config y modificar la configuración para que se vea de esta manera:

import { defineConfig } from "vitest/config";

import react from "@vitejs/plugin-react-swc";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: true,
  },
});

Lo más importante es esta configuración es el uso de jsdom como dependencia. Justamente jsdom nos ayudará a recrear el DOM de nuestros componentes web fuera del navegador para poder realizar las pertinentes pruebas.

Para probar todo creo un componente básico Hello.tsx:


interface Props {
    title: "string;"
}

const Hello = ({title}:Props) => {
  return (
    <div>{title}</div>
  )
}

export default Hello

Y también creo su archivo Hello.test.tsx:

import { describe, test } from "vitest";
import { render } from "@testing-library/react";
import Hello from "./Hello";

describe("Test", ()=> {
    test("Test 1", () => {
        render(<Hello title="hola" />)

    })
})

Si intentamos correr las pruebas tendremos un error por que nos faltan instalar dos dependencias más: jsdom y @vitejs/plugin-react

Una vez hecho esto las pruebas corren sin problemas.

La función render nos sirve para cargar el componente y screen.debug para poder ver la estructura del dom en la consola.

5. Consideraciones finales

Si bien jsdom es la librería que usamos para poder cargar el dom fuera del navegador, es importante mencionar que tenemos otras opciones igual de potentes e importantes por ejemplo happy-dom, alternativa más rápida y ligera que jsdom, con mejor rendimiento. Compatible con la mayoría de APIs del DOM.

Característica	happy-dom	jsdom
Velocidad	🚀 2-10x más rápido	Más lento
Tamaño	~600 KB	~4 MB
Compatibilidad	~90% APIs DOM	~95% APIs DOM
Fetch API	✅ Nativo	❌ Requiere polyfill
Uso de memoria	Menor	Mayor
Framework por defecto	Vitest	Jest

El uso de jsdom está más extendido para hacer test pero que esto no te impida probar otras opciones interesantes.

6. Conclusiones

Realizar testing en el frontend es muy importante, poder configurar un ambiente adecuado para las pruebas es igual de relevante para poder asegurarnos como devs la calidad del código mandando a producción.

Hoy en día las herramientas de IA facilitan mucho la realización de pruebas automáticas por lo que no hay excusa para dejar de implementarlas en nuestro proyectos web.

Finalmente destacó la facilidad de configuración de vitest, cómo vitest está hecho por el equipo de desarrollo de vite la compatibilidad y estabilidad es inmejorable y por ello lo recomiendo a más no poder para nuestros futuros y presentes proyectos.

A continuacion te dejo el linka repositorio donde podra encontrar todo el codigo mencionado y mostrado en este post

7. Referencias

Principales comandos de bash para Linux 🐧

Cristian Fernando — Thu, 02 Oct 2025 16:11:38 +0000

Lista de comandos

1. Ejecutar luego de instalar una distribución

Verifica actualizaciones de los repositorios de Linux
sudo apt update

Actualiza todos los paquetes instalados
sugo apt upgrade

Elimina dependencias residuales de los paquetes
sudo apt autoremove

Nota: se sugiere ejecutar los 3 comandos anteriores en ese orden.

Un comando el Linux tiene la siguiente estructura

2. Comandos del sistema

Conocer el user actual
whoami

Conocer informacion del sistema operativo
uname -a

Conocer datos del procesador
lscpu

Conocer la fecha actual
date

Ver un calendario con el mes actual
cal

Conocer datos del disco duro
df -h

Conocer datos de RAM
free -h

Imprimir cada 5 seg el estado de la RAM
free -h -s 5

3. Listar Directorios


Print Working Directory: Muestra la ruta actual donde nos encontramos
pwd

List: lista los directorios y archivos de la ruta actual
ls

Lista TODOS los archivos y directorios (incluido los ocultos)
ls --all o ls -a

Lista con formato los directorios
ls -l

Lista con formato todos los archivos (incluido los ocultos)
ls -al

Muestra de menera entendible el peso de todos los archivos
ls -h 

Ordena los archivos por peso
ls -S

Ordena los archivos por fecha
ls -t 

Revierte toda la salida 
ls -r
ls --reverse

Muestra el contenido del directorio sin tener que entrar en el 
ls [nombre_directorio]

Averiguar el tipo de un archivo
file nombre_archivo

4. Ver archivos

Abre el contenido de un archivo
less nombre_archivo

Una vez estamos dentro del archivo:

Comando	Descripción
Espacio	Avanza una página completa.
b	Regresa una página completa.
g	Va al inicio del archivo.
G	Va al final del archivo.
/ `palabra`	Introduce una búsqueda hacia adelante (presiona `Enter` para buscar).
n	Va a la próxima coincidencia de la búsqueda.
N	Va a la coincidencia anterior de la búsqueda.
q	Sale de `less` y regresa a la terminal.

5. Movernos entre directorios

Change Directory: cambiar de directorio
cd [nombre_directorio]

Regresar al directorio padre o al directorio anterior
cd ..

Mueve al directorio inicial /home/user
cd ~

Mueve al ultimo directorio visitado (directorio anterior)
cd -

6. Crear, eliminar directorios o archivos


Crea un nuevo archivo
touch [nombre_archivo]

Elimina un archivo
rm [nombre_archivo]

Crea una nueva carpeta
mkdir [nombre_carpeta]

Crea carpetas anidadas
mkdir -p carpeta_1/carpeta_2/carpeta_n

Elimina un carpeta con todo su contenido
rm -r [nombre_carpeta]

Forzar la eliminacion de un archivo o carpeta
rm -rf nombre_carpeta

7. Copiar, Mover Archivos

Las siguientes banderas son útiles para poder copiar archivos:

Bandera	Nombre largo	Descripción	Ejemplo de uso
`-i`	`--interactive`	Pide confirmación antes de sobrescribir un archivo existente.	`cp -i archivo.txt destino/`
`-r`	`--recursive`	Copia directorios y su contenido de forma recursiva.	`cp -r carpeta/ destino/`
`-u`	`--update`	Copia solo si el archivo de origen es más reciente o no existe en destino.	`cp -u *.log respaldo/`
`-v`	`--verbose`	Muestra mensajes detallados durante la copia.	`cp -v documento.pdf documentos/`


Copiar archivos
cp [archivo_a_copiar] [ruta_donde_se_copiara]

Copiar el contenido de un archivo a un archivo nuevo
cp archivo_a_copiar nuevo_archivo_donde_se_copiara

Mover archivos o carpetas
mv [archivo_a_mover] [ruta_donde_se_movera]

Renombrar archivos
mv nombre_archivo nuevo_nombre

8. Listar, copiar, mover, borrar con clases de caracteres

Listar todos los archivos que comiencen por un digito
ls [[:digit:]]*

Listar todos los archivos que contengan al menos un digito
ls *[[:digit:]]*

Listar todos los archivos que empiecen por mayuscula
ls [[:upper:]]*

Elimina todos los archivos que terminen en minuscula 
rm -rf *[[:lower:]]

Copia los archivos pdf que empiecen por mayuscula 
cp [[:upper:]]*.pdf /respaldo

9. Ver y concatenar archivos

Ver el contenido de un archivo en la consola
cat [nombre_archivo] 

Ver y enumerar cada linea del archivo en cosola
cat -n [nombre_archivo]

Crea un nuevo archivo y permite agregale contenido
cat > [nombre_archivo] (ctrl + d para salir)

Concatenar varios archivos
cat [nombre_archivo] [nombre_archivo_2]

Redireccionar la salida de cat a otro archivo (sobre escribe)
cat nombre_archivo > nuevo_archivo

Redireccionar la salida de cat a otro archivo (agregando el contenido al final de archivo)
cat nombre_archivo >> nuevo_archivo

10. Redirección de comandos

Escribe la salida del comando ls en el archivo salida.txt
Este comando sobre escribe el archivo
ls > salida.txt

Escribe la salida del comando ls en el archivo salida.txt
Este comando NO sobre escribe el archivo
ls >> salida.txt

Borra todo el contenido de salida.txt
> salida.txt

11. Pipelines

Los pipelines sirven para que la salida de un comando sea usada como la entrada de otro, como una tuberia

Lista archivos, los ordena alfabeticamente y los muestra con less
ls -la | sort | less

Lista archivos, los ordena alfabeticamente, filtra solo los que no estan duplicados y los muestra con less
ls -la | sort | uniq | less

Si quiero ver solo los duplicados
ls -la | sort | uniq -d | less

Para ver la cantidad de archivos, palabras y bytes en ese orden
wc: World Counter
ls -la | wc | less

Para buscar coincidencias exactas en los nombres 
Lista todos los libros, los ordena, selecciona los que no se repiten, busca aquellos que tenga el string Saramago en el nombre de los archivos, los redirecciona a un archivo salida.txt
ls -la ./libros_pendientes | sort | uniq | grep Saramago | cat > ../salida.txt

Mostrar los primeros 10 archivos (-n para variar el numero)
ls -la | head

Mostrar los ultimos 10 archivos (-n para variar el numero)
ls -la | tail

Referencias

https://www.youtube.com/watch?v=jVQKk8IB9pA

🚧 Proximamente mas comandos 🚧

Paracetamol.ts💊| #47: Explica este código TypeScript

Cristian Fernando — Thu, 18 Sep 2025 12:39:13 +0000

Explica este código TypeScript

Dificultad: Avanzado

type Animal = "perro" | "gato" | "conejo";

type ConteoAnimal = {
    [U in Animal]: number;
}

const miAnimal:ConteoAnimal = {
    perro:20,
    gato:30,
}

A. TypeError
B. Property 'conejo' is missing in type '{ perro: number; gato: number; }' but required in type 'ConteoAnimal'
C. Todo funciona bien
D. Ninguna de las anteriores

Respuesta

✅ B. Property 'conejo' is missing in type '{ perro: number; gato: number; }' but required in type 'ConteoAnimal'

En TypeScript tenemos los Mapped Types. Sirven para relacionar dos types entre si para un fin en común.
En este caso relacionamos el tipo literal Animal con ConteoAnimal. El generico U de [U in Animal] establece que el tipo ConteoAnimal debe tener como llaves todos los literales de Animal, por ello al crear el objeto miAnimal y no tener la llave conejo falla.

Paracetamol.ts💊| #46: Explica este código TypeScript

Cristian Fernando — Mon, 15 Sep 2025 15:43:37 +0000

Explica este código TypeScript

Dificultad: Básico

type Empleado = {id:number; nombre: string; area:"Ventas" | "RH" | "Finanzas"};
type Admin = {id:number; nombre: string; empleados:Empleado[]};

type Staff = Empleado | Admin;

const logPerson = (staff: Staff) =>{
    if("area" in staff){
        console.log(`El empleado ${staff.nombre} trabaja en ${staff.area}`)
    }else {
        console.log(`El admin ${staff.nombre} tiene ${staff.empleados.length} empleados a su cargo`)
    }
}

const pedro:Empleado = {
    id: 1,
    nombre: "pedro",
    area:"Ventas",
}

const carlos:Empleado = {
    id:2,
    nombre:"carlos",
    area: "RH",
}

const felipe:Admin = {
    id:1,
    nombre:"felipe",
    empleados: [pedro, carlos],
}

logPerson(felipe)

A. SyntaxError
B. "El admin felipe tiene 2 empleados a su cargo"
C. TypeError
D. undefined

Respuesta

✅ B. "El admin felipe tiene 2 empleados a su cargo"

En TypeScript tenemos la característica de usar type para declarar tipos de manera mas usable y reutilizable, incluso fusionar conceptos y usar estos tipos como uniones.

Notar que el narrowing en este ejemplo es imoportante para diferenciar cuando estamos tratanto con un Empleado y cuando con un Admin, esto no lo podemos hacer usando el operador typeof como en otros ejemplos puesto que ni Empleado ni Admin son tipos de datos validos de JavaScript, por este motivo verificamos una llave en especifico para cada caso: si tiene la key area se trata de un Empleado y sino se trata de un Admin.

Adiós a node_modules gigantes: descubre cómo pnpm revoluciona la gestión de paquetes en nuestros proyectos web 🎉

Cristian Fernando — Wed, 10 Sep 2025 12:56:59 +0000

Índice

¿Qué es pnpm?
¿Cómo funciona internamente pnpm?
Características de pnpm
Principales comandos de pnpm
Conclusiones
Referencias

1. ¿Qué es pnpm?

pnpm es un gestor de paquetes para proyectos web. Se encarga de administrar todas las dependencias de nuestro proyecto pero brindando una mejor optimización y mantenimiento de los mismos.

La "p" de pnpm significa performace, dato que nos da un spoiler del funcionamiento de esta herramienta.

2. ¿Cómo funciona internamente pnpm?

Para ilustrar mejor el funcionamiento interno de pnpm vamos a ejemplificar todo con un caso de uso:

Instalar un paquete

Imagina que quieres instalar un paquete en tu proyecto, por ejemplo loadash.

loadash es un paquete de funciones de utilidad muy usado hace algunos años pero que nos servirá de ejemplo para este caso.

Lo que tendríamos que hacer es: pnpm add loadash

Entonces pnpm se encarga de ir a internet, buscar el paquete e instalarlo; además de crear el tan famoso directorio package.json donde se administran todas las versiones de las dependencias.

El almacén global compartido

Esta es la clave del funcionamiento de pnpm: al descargar el paquete no lo almacena en el directorio del proyecto como tal, sino que, dependiendo del sistema operativo crea lo que se denomina el almacén global compartido.

Este almacén es una dirección en local de nuestro PC donde se guardaran todas las dependencias con sus respectivas versiones, por ejemplo en Windows se guardaría en: C:\Users\TuUsuario\AppData\Local\pnpm\store.

Ahora imagina que tenemos otros 10 proyectos en nuestra PC que también necesitan loadash para funcionar. Si usáramos npm tendríamos que descargar 10 veces el mismo paquete (1 para cada proyecto) lo que significa que es una manera tremendamente ineficiente de administrar nuestras dependencias.

Es por este motivo el meme tan popular que le hacemos a npm:

pnpm solo descarga la dependencia una sola vez y la podemos usar en cualquier proyecto que lo necesite, por este motivo pnpm es mucho más óptimo y eficiente que otros gestores de paquetes.

¿Cómo se accede al paquete?

Para acceder a los paquetes pnpm tiene un sistema de enlaces, algo parecido a los accesos directos a los programas que tenemos en nuestros escritorios de nuestras computadoras.

Como todos los paquetes se almacenan en un solo lugar, en el almacén global compartido, entonces pnpm crea un enlace entre nuestro proyecto y dicho almacén y hace lo mismo para aquel proyecto que necesite un paquete en concreto.

En nuestro ejemplo si a loadash lo requieren de 10 proyectos diferentes entonces se crean 10 enlaces diferentes a dicho paquete, esto mejora enormemente todo el proceso de gestión de paquetes y hace que nuestra carpeta de node_modules sea mas liviana.

Esta explicación del proceso interno de pnpm para la gestión de los paquetes es muy simplificada pero suficiente para comprender porque pnpm es una mejor herramienta. Existen otros procesos para explicar que sucede si los paquetes son de diferentes versiones o si las dependencias tienen sus propias dependencias.

3. Características de pnpm

pnpm es más rápido

Al no tener que descargar el mismo paquete para diferentes proyectos sino poder reutilizar la misma dependencia muchas veces hace que pnpm sea muy eficiente en términos de tiempo.

pnpm ocupa menos espacio

Como solo tenemos que descargar el paquete una vez hace que las dependencias ocupan mucho menos espacio, lo que se deriva en una carpeta node_modules más liviana.

pnpm tiene menos conflictos

Al usar enlaces para acceder a los paquetes pnpm es menos propenso a tener conflictos entre dependencias.

4. Principales comandos de pnpm

Habiendo comprendido mejor porque pnpm es una herramienta genial, veamos algunos de sus comandos mas útiles:


//crear el package.json
pnpm init

// instalar todas las dependencias
pnpm install

// instalar una dependencia
pnpm add <dependencia>

// instalar una dependencia de desarrollo
pnpm add -D <dependencia>

// quitar una depedencia
pnpm remove <dependencia>

// instalar una dependencia globalmente
pnpm add -g <dependencia>

// listar todas las dependencias
pnpm list

// actualizar una dependencia
pnpm update <dependencia>

// listar todos los paquetes que tienen una actualización
pnpm outdated

5. Conclusiones

pnpm es una herramienta de desarrollo web moderno que nos facilita mucho la gestión de paquetes en nuestros proyectos web, es sencilla de manejar y muy parecida a npm por lo que migrar no cuesta casi nada.

Recomiendo mucho su uso en nuestros proyectos por todas las ventajas de almacenamiento y velocidad que nos proporciona.

6. Referencias

Otros post de mi autoría que te pueden interesar:

Cristian Fernando

Jun 25 '25

CSS moderno: ¿condicionales if en CSS? 🤔

#frontend #css #html #webdev

Comments

3 min read

Cristian Fernando

Sep 3 '25

Const Assertions en TypeScript 🤔

#webdev #typescript #spanish #programming

Comments

4 min read

Cristian Fernando

Sep 1 '25

Paracetamol.ts💊| #44: Explica este código TypeScript

#javascript #typescript #spanish #webdev

Comments 1

1 min read

Paracetamol.ts💊| #45: Explica este código TypeScript

Cristian Fernando — Mon, 08 Sep 2025 13:02:54 +0000

Explica este código TypeScript

Dificultad: Intermedio

const temperatura = [25, "C"];
const tupla:[number, string] = temperatura;

A. No se puede asignar (number | string)[] a [number, string]
B. No hay ningún error
C. Syntax Error
D. Ninguna de las anteriores

Respuesta

✅ A. No se puede asignar (number | string)[] a [number, string]

La variable temperatura es un arreglo de numeros y cadenas, por ende puede aceptar cualquier cantidad de items siempre y cuando sean de estos tipos de datos, en nuestro ejemplo solo tienen 2 valores: 25 y "C" pero podrían tener más.

En cambio nuestra variable tupla es una tupla que explícitamente le indicamos que solo puede tener 2 items, el primero de tipo number y el segundo te tipo string en ese orden.

Por ello no se puede asignar (number | string)[] a [number, string] ya que el primero es un arreglo y el segundo es una tupla.

Para solucionar esto tenemos que declarar a temperatura como una tupla de manera explicita y no dejar que TypeScript infiera su tipo:

const temperatura:[number, string] = [25, "C"];

Ahora si temperatura es una tupla de dos valores y si es asignable a la variable tupla.

Const Assertions en TypeScript 🤔

Cristian Fernando — Wed, 03 Sep 2025 12:57:47 +0000

Índice

¿Qué es una aserción de tipo en TypeScript?
¿Qué es una const assertion en TypeScript?
Casos de uso de const assertions
const assertions en primitivos
const assertions en arreglos
const assertions en objetos
Conclusiones
Referencias

1. ¿Qué es una aserción de tipo en TypeScript?

TypeScript tiene la ventaja de proporcionarnos tipos de datos para nuestras variables lo que mejora enormemente la escritura y mantenibilidad de nuestro código.

No siempre podemos indicar el tipo de dato de una variable, en estos casos podemos usar lo que se denomina una aserción de tipo que consiste en convertir un tipo de dato en otro, como si fuera un cating de tipos. Veamos algunos ejemplos:

const saludo = "Hola mundo" as string;

let nombres = ["Carlos", "Juan", "Pedro"];
nombres as string[] // un arreglo de cadenas
nombres as [string, string, string]; // una tupla de tres cadenas
nombres as ["Carlos", "Juan", "Pedro"] // una tupla literal de 3 nombres específicos

2. ¿Qué es una const assertion en TypeScript?

Veamos la siguiente función:

function test(text:string){ // regresa (string | number)[]
    return [text[0], text.length]
}

const res = test("Cris");
console.log(res) // ["C", 4]
res.push("Hola");
console.log(res) // ["C", 4, "Hola"]

La función test regresa un arreglo de cadenas o números lo que tiene sentido por que estamos obteniendo el primer carácter de la cadena pasada por parámetro y luego la longitud de dicha cadena.

En este ejemplo podemos agregar mas items al arreglo resultante siempre y cuando sean de tipo cadena o número sin ningún problema.

Ahora refactoricemos la función agregando una const assertion:

function test(text:string){ // regresa readonly [string, number]
    return [text[0], text.length] as const
}

const res = test("Cris");
console.log(res) // ["C", 4]
res.push("Hola");
console.log(res) // Error

Ahora nuestra función regresa una tupla de 2 posiciones, la primera una cadena y la segunda de un número además de ser de solo lectura.

En este ejemplo no podemos agregar mas items al arreglo resultante puesto que esta limitado a solo recibir dos: una cadena y un número en ese orden.

Lo que hace la const assertion con el código as const justamente es convertir el tipo de regreso a su tipo mas literal posible.

3. Casos de uso de const assertions

Existen 3 casos en los que podemos usar una const assertion:

Con primitivos: se convierten a sus literales inmediatos.
Con arreglos: se convierten en tuplas de solo lectura (como en nuestro ejemplo).
Con objetos: las propiedades de los objetos se convierten en solo de lectura.

4. const assertions en primitivos

Con tipos primitivos se convierten en sus literales mas proximos.

const getName = () => { // regresa un string
    return "Anna Bela" 
}

const getName = () => { // regresa "Anna Bela"
    return "Anna Bela" as const
}

Veamos otro ejemplo:

interface User {
    nombre:string;
    edad: number;
    tipo: "admin" | "normal"
}

const f = (user:User) => {
    if(user.tipo === "admin"){
        return user.nombre.toUpperCase();
    }
    return user.edad;
}

const cris = {
    nombre:"Cris",
    edad:25,
    tipo: "admin" // para TypeScript esto es un string y no una cadena literal
}

console.log(f(cris)) // Error, TypeScript no tiene como diferenciar entre un string y una cadena literal

Para arreglar esto debemos usar const as de la siguiente manera:

const cris = {
    nombre:"Cris",
    edad:25,
    tipo: "admin" as const // ahora si TypeScript sabe que "admin" es una cadena literal y no cualquier string
}

5. const assertions en arreglos

Con arreglos convertimos el tipo a un tupla de solo lectura:

let arr = [1,2,3] as const
arr.push(4); // no podemos agregar mas valores a la tupla
console.log(arr)

En este ejemplo el tipo de dato de arr es readonly [1,2,3].

Tampoco podemos modificar sus valores por que es de solo lectura:

let arr = [1,2,3] as const
arr[0] = 20 // Error

6. const assertions en objetos

Con los objetos obtenemos las propiedades de solo lectura, por ejemplo:

type Preferencia = "si" | "no" | "quizas";

const f = (obj:Preferencia) => {
    switch(obj){
        case "si":
            return "Genial";
        case "no":
            return "Que mal";
        case "quizas":
            return "Ups!";
        default:
            return "Opciones incorrectas";
    }
}

const miObj = {
    manzana: "si"
};

console.log(f(miObj.manzana)) // string no se puede asignar al tipo literal de Preferencia

Para arreglar esto debemos usar as const y convertir el primitivo a su tipo literal:

const miObj = {
    manzana: "si" as const
};

7. Conclusiones

*Las const assertions son muy útiles para poder hacer un casting de tipos de datos en nuestros programas de TypeScript.

Esta característica solo esta disponible en TypeScript, al compilar el código a JavaScript desaparece esta funcionalidad.
Recuerda que lo único que hace as const es convertir variables a sus tipos literales mas proximos y volverlos de solo lectura, eso es todo.

8. Referencias

Learning TypeScript, Josh Goldberg

Paracetamol.ts💊| #44: Explica este código TypeScript

Cristian Fernando — Mon, 01 Sep 2025 13:48:29 +0000

Explica este código TypeScript

Dificultad: Básico

const arr1 = [1, 2, 3];
const arr2 = ["hola", "mundo"];

const result = [...arr1, ...arr2];
// ¿Cuál es la anotación de tipo de result?

A. string[]
B. number[]
C. array[]
D. (string | number)[]

Respuesta

✅ D. (string | number)[]

Cuando usamos el Spread Operator en TypeScript la anotación de tipo resultante será la unión de tipos de todos los elementos de ambos arreglos. En este caso la unión entre cadenas y números de ambos arreglos.

Paracetamol.ts💊| #43: Explica este código TypeScript

Cristian Fernando — Thu, 28 Aug 2025 13:38:10 +0000

Explica este código TypeScript

Dificultad: Básico

const rakingMovies = (movie:string, raking = 0) => {
    return {movie, raking}
}

console.log(rakingMovies("Titanic", "5"))

A. Titanic, "5"
B. El tipo string no es asignable al tipo number de dato
C. Titanic, 5
D. Ninguna de las anteriores

Respuesta

✅ B. El tipo string no es asignable al tipo number

Cuando declaramos valores por defecto a los parametros de una función y dicho parametro no tiene como tal un tipo declarado de manera explicita entonces TypeScript se encarga de inferir el tipo de dato de dicho parametro, en este caso el parametro ranking tiene por defecto el valor de 0 entonces se infiere que ranking es de tipo number.

Cuando pasamos el argumento como cadena "5" tendremos un error.

Paracetamol.ts💊| #42: Explica este código TypeScript

Cristian Fernando — Tue, 26 Aug 2025 13:25:58 +0000

Explica este código TypeScript

Dificultad: Básico

function getArtist(name?:string, music: string | undefined){
    return {name, music}
}

console.log(getArtist("Radiohead", "Indie Rock"))

A. Radiohead, Indie Rock
B. Indie Rock
C. Los parametros opcionales simpre deben ir al final de la función
D. Radiohead

Respuesta

✅ C. Los parametros opcionales simpre deben ir al final de la función

Los parámetros opcionales en las funciones de TypeScript siempre deben ir al final, si esto no pasa (como en el ejemplo), tendremos un error.