Casi todas   requieren serialización de datos. Esta necesidad surge en situaciones como: las aplicaciones web  Transferir datos a través de la red (por ejemplo, solicitudes HTTP, WebSockets)  Incrustar datos en HTML (para hidratación, por ejemplo)  Almacenar datos en un almacenamiento persistente (como LocalStorage)  Compartir datos entre procesos (como trabajadores web o postMessage)  En muchos casos, la pérdida o corrupción de datos puede tener consecuencias graves, por lo que es esencial proporcionar un mecanismo de serialización conveniente y seguro que ayude a detectar tantos errores como sea posible durante la etapa de desarrollo. Para estos fines, es conveniente utilizar   como formato de transferencia de datos y TypeScript para verificar el código estático durante el desarrollo. JSON  TypeScript sirve como un superconjunto de JavaScript, lo que debería permitir el uso fluido de funciones como   y   , ¿verdad? Resulta que, a pesar de todos sus beneficios, TypeScript no entiende naturalmente qué es JSON y qué tipos de datos son seguros para la serialización y deserialización en JSON. JSON.stringify JSON.parse  Ilustremos esto con un ejemplo.  El problema con JSON en TypeScript  Considere, por ejemplo, una función que guarda algunos datos en LocalStorage. Como LocalStorage no puede almacenar objetos, aquí utilizamos la serialización JSON:   interface PostComment { authorId: string; text: string; updatedAt: Date; } function saveComment(comment: PostComment) { const serializedComment = JSON.stringify(comment); localStorage.setItem('draft', serializedComment); }  También necesitaremos una función para recuperar los datos de LocalStorage.   function restoreComment(): PostComment | undefined { const text = localStorage.getItem('draft'); return text ? JSON.parse(text) : undefined; }  ¿Qué hay de malo en este código? El primer problema es que al restaurar el comentario, obtendremos un tipo   en lugar de   para el campo   . string Date updatedAt  Esto sucede porque JSON solo tiene cuatro tipos de datos primitivos (   ,   ,   ,   ), así como matrices y objetos. No es posible guardar un objeto   en JSON, así como otros objetos que se encuentran en JavaScript: funciones, Map, Set, etc. null string number boolean Date  Cuando   encuentra un valor que no se puede representar en formato JSON, se produce la conversión de tipos. En el caso de un objeto   , obtenemos una cadena porque el objeto   implementa el método   , que devuelve una cadena en lugar de un objeto   . JSON.stringify Date Date toJson() Date   const date = new Date('August 19, 1975 23:15:30 UTC'); const jsonDate = date.toJSON(); console.log(jsonDate); // Expected output: "1975-08-19T23:15:30.000Z" const isEqual = date.toJSON() === JSON.stringify(date); console.log(isEqual); // Expected output: true  El segundo problema es que la función   devuelve el tipo   , en el que el campo de fecha es de tipo   . Pero ya sabemos que en lugar de   , recibiremos un tipo   . TypeScript podría ayudarnos a encontrar este error, pero ¿por qué no? saveComment PostComment Date Date string  Resulta que, en la biblioteca estándar de TypeScript, la función   se escribe como   . Debido al uso de   , la verificación de tipos está esencialmente deshabilitada. En nuestro ejemplo, TypeScript simplemente tomó nuestra palabra de que la función devolvería un   que contiene un objeto   . JSON.parse (text: string) => any any PostComment Date  Este comportamiento de TypeScript es inconveniente e inseguro. Nuestra aplicación puede fallar si intentamos tratar una cadena como un objeto   . Por ejemplo, podría fallar si llamamos   . Date comment.updatedAt.toLocaleDateString()  De hecho, en nuestro pequeño ejemplo, podríamos simplemente reemplazar el objeto   con una marca de tiempo numérica, lo que funciona bien para la serialización JSON. Sin embargo, en aplicaciones reales, los objetos de datos pueden ser extensos, los tipos se pueden definir en múltiples ubicaciones e identificar dicho error durante el desarrollo puede ser una tarea desafiante. Date  ¿Qué pasaría si pudiéramos mejorar la comprensión de JSON por parte de TypeScript?  Lidiando con la serialización  Para empezar, descubramos cómo hacer que TypeScript comprenda qué tipos de datos se pueden serializar de forma segura en JSON. Supongamos que queremos crear una función   , donde TypeScript verificará el formato de los datos de entrada para garantizar que sea JSON serializable. safeJsonStringify   function safeJsonStringify(data: JSONValue) { return JSON.stringify(data); }  En esta función, la parte más importante es el tipo   , que representa todos los valores posibles que se pueden representar en formato JSON. La implementación es bastante sencilla: JSONValue   type JSONPrimitive = string | number | boolean | null | undefined; type JSONValue = JSONPrimitive | JSONValue[] | { [key: string]: JSONValue; };  Primero, definimos el tipo   , que describe todos los tipos de datos JSON primitivos. También incluimos el tipo   basándonos en el hecho de que cuando se serializan, se omitirán las claves con el valor   . Durante la deserialización, estas claves simplemente no aparecerán en el objeto, lo que en la mayoría de los casos es lo mismo. JSONPrimitive undefined undefined  A continuación, describimos el tipo   . Este tipo utiliza la capacidad de TypeScript para describir tipos recursivos, que son tipos que se refieren a sí mismos. Aquí,   puede ser un   , una matriz de   o un objeto donde todos los valores son del tipo   . Como resultado, una variable de este tipo   puede contener matrices y objetos con anidamiento ilimitado. También se comprobará la compatibilidad de los valores dentro de estos con el formato JSON. JSONValue JSONValue JSONPrimitive JSONValue JSONValue JSONValue  Ahora podemos probar nuestra función   usando los siguientes ejemplos: safeJsonStringify   // No errors safeJsonStringify({ updatedAt: Date.now() }); // Yields an error: // Argument of type '{ updatedAt: Date; }' is not assignable to parameter of type 'JSONValue'. // Types of property 'updatedAt' are incompatible. // Type 'Date' is not assignable to type 'JSONValue'. safeJsonStringify({ updatedAt: new Date(); });  Todo parece funcionar correctamente. La función nos permite pasar la fecha como un número pero arroja un error si pasamos el objeto   . Date  Pero consideremos un ejemplo más realista, en el que los datos pasados a la función se almacenan en una variable y tienen un tipo descrito.   interface PostComment { authorId: string; text: string; updatedAt: number; }; const comment: PostComment = {...}; // Yields an error: // Argument of type 'PostComment' is not assignable to parameter of type 'JSONValue'. // Type 'PostComment' is not assignable to type '{ [key: string]: JSONValue; }'. // Index signature for type 'string' is missing in type 'PostComment'. safeJsonStringify(comment);  Ahora las cosas se están poniendo un poco complicadas. TypeScript no nos permitirá asignar una variable de tipo   a un parámetro de función de tipo   , porque "Falta la firma de índice para el tipo 'cadena' en el tipo 'PostComment'". PostComment JSONValue  Entonces, ¿qué es una firma de índice y por qué falta? ¿Recuerda cómo describimos los objetos que se pueden serializar en formato JSON?   type JSONValue = { [key: string]: JSONValue; };  En este caso,   es la firma del índice. Significa "este objeto puede tener cualquier clave en forma de cadena, cuyos valores sean del tipo   ". Entonces resulta que necesitamos agregar una firma de índice al tipo   , ¿verdad? [key: string] JSONValue PostComment   interface PostComment { authorId: string; text: string; updatedAt: number; // Don't do this: [key: string]: JSONValue; };  Hacerlo implicaría que el comentario podría contener campos arbitrarios, lo que normalmente no es el resultado deseado al definir tipos de datos en una aplicación.  La verdadera solución al problema con la firma de índice proviene de   , que permiten iterar recursivamente sobre campos, incluso para tipos que no tienen una firma de índice definida. Combinada con los genéricos, esta característica permite convertir cualquier tipo de datos   en otro tipo   , que sea compatible con el formato JSON. Mapped Types T JSONCompatible<T>   type JSONCompatible<T> = unknown extends T ? never : { [P in keyof T]: T[P] extends JSONValue ? T[P] : T[P] extends NotAssignableToJson ? never : JSONCompatible<T[P]>; }; type NotAssignableToJson = | bigint | symbol | Function;  El tipo   es un tipo asignado que inspecciona si un tipo   determinado se puede serializar de forma segura en JSON. Lo hace iterando sobre cada propiedad en el tipo   y haciendo lo siguiente: JSONCompatible<T> T T  ¿El   el tipo condicional verifica si el tipo de propiedad es compatible con el tipo   , asegurando que se pueda convertir de forma segura a JSON. Cuando este es el caso, el tipo de propiedad permanece sin cambios. T[P] extends JSONValue ? T[P] : ... JSONValue  ¿El   el tipo condicional verifica si el tipo de propiedad no se puede asignar a JSON. En este caso, el tipo de propiedad se convierte a   , filtrando efectivamente la propiedad del tipo final. T[P] extends NotAssignableToJson ? never : ... never  Si no se cumple ninguna de estas condiciones, el tipo se verifica recursivamente hasta que se pueda llegar a una conclusión. De esta manera funciona incluso si el tipo no tiene una firma de índice.  La   check al principio se usa para evitar que el tipo   se convierta en un tipo de objeto vacío   , que es esencialmente equivalente a   tipo. unknown extends T ? never :... unknown {} any  Otro aspecto interesante es el tipo   . Consta de dos primitivas de TypeScript (bigint y símbolo) y el tipo   , que describe cualquier función posible. El tipo   es crucial para filtrar cualquier valor que no se pueda asignar a JSON. Esto se debe a que cualquier objeto complejo en JavaScript se basa en el tipo de objeto y tiene al menos una función en su cadena de prototipo (por ejemplo,   ). El tipo   itera sobre todas esas funciones, por lo que verificar las funciones es suficiente para filtrar todo lo que no sea serializable a JSON. NotAssignableToJson Function Function toString() JSONCompatible  Ahora, usemos este tipo en la función de serialización:   function safeJsonStringify<T>(data: JSONCompatible<T>) { return JSON.stringify(data); }  Ahora, la función usa un parámetro genérico   y acepta el argumento   . Esto significa que toma un argumento   de tipo   , que debería ser un tipo compatible con JSON. Ahora podemos usar la función con tipos de datos sin firma de índice. T JSONCompatible<T> data T  La función ahora usa un parámetro genérico   que se extiende desde el tipo   . Esto significa que acepta un argumento   de tipo   , que debería ser un tipo compatible con JSON. Como resultado, podemos utilizar la función con tipos de datos que carecen de una firma de índice. T JSONCompatible<T> data T   interface PostComment { authorId: string; text: string; updatedAt: number; } function saveComment(comment: PostComment) { const serializedComment = safeJsonStringify(comment); localStorage.setItem('draft', serializedComment); }  Este enfoque se puede utilizar siempre que sea necesaria la serialización JSON, como transferir datos a través de la red, incrustar datos en HTML, almacenar datos en localStorage, transferir datos entre trabajadores, etc. Además, el asistente   se puede utilizar cuando un objeto estrictamente tipado sin Es necesario asignar una firma de índice a una variable de tipo   . toJsonValue JSONValue   function toJsonValue<T>(value: JSONCompatible<T>): JSONValue { return value; } const comment: PostComment = {...}; const data: JSONValue = { comment: toJsonValue(comment) };  En este ejemplo, usar   nos permite evitar el error relacionado con la firma de índice que falta en el tipo   . toJsonValue PostComment  Lidiando con la deserialización  Cuando se trata de deserialización, el desafío es a la vez más simple y más complejo porque implica comprobaciones de análisis estático y comprobaciones en tiempo de ejecución para el formato de los datos recibidos.  Desde la perspectiva del sistema de tipos de TypeScript, el desafío es bastante simple. Consideremos el siguiente ejemplo:   function safeJsonParse(text: string) { return JSON.parse(text) as unknown; } const data = JSON.parse(text); // ^? unknown  En este caso, sustituiremos   tipo de retorno por el tipo   . ¿Por qué elegir   ? Básicamente, una cadena JSON podría contener cualquier cosa, no sólo los datos que esperamos recibir. Por ejemplo, el formato de los datos podría cambiar entre diferentes versiones de la aplicación u otra parte de la aplicación podría escribir datos en la misma clave LocalStorage. Por tanto,   es la opción más segura y precisa. any unknown unknown unknown  Sin embargo, trabajar con el tipo   es menos conveniente que simplemente especificar el tipo de datos deseado. Además de la conversión de tipos, existen varias formas de convertir el tipo   en el tipo de datos requerido. Uno de esos métodos es utilizar la biblioteca   para validar datos en tiempo de ejecución y generar errores detallados si los datos no son válidos. unknown unknown Superstruct   import { create, object, number, string } from 'superstruct'; const PostComment = object({ authorId: string(), text: string(), updatedAt: number(), }); // Note: we no longer need to manually specify the return type function restoreDraft() { const text = localStorage.getItem('draft'); return text ? create(JSON.parse(text), PostComment) : undefined; }  Aquí, la función   actúa como protección de tipo,   el tipo a la interfaz   deseada. En consecuencia, ya no necesitamos especificar manualmente el tipo de devolución. create limitando Comment  Implementar una opción de deserialización segura es sólo la mitad de la historia. Es igualmente crucial no olvidar usarlo al abordar la siguiente tarea del proyecto. Esto se vuelve particularmente desafiante si un equipo grande está trabajando en el proyecto, ya que garantizar que se sigan todos los acuerdos y las mejores prácticas puede resultar difícil.    puede ayudar en esta tarea. Esta herramienta ayuda a identificar todos los casos de uso   . Específicamente, se pueden encontrar todos los usos de   y se puede garantizar que se verifique el formato de los datos recibidos. Puede leer más sobre cómo deshacerse de   tipo en una base de código en el artículo   . Typescript-eslint any JSON.parse any Cómo hacer que TypeScript sea verdaderamente "fuertemente tipificado"  Conclusión  Estas son las funciones y tipos de utilidades finales diseñados para ayudar en la serialización y deserialización JSON seguras. Puedes probarlos en el   preparado. TS Playground   type JSONPrimitive = string | number | boolean | null | undefined; type JSONValue = JSONPrimitive | JSONValue[] | { [key: string]: JSONValue; }; type NotAssignableToJson = | bigint | symbol | Function; type JSONCompatible<T> = unknown extends T ? never : { [P in keyof T]: T[P] extends JSONValue ? T[P] : T[P] extends NotAssignableToJson ? never : JSONCompatible<T[P]>; }; function toJsonValue<T>(value: JSONCompatible<T>): JSONValue { return value; } function safeJsonStringify<T>(data: JSONCompatible<T>) { return JSON.stringify(data); } function safeJsonParse(text: string): unknown { return JSON.parse(text); }  Se pueden utilizar en cualquier situación en la que sea necesaria la serialización JSON.  Llevo varios años utilizando esta estrategia en mis proyectos y ha demostrado su eficacia al detectar rápidamente posibles errores durante el desarrollo de la aplicación.  Espero que este artículo le haya proporcionado algunas ideas nuevas. ¡Gracias por leer!  Enlaces útiles   Hacer que TypeScript sea verdaderamente "fuertemente tipificado"   Mejora de los tipos de biblioteca estándar de TypeScript   La biblioteca superstuct   parque infantil TS

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Dominar la serialización JSON con seguridad de tipos en TypeScript

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

La fuga rápida del sistema Claude Sonnet 3.5: un análisis forense

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps