Cómo crear mejores componentes con tipografías y ganchos reaccionados (i)

Una de las cosas que más me gustan de mis socios de Nelio, Ruth y Toni, es la posibilidad de elegir qué proyectos trabajaremos y cómo los implementaremos. También disfrutamos aprender y probar nuevas tecnologías siempre que podamos. Por lo tanto, no debería ser una sorpresa que cada vez que comencemos algo, lo vemos como una oportunidad para integrar lo que hemos aprendido hasta ahora y hacer las cosas mejor. En la publicación de hoy, quiero hablar con usted sobre los tipos y, en particular, sobre cómo una buena definición de tipo en TypeScript puede guiar el desarrollo de nuestros complementos, lo que nos permite crear un software más robusto, más confiable y más fácil de mantener. Y, además, lo explicaré con un ejemplo real, Neli Popups, que Ruth te dijo hace unos días. Espero que les guste y que, como nosotros, quieras probarlo en los siguientes proyectos.
Una presentación general de TypeScript como ya hemos mencionado en publicaciones anteriores, TypeScript es un lenguaje de programación que extiende JavaScript con tipos. Su propósito es simple: la tusión sólida de nuestro código JavaScript nos ayudará a prevenir errores rodantes (porque el compilador los detectará en el momento de la compilación) y conducirá a un software mejor y más confiable. Por ejemplo, imagine que tenemos un objeto con información sobre un usuario: nombre, contraseña, etc. Const u = {nombre: ‘David’, contraseña: ‘Some-Nice-Password’,}; Luego, supongamos que tenemos una función que verifica si la contraseña de un usuario es “segura” (es decir, tiene 8 o más caracteres):
Function HasSafepassword (usuario) {return 8 <= user.pasword.length; } Hassafepassword (u); // ¡error! Bueno, resulta que en menos de 10 líneas de código, tenemos un error que, a primera vista, es difícil de sorprender. Tenemos que ejecutar el código para que sea obvio: Uncougight typeError: user.pasword es una palabra de Hassapassword indefinida, esto es lo que salió mal: nuestro usuario no tiene un atributo de pasword … ¡porque lo escribí mal! De hecho, s una contraseña con dos … si implementé el mismo código usando TypeScript y proporcioné una definición de tipo para un objeto de usuario, como sigue: type user = {readonly name: string; Readonly contraseña: cadena; }; // a const u: user = {nombre: 'David', contraseña: 'Some-Password',}; // B Función Hassaphesword (usuario: usuario) {return 8 <= user.pasword.length; } // c Hassafepassword (u); El compilador podría haber tomado el error de inmediato: la propiedad 'pasword' no existe en el tipo 'persona'. ¿Quiso decir 'contraseña'? Un ejemplo bastante simple con el cual, para ser sincero, ambos lo conocemos y yo hemos enfrentado varias veces … que se puede abordar rápidamente a través de un sistema de tipo robusto. Tipos de sindicatos Una de las cosas más fuertes de TypeScript es que cualquier variable o parámetro puede tener más de un tipo. En el ejemplo anterior, por ejemplo, vi que Constanta U debe ser exactamente del tipo de usuario, así como del parámetro del usuario en la función Hassapassword. Ahora, hay casos en los que necesitamos una variable o parámetro para tener diferentes tipos. Un ejemplo paradigmático a este respecto es un reductor Redux.
Como discutimos en una publicación anterior, una tienda Rodux nos permite seguir el estado de nuestra aplicación. Para actualizarlo, tenemos un método de reducción que toma dos argumentos (el estado actual de nuestra aplicación y una acción con la información necesaria para actualizarla) y produce una nueva condición: Reductor de funciones (Estado, Acción: Acción): Estados en un Muy lógicamente, las acciones que recibe un descuento son diferentes entre sí. Por ejemplo, si implementamos una lista de TODO, podemos tener acciones como estas: crear una tarea: tener una identificación y descripción de una tarea, agrégala al estado de la aplicación.
Eliminar una tarea: dada la identificación de una tarea, elimínela del estado de la aplicación.
Cambie la condición de una tarea: dada la identificación de una tarea, marquelo como completado si estaba pendiente (y viceversa).
En TypeScript:
Escriba newtask = {readonly type: 'new_task'; Readonly ID: String; Tarea de lectura: cadena; } Type RemoveTask = {readonly type: 'remove_task'; Readonly ID: String; } Type toggletaskStatus = {readonly type: 'toggle_task_status'; Readonly ID: String; } Como puede ver, las acciones de una aplicación tan pequeña serían NewTask, RemoveTask o ToggletAskStus. Esto es lo que se conoce como "Type Union", que TypeScript representa el uso del símbolo de la tubería:
Tipo de acción = | NewTask | RemoveTask | Toggletaskstus; Escriba guardias Cuando se ejecute el código, una acción en nuestro ejemplo de lista TODO solo tendrá un tipo específico. Si observa de cerca su definición, observará NewTask, eliminark y toggletaskStatus todos tienen una propiedad tipo (que, por cierto, es una convención estándar en las tiendas Rodux) y una propiedad de identificación. También notará que NewTask es ligeramente diferente: también tiene una propiedad de tareas. Antes de usar una acción, necesitamos saber su tipo exacto. Para hacer esto, usamos una cosa llamada "Guardias de tipo". Un tipo de guardia es una función simple que valida si una cierta variable tiene un tipo en particular u otro. En el caso de las acciones, esta verificación es súper simple, porque todo lo que debemos hacer para conocer el tipo específico de acción es observar el atributo de tipo, espíritu: reductor de funciones (estados, acción: acción): state {switch (switch ( Action.Type) {case 'new_task': return {… state, [action.id]: {completado: falso, tarea: action.task,}}; …}} Por lo tanto, podemos usar un bloque de interruptor para hacer una cosa u otra dependiendo de la acción recibida. Cuando el tipo es new_task, ciertamente sabemos que se nos ha dado una acción de NewTask y, por lo tanto, la acción contiene el atributo de la tarea.
Este tipo de unión de tipos se llama "unión de tipos discriminados" porque, como lo indica el nombre, es una unión de tipos, todo lo que tiene un atributo común (en este caso, tipo) que nos permite discriminar por un tipo del otro.Pero no todos los sindicatos de tipo tienen un discriminador.Es perfectamente posible que dos tipos diferentes no tengan un atributo específico para distinguirlos: type element = post |Tarea;Type post = {readonly id: número;Readonly Título: cadena;} Type tarea = {readonly id: número |cuerda;Tarea de lectura: cadena;Readonly completado: booleano;} Entonces surge la siguiente pregunta: ¿Cómo podemos decir si un elemento en particular es realmente una publicación o tarea?Bueno, tenemos que usar "predicados de tipo".Un predicado tipo es prácticamente una función de predicado (es decir, una función booleana) que es responsable de verificar si una cierta variable es de cierto tipo o no:

const ispost = (él: elemento): él es post => sinfinado! == (él como post) .title; const ostask = (él: elemento): él es tarea => indefinido! == (él como tarea) .Task; ISPOST e ISTASK son dos funciones diferentes que reciben un objeto de elemento y nos dicen si un elemento es una publicación o, respectivamente, una tarea. Para hacer esto, ambos aprovechan el hecho de que hay atributos que solo la publicación o la tarea tienen. Entonces, por ejemplo, si tiene un título, sabemos que es una publicación. Con estos tipos de predicados, podemos hacer tales cosas: función Stringify (El: item): String {return isPost (el)? El.Title: El.Task; } Donde usamos el protector de tipo ISPOST para verificar si el elemento es una publicación o no. Si es así, devolvemos su título; Si no, él sabe que debe ser una tarea y, por lo tanto, podemos ver el atributo de su tarea. Puedes jugar con este ejemplo aquí y ver que no hay errores. ¿Ahora qué? Espero que hayas encontrado esta breve introducción al mecanografiado interesante. Ahora que tiene una mejor comprensión de una teoría de tipo básica, sabe todo lo que necesita para escribir un mejor software. La próxima semana veremos cómo los tipos de sindicatos y dispositivos de protección conducirán a mejores proyectos. También aprenderemos la importancia de “imposibles de hacer estados imposibles”. ¡Te veo la proxima semana! Imagen presentada por Kelly Sikkema en Unsplash.