Saltar al contenido

¿Cómo convierto un objeto JSON en una clase de TypeScript?

Después de tanto trabajar hemos dado con la respuesta de este enigma que algunos los usuarios de nuestro sitio web han tenido. Si quieres aportar algún detalle no dejes de aportar tu comentario.

Solución:

No puede simplemente convertir un resultado de JavaScript simple y antiguo de una solicitud de Ajax en una instancia de clase prototipo de JavaScript/TypeScript. Hay una serie de técnicas para hacerlo y, por lo general, implican la copia de datos. A menos que cree una instancia de la clase, no tendrá ningún método o propiedad. Seguirá siendo un simple objeto de JavaScript.

Mientras que si solo estuviera tratando con datos, podría simplemente hacer una conversión a una interfaz (ya que es puramente una estructura de tiempo de compilación), esto requeriría que use una clase de TypeScript que use la instancia de datos y realice operaciones con esos datos.

Algunos ejemplos de copia de datos:

  1. Copiando el objeto AJAX JSON en el objeto existente
  2. Parse JSON String en un prototipo de objeto particular en JavaScript

En esencia, simplemente:

var d = new MyRichObject();
d.copyInto(jsonResult);

Tuve el mismo problema y encontré una biblioteca que hace el trabajo: https://github.com/pleerock/class-transformer.

Funciona así :

let jsonObject = response.json() as Object;
let fooInstance = plainToClass(Models.Foo, jsonObject);
return fooInstance;

Admite niños anidados, pero debe decorar el miembro de su clase.

En TypeScript puede hacer una aserción de tipo usando una interfaz y genéricos como este:

var json = Utilities.JSONLoader.loadFromFile("../docs/location_map.json");
var locations: Array = JSON.parse(json).location;

Donde ILocationMap describe la forma de sus datos. La ventaja de este método es que su JSON podría contener más propiedades pero la forma satisface las condiciones de la interfaz.

Sin embargo, esto NO agrega métodos de instancia de clase.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *