Definieren Sie ein Array in der TypeScript-Schnittstelle

1. Erstellen Sie ein neues Projekt
2. TypeScript-Konfigurationsdatei generieren
3. Erstellen Sie die JSON-Datei für unsere Daten
4. Definieren Sie eine Buch-Klasse
5. Definieren Sie eine Schnittstelle für ein Array von Büchern
6. Verwenden Sie die JSON-Daten mithilfe eines Arrays
7. Abschluss

Das Erstellen einer Objektdarstellung von JSON-Daten ist ein gängiger Entwicklungsansatz für Entwickler, die NoSQL-Datenbanken verwenden. Der Grund dafür ist, dass NoSQL-Datenbanken JSON zum Speichern von Daten verwenden.

Diese Daten können in der Programmiersprache je nach Status der Daten mit verschiedenen Arten von Datentypen wie Zeichenfolgen, Zahlen und benutzerdefinierten Objekten dargestellt werden.

In diesem Tutorial lernen wir, wie man ein Array in einer Schnittstelle erstellt und dieses Array mit Daten füllt, die in einer JSON-Datei gespeichert sind. Die JSON-Datei enthält ein Array von Daten, und diese Daten werden benutzerdefinierten TypeScript-Objekten in unserer Anwendung zugeordnet.

Erstellen Sie ein neues Projekt

Öffnen Sie WebStorm IDEA und wählen Sie Datei > Neu > Projekt. Wählen Sie im sich öffnenden Fenster links Node.js und ändern Sie den Projektnamen von untitled in array-of-strings oder geben Sie einen beliebigen Namen ein.

Die Laufzeitumgebung node sollte vor der Projekterstellung installiert werden, damit die Abschnitte Node interpreter und Package manager automatisch für Sie ausgefüllt werden können. Drücken Sie abschließend die Schaltfläche Erstellen, um das Projekt zu generieren.

TypeScript-Konfigurationsdatei generieren

Nachdem das Projekt generiert wurde, öffnen Sie mit der Tastenkombination ALT+F12 ein neues Terminalfenster und generieren mit folgendem Befehl die Datei tsconfig.json.

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

Öffnen Sie tsconfig.json und fügen Sie die Eigenschaften noEmitOnError: true und resolveJsonModule: true hinzu. Die erste Eigenschaft verhindert, dass die JavaScript-Dateien generiert werden, wenn ein Transpile-Fehler auftritt, und die zweite Eigenschaft ermöglicht es uns, die JSON-Datei mit unseren Daten zu lesen.

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

Erstellen Sie die JSON-Datei für unsere Daten

Erstellen Sie eine Datei namens books.json unter dem Ordner array-of-strings und kopieren Sie die folgenden JSON-Daten und fügen Sie sie in die Datei ein.

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

Die JSON-Daten enthalten ein Array von Objekten, und jedes Objekt hat die Eigenschaften name und Autor. Einfach ausgedrückt stellt jedes Objekt in den JSON-Daten eine Book-Instanz dar, die im nächsten Abschnitt definiert wird.

Definieren Sie eine Buch-Klasse

Erstellen Sie eine Datei namens Book.ts im Ordner array-of-strings und kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

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

In diesem Code haben wir eine Klasse Buch mit den Eigenschaften name und Autor definiert, die dieselben Eigenschaften in den JSON-Daten sind. Im nächsten Abschnitt werden wir die Klasse Book verwenden, um ein Array von Büchern in einer Schnittstelle zu definieren.

Definieren Sie eine Schnittstelle für ein Array von Büchern

Erstellen Sie eine Datei namens BookService.ts im Ordner array-of-books und kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

export interface BookService{
    books: Book[];
}

In dieser Datei haben wir eine Schnittstelle namens BookService erstellt, die ein Array von Büchern mit dem Namen books definiert. Beachten Sie, dass jede Klasse, die diese Schnittstelle implementiert, das Array books implementieren muss, und der nächste Abschnitt zeigt, wie das gemacht wird.

Verwenden Sie die JSON-Daten mithilfe eines Arrays

Erstellen Sie eine Datei mit dem Namen BookServiceImpl.ts im Ordner array-of-books und kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

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();

In dieser Datei haben wir eine Klasse namens BookServiceImpl erstellt, die den BookService implementiert. Beachten Sie, dass wir das Array books implementieren müssen, eine Anforderung, die im vorherigen Abschnitt erwähnt wurde.

Das Array konsumiert die Daten in der Datei books.json, und wir greifen auf die Daten mit der import-Anweisung mit dem Namen bookSource zu. Die Methode stringify() konvertiert die bookSource in einen JSON-String, und die Methode parse() verwendet den zurückgegebenen JSON-String, um ein Array von Büchern zu erstellen.

Die Methode logBooks() verwendet die Methode forEach(), um das Array von Buchobjekten zu Testzwecken in der Konsole zu protokollieren. Die Methode main() erzeugt eine Instanz der Klasse BookServiceImpl und ruft mit dieser Instanz die Methode logBook() auf.

Führen Sie diesen Code mit dem folgenden Befehl aus.

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

Der Befehl tsc transpiliert die TypeScript-Dateien in JavaScript-Dateien, und der Befehl node führt die Datei BookServiceImpl.js aus. Stellen Sie sicher, dass die Ausgabe wie unten gezeigt ist.

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

Abschluss

In diesem Artikel haben wir gelernt, wie man ein Array in einer TypeScript-Schnittstelle definiert und das Array verwendet, um Daten aus einer JSON-Datei zu nutzen. Beachten Sie, dass wir bei der Entwicklung einer Anwendung, die mit Benutzern interagiert, normalerweise eine Datenbank und keine Datei verwenden.

Wir haben in diesem Lernprogramm ein benutzerdefiniertes Objekt verwendet, aber Sie können auch andere Typen verwenden, einschließlich Zeichenfolgen, Zahlen und andere.