Definir una matriz en la interfaz de TypeScript

1. Crear un nuevo proyecto
2. Generar archivo de configuración de TypeScript
3. Crear el archivo JSON para nuestros datos
4. Definir una clase de Libro
5. Definir una interfaz para una matriz de libros
6. Consumir los datos JSON usando una matriz
7. Conclusión

La creación de una representación de objetos de datos JSON es un enfoque de desarrollo común para los desarrolladores que utilizan bases de datos NoSQL. La razón de esto es que las bases de datos NoSQL usan JSON para almacenar datos.

Estos datos se pueden representar en el lenguaje de programación utilizando diferentes tipos de tipos de datos, como cadenas, números y objetos personalizados, según el estado de los datos.

En este tutorial, aprenderemos a crear una matriz en una interfaz y a llenar esta matriz con datos almacenados en un archivo JSON. El archivo JSON contiene una matriz de datos, y estos datos se asignarán a objetos TypeScript personalizados en nuestra aplicación.

Crear un nuevo proyecto

Abra WebStorm IDEA y seleccione Archivo > Nuevo > Proyecto. Seleccione Node.js a la izquierda de la ventana que se abre y cambie el nombre del proyecto de sin título a matriz de cadenas o ingrese el nombre que prefiera.

El entorno de tiempo de ejecución node debe instalarse antes de crear el proyecto para que las secciones Node interpreter y Package manager se puedan completar automáticamente por usted. Finalmente, presione el botón Crear para generar el proyecto.

Generar archivo de configuración de TypeScript

Una vez generado el proyecto, abra una nueva ventana de terminal usando el atajo de teclado ALT+F12 y use el siguiente comando para generar el archivo tsconfig.json.

~/WebstormProjects/array-of-strings$ tsc --init

Abra tsconfig.json y agregue las propiedades noEmitOnError: true y resolveJsonModule: true. La primera propiedad evita que se generen los archivos JavaScript si hay un error de transpilación, y la segunda propiedad nos permitirá leer el archivo JSON que contiene nuestros datos.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true,
    "resolveJsonModule": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}

Crear el archivo JSON para nuestros datos

Cree un archivo llamado books.json en la carpeta array-of-strings y copie y pegue los siguientes datos JSON en el archivo.

[
  {
    "name": "Introduction to Java",
    "author": "john doe"
  },
  {
    "name": "Advanced databases",
    "author": "peter parker"
  }
]

Los datos JSON contienen una matriz de objetos, y cada objeto tiene la propiedad nombre y autor. En términos simples, cada objeto en los datos JSON representa una instancia de Libro que se definirá en la siguiente sección.

Definir una clase de Libro

Cree un archivo llamado Book.ts en la carpeta array-of-strings y copie y pegue el siguiente código en el archivo.

class Book{
    constructor(private name: string,private author: string) {
        this.name = name
        this.author = author
    }
}

En este código hemos definido una clase Libro con las propiedades nombre y autor, que son las mismas propiedades en los datos JSON. En la siguiente sección, usaremos la clase Libro para definir una matriz de libros en una interfaz.

Definir una interfaz para una matriz de libros

Cree un archivo llamado BookService.ts en la carpeta array-of-books y copie y pegue el siguiente código en el archivo.

export interface BookService{
    books: Book[];
}

En este archivo, hemos creado una interfaz llamada BookService que define una matriz de libros usando el nombre books. Tenga en cuenta que cualquier clase que implemente esta interfaz tendrá que implementar la matriz libros, y la siguiente sección muestra cómo se hace esto.

Consumir los datos JSON usando una matriz

Cree un archivo llamado BookServiceImpl.ts en la carpeta array-of-books y copie y pegue el siguiente código en el archivo.

import bookSource from "./books.json"
import {BookService} from "./BookService";

class BookServiceImpl implements BookService{
    books: Book[] = JSON.parse(JSON.stringify(bookSource));

    logBooks(): void{
        this.books.forEach(book => console.log(book));
    }
}

function main(){
    const bookService = new BookServiceImpl();
    bookService.logBooks();
}
main();

En este archivo, creamos una clase llamada BookServiceImpl que implementa BookService. Tenga en cuenta que debemos implementar la matriz libros, un requisito mencionado en la sección anterior.

La matriz consume los datos en el archivo books.json, y accedemos a los datos usando la instrucción importar con el nombre bookSource. El método stringify() convierte el bookSource en una cadena JSON, y el método parse() utiliza la cadena JSON devuelta para crear una matriz de libros.

El método logBooks() utiliza el método forEach() para registrar la matriz de objetos de libro en la consola con fines de prueba. El método main() genera una instancia de la clase BookServiceImpl e invoca el método logBook() utilizando esta instancia.

Ejecute este código usando el siguiente comando.

~/WebstormProjects/array-of-strings$ tsc && node BookServiceImpl.js

El comando tsc transpila los archivos TypeScript a archivos JavaScript, y el comando node ejecuta el archivo BookServiceImpl.js. Asegúrese de que la salida sea como se muestra a continuación.

{ name: 'Introduction to Java', author: 'john doe' }
{ name: 'Advanced databases', author: 'peter parker' }

Conclusión

En este artículo, aprendimos cómo definir una matriz en una interfaz de TypeScript y usar la matriz para consumir datos de un archivo JSON. Tenga en cuenta que cuando desarrollamos una aplicación que interactúa con los usuarios, generalmente usamos una base de datos, no un archivo.

Hemos usado un objeto personalizado en este tutorial, pero puede usar otros tipos, incluidas cadenas, números y otros.