Search for a command to run...
I'm a self-made indie developer, passionate about freedom and curiosity. Working in my own stuff from México, learning all the time, and eager to collaborate with the entire world. I'm learning to write (English and Spanish) so here I am.
No comments yet. Be the first to comment.
I was playing around with Qwik. The most insanely fast web framework out there. Yes, the most. And this is mainly because of the philosophy behind Qwik and its creator. Which you can read about here. An excellent read. If you ever liked Angular like ...
El método forEach() del Array, ejecuta la función que le provees una vez por cada elemento en el array.(Mdn docs). Básicamente, el método forEach es una de las mejores maneras para usar un ciclo en un array, es mucho más simple que usar un for(). Lo ...
Si eres un desarrollador front end seguro sabes que no deberías decirle JavaScript. También si te gusta estar actualizado(a) o si eres parte de la comunidad OSS (Open Source) seguro sabrás este grupo de datos, con lo que desde hace ya varios años les...
… Y ahora soy plenamente feliz.
Hablamos todo el tiempo de las buenas prácticas y estilos de código, pero pocas veces hablamos de las malas prácticas en las que inconscientemente caemos muy seguido. Por ello, quiero compartirte 3 malas prácticas en JavaScript que podría ser que no ...
Si tú también quieres mejorar al escribir tu código, invertir menos tiempo en «debugging» y más en creación, bueno entonces, seguro ya estás tipando tus componentes de React con Typescript.
Si no, checa esta entrada, te va a servir.
Bueno, yo también uso TS y me encanta, sí, es duro al principio, pero una vez que vas obteniendo los beneficios de escribir con TS, te libera de invertir horas en buscar bugs. Puedes ver la salud de un archivo entero solo de echándole un vistazo, gracias a TS.
Por eso quiero compartirte, 3 maneras simples y útiles en las que yo hago el tipado de eventos que ocupo más frecuentemente, para que tú, sigas tipando tus componentes y practicando TS:
El mejor tipo para un evento onChange, viene directamente de React. Lo mejor es que es un «generic» para decirle cuál es el tipo del «currentTarget».
<input
name='name'
type='text'
onChange={(evnt: React.ChangeEvent<HTMLInputElement>) => {
console.log(evnt.currentTarget); // esto es seguro, gracias al generic
}}
/>
También puedes importar solamente el ChangeEvent type, independiente de React.
Para un evento de formulario, también es importante que el atributo currentTarget esté presente en el tipo, lo podemos lograr así:
<form
onSubmit={(evnt: React.FormEvent<HTMLFormElement>) => {
console.log(evnt.currentTarget);
}}
>
<input type='text' />
</form>
Nos es importante el currentTarget porque es la manera correcta sobre target (checa) y también porque dentro de currentTarget está nuestro FormData.
<button
onClick={(evnt: React.MouseEvent<HTMLButtonElement>) => {
console.log(evnt.currentTarget);
}}
>
Presioname 🫠
</button>
Siendo específicos con el tipo de evento que se va a usar, nos permite usar los atributos y métodos con confianza, como clientY en el caso del MouseEvent, manteniendo saludable nuestra linterna. 🔦
Puedes explorar la documentación relacionada con TS y React, aquí.
Espero estos tipados rápidos te sean útiles mientras los aprendes de memoria. 🚀 🤓
Abrazo. Bliss.