Erstellen Sie ein leeres Array in TypeScript

1. Erstellen Sie ein neues Projekt
2. TypeScript-Konfigurationsdatei generieren
3. Erstellen Sie einen Klassentyp für das Array
4. Verwenden Sie die explizite Typdeklaration, um ein leeres Array in TypeScript zu erstellen
5. Verwenden Sie Type Assertion, um ein leeres Array in TypeScript zu erstellen
6. Verwenden Sie den Array-Konstruktor, um ein leeres Array in TypeScript zu erstellen
7. Abschluss

Das Array ist eine Datenstruktur, die Elemente unter Verwendung des linearen Ansatzes speichert. Dies liegt daran, dass die Reihenfolge der Elemente sequenziell ist und wir auf die vorherigen und nächsten Elemente des aktuellen Elements zugreifen können.

Arrays werden häufig bei der Entwicklung von Anwendungen im Vergleich zu anderen Datenstrukturen verwendet. Wenn wir beispielsweise eine Sammlung von Datenelementen aus einer Datenbank oder einem Dienst abrufen und sie einer Anwendung anzeigen möchten, verwenden wir normalerweise ein Array, um dies zu erreichen.

Wir deklarieren zuerst ein Array für den aus der Quelle abgerufenen Typ und abonnieren das Array für ein Observable. Das Observable fügt die aus unserer Quelle abgerufenen Elemente zum Array hinzu, und dann werden die Array-Elemente in der Anwendung angezeigt.

Dieses Tutorial zeigt uns, wie man in TypeScript ein leeres Array erstellt, das später mit Daten gefüllt werden kann.

Erstellen Sie ein neues Projekt

Öffnen Sie WebStorm IDEA und wählen Sie Datei > Neu > Projekt. Wählen Sie im sich öffnenden Rahmen den Abschnitt Node.js, der sich auf der linken Seite des Rahmens befindet.

Ändern Sie den Projektnamen im Bereich Location auf der rechten Seite von untitled auf empty-array.

Damit die Abschnitte Node interpreter und Package manager automatisch aus dem System gelesen werden können, muss vor der Erstellung dieses Projekts die Laufzeitumgebung node installiert werden.

TypeScript-Konfigurationsdatei generieren

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

~/WebstormProjects/empty-array$ tsc --init

Ausgang:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true
  }
}

Die einzige Änderung, die wir an der Konfigurationsdatei vorgenommen haben, ist das Hinzufügen der Eigenschaft noEmitOnError: true, die sicherstellt, dass im Falle eines Transpile-Fehlers keine JavaScript-Datei generiert wird.

Erstellen Sie einen Klassentyp für das Array

Erstellen Sie eine Datei namens Phone.js im Ordner empty-array und kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

export class Phone{
    constructor(private id: number,
                private make: string,
                private name: string,
                private price: number) {
    }
}

In diesem Code haben wir eine Klasse namens Phone erstellt, die die Eigenschaften id, make, name und price enthält. Wir werden diese Klasse als Typ unseres Arrays verwenden, können aber jeden Datentyp wie Zeichenfolge oder Zahl verwenden.

Das Schlüsselwort export gibt an, dass diese Datei ein Modul ist und die Klasse Phone in einem anderen Anwendungsmodul verwendet wird, wie im folgenden Abschnitt gezeigt.

Verwenden Sie die explizite Typdeklaration, um ein leeres Array in TypeScript zu erstellen

Erstellen Sie eine Datei namens Main.js unter dem Ordner empty-array und kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

import {Phone} from "./Phone";

function usingExplicitType(): Phone[]{
    return [];
}

function main(){
    if (usingExplicitType().length == 0){
        console.log("The array has no phone instances");
    }
}
main();

In diesem Code haben wir eine Methode namens usingExplicitType() erstellt, die ein Array von Telefonobjekten Phone[] zurückgibt. Da wir ein leeres Array zurückgeben möchten, gibt der Code innerhalb der Methode explizit ein leeres Array zurück, ohne Objekte zu erstellen.

Da wir wissen, dass die Methode ein Array zurückgibt, können wir die Eigenschaft length aufrufen, um seine Länge zu überprüfen. Wenn die Länge des Arrays gleich 0 ist, enthält das Array keine Elemente.

Beachten Sie, dass wir das Schlüsselwort import verwendet haben, um die Klasse Phone in diesem Modul zu verwenden.

Um zu überprüfen, ob der Code wie erwartet funktioniert, verwenden Sie den folgenden Befehl, um die Funktion main() auszuführen, die unsere konkrete Implementierung definiert.

~/WebstormProjects/empty-array$ tsc && node Main.js

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

The array has no phone instances

Verwenden Sie Type Assertion, um ein leeres Array in TypeScript zu erstellen

Kopieren Sie den folgenden Code und fügen Sie ihn nach der Methode usingExplicitType() in die Datei Main.js ein.

function usingTypeAssertion(): Phone[]{
    return [] as Phone[]; // return <Phone[]>[];

}

function main(){
    if (usingTypeAssertion().length == 0){
        console.log("The array has no phone instances");
    }
}
main();

In diesem Code haben wir eine Methode namens usingTypeAssertion() erstellt, die ein leeres Array von Telefonobjekten Phone[] zurückgibt.

Diese Methode verwendet die Typzusicherung, um unser Ziel zu erreichen, ein leeres Array von Telefonobjekten zurückzugeben. Die Typzusicherung wird mit dem Schlüsselwort as angegeben.

Die Methode main() funktioniert genauso wie im vorherigen Beispiel.

Führen Sie diesen Code mit dem im vorherigen Beispiel verwendeten Befehl aus und stellen Sie sicher, dass die Ausgabe wie unten gezeigt ist.

The array has no phone instances

Verwenden Sie den Array-Konstruktor, um ein leeres Array in TypeScript zu erstellen

Kopieren Sie den folgenden Code und fügen Sie ihn nach der Methode usingTypeAssertion() in die Datei Main.js ein.

function usingArrayConstructor(): Phone[]{
    return new Array<Phone>();
}

function main(){
    if (usingArrayConstructor().length == 0){
        console.log("The array has no phone instances");
    }
}
main();

In diesem Code haben wir eine Methode namens usingArrayConstructor() erstellt, die ein Array von Telefonobjekten Phone[] zurückgibt, wie wir es in den vorherigen Beispielen getan haben.

Da das Array in TypeScript ein Objekt ist, rufen wir seinen Konstruktor new Array<Phone>() mit dem Schlüsselwort new auf, ohne ihm Elemente zu übergeben, um ein leeres Array zurückzugeben. Beachten Sie, dass wir, da die Array-Schnittstelle eine ihrer generischen Implementierungen verwendet, um dies zu erreichen, Phone als Argument des generischen Parameters übergeben haben, um sicherzustellen, dass nur leere phone-Objekte zurückgegeben werden.

Führen Sie diesen Code mit dem im vorherigen Beispiel verwendeten Befehl aus und stellen Sie sicher, dass die Ausgabe wie unten gezeigt ist.

The array has no phone instances

Abschluss

In diesem Tutorial haben wir gelernt, wie man ein leeres Array in TypeScript erstellt. Die Ansätze, die wir behandelt haben, umfassen die Verwendung einer expliziten Typdeklaration, Typzusicherung und eines Array-Konstruktors.