¿Cómo emitir un objeto JSON dentro de la clase TypeScript?

Usamos objetos JSON para almacenar y transportar datos entre un servidor y una aplicación cliente, o localmente en un proyecto de Node. En Typescript, hay dos tipos de objetos.

• Objetos simples: cuando intentamos analizar datos JSON usando el método JSON.parse() , obtenemos un objeto simple y no un objeto de clase.
• Objetos de clase (constructor): un objeto de clase es una instancia de una clase Typescript con propiedades, constructores y métodos propios definidos.

Ejemplo:

• Datos 1: supongamos que tenemos una clase TypeScript definida en el lado del cliente:

  class Todo {     userId: number;     id: number;     title: string;     done: boolean;         getTitle() {         return this.title;     }         isDone() {         return this.done;     } }

• Datos 2: tenemos un objeto JSON almacenado localmente en nuestro proyecto:

  {     "userId": 1,     "id": 1,     "title": "Add Info about the new project",     "done": true }

El objeto JSON anterior puede ser enviado por un servidor a una página web o cualquier otra aplicación del lado del cliente. Si observamos claramente, la estructura del objeto JSON es equivalente a la de la clase Typescript, pero ¡y si queremos acceder a los métodos de la clase Todo para el objeto JSON! Hay dos formas en que podemos realizar esta tarea, utilizando el método de asignación de la clase Object , que esencialmente clona el objeto JSON en el objeto de la clase Todo. Otro, está usando la herramienta de transformación de clases que se usa para transformar objetos Typescript en objetos de clase.

Método 1: Primero, tendremos que importar el objeto JSON en nuestro archivo de TypeScript, lo que se puede hacer usando la palabra clave de importación en TypeScript, que cargará el objeto JSON en una variable de TypeScript. En mi caso, hemos almacenado el archivo JSON en el mismo directorio que el de mi archivo TypeScript. Luego, podemos simplemente usar el Object.assign()método, que devolverá un objeto de clase Todo y podemos acceder a los métodos definidos en la clase Todo.

• Programa 1:

  import jsonObhect from './todo.json';     // Defining our Todo class class Todo {     userId: number;     id: number;     title: string;     done: boolean;         getTitle() {         return this.title;     }         isDone() {             return this.done;     } }     // Object.assign() will clone jsonData into // Todo class object Storing the new class // object in a typescript variable let newTodo = Object.assign(new Todo(), jsonData);     // Logging the output onto the console console.log(newTodo); console.log(newTodo.getTitle());

• Producción:

  Todo {
    userId: 1,
    id: 1,
    title: 'Add Info about new project',
    done: true
  }
  Add Info about new project
  

Método 2: El método uno discutido aquí es fácil y útil para objetos JSON simples, pero las cosas pueden salir mal si tenemos un objeto con una jerarquía compleja o una array de objetos JSON complejos. Podemos usar la herramienta de transformación de clases para este propósito. Se puede instalar fácilmente en su sistema local o proyecto de Node usando el Administrador de paquetes de Node . En su sistema local, use la terminal o la ventana de comandos (dependiendo de su sistema operativo) para ejecutar el siguiente comando.

• Comando: El indicador -g se usa para la instalación global. Usaremos el método plainToClass de la herramienta de transformación de clases para convertir nuestro objeto JSON en un objeto de clase TypeScript.

  npm install -g class-transformer

Este método tomará dos parámetros, el primer parámetro será una instancia de la clase Todo y el segundo parámetro es el objeto JSON importado de nuestro proyecto local. Primero, tendremos que importar el método desde la herramienta de transformación de clases en nuestro archivo TypeScript, para que TypeScript sepa qué método usar. Nuevamente, hemos almacenado mi archivo JSON en el mismo directorio que el de mi archivo TypeScript.

• Programa:

  import jsonObhect from './todo.json'; import { plainToClass } from "class-transformer";     // Defining our Todo class class Todo {     userId: number;     id: number;     title: string;     done: boolean;         getTitle() {         return this.title;     }         isDone() {         return this.done;     } }     // plainToClass method will convert // JSON data to Todo class object // Storing the new class object in // a typescript variable let newTodo = plainToClass(Todo, jsonData);     // Logging the output to the console console.log(newTodo); console.log(newTodo.isDone());

• Producción:

  Todo {
    userId: 1,
    id: 1,
    title: 'Add Info about new project',
    done: true
  }
  true
  

Nota: Otra herramienta útil que podemos usar para convertir datos JSON a interfaces TypeScript es json2ts . Si probamos esta herramienta para el objeto JSON anterior, obtendremos la siguiente interfaz de TypeScript.

declare module namespace {

    export interface RootObject {
        userId: number;
        id: number;
        title: string;
        done: boolean;
    }

}

Luego, usa la interfaz generada para definir la sintaxis que desea que siga su clase de TypeScript.