Initialisieren eine Map mit Arrays in TypeScript

1. Initialisieren Sie eine Map, die ein Array enthält, indem Sie die Klasse Array in TypeScript verwenden
2. Initialisieren Sie eine Map, die ein Array enthält, mit eckigen Klammern [] in TypeScript

Eine Map ist eine Datenstruktur, die Daten in Form von Schlüssel-Wert-Paaren enthält. Sie können sowohl für die Schlüssel als auch für die Werte einen beliebigen Datentyp verwenden.

In diesem Lernprogramm erfahren Sie, wie Sie eine Map erstellen, die Zahlen als Schlüssel und ein Array benutzerdefinierter Typen als Werte verwendet.

Initialisieren Sie eine Map, die ein Array enthält, indem Sie die Klasse Array in TypeScript verwenden

Gehen Sie zu Visual Studio Code und erstellen Sie einen Ordner mit dem Namen map-initialization oder verwenden Sie einen beliebigen Namen. Erstellen Sie unter dem Ordner eine Datei mit dem Namen array-class-map.ts.

Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

type Post = {
    postID: number
    postTitle: string
    message: string
}

let mapOfPosts: Map<number, Array<Post>> =
new Map([
    [1,[{postID:1,
        postTitle: 'Job promotion',
        message: 'Just promoted got promoted in my job'
    }]],
    [2,[{postID:2,
         postTitle:'Birthday',
         message:'Just turned an year older'
    }]]
])

mapOfPosts.forEach((post) => console.log(post))

Im obigen Code haben wir unser benutzerdefiniertes Objekt namens Post definiert, das wir in unserer Map als Werte verwenden werden.

Da Map generisch ist, gibt der erste Parameter der spitzen Klammern an, dass der Schlüssel vom Typ number ist. Der zweite Parameter verwendet einen anderen Typ namens Array<Post>, um anzugeben, dass der Wert ein Array von Beiträgen ist.

Das Array ist eine generische Klasse, die verwendet wird, um ein Array von Elementen zu erstellen, indem der Typ der Elemente in den spitzen Klammern angegeben wird. In unserem Fall haben wir in den spitzen Klammern als Elementtyp Post übergeben.

ForEach() ist eine funktionale Methode, die hinter den Kulissen durch das Array von Elementen in der Map iteriert und sie auf der Konsole ausgibt.

Um das obige Beispiel auszuführen, gehen Sie zum Terminal und cd zum Speicherort dieses Ordners. Generieren Sie mit dem folgenden Befehl eine tsconfig.json-Datei.

david@david-HP-ProBook-6470b:~/Documents/map-initialization$ tsc --init

Stellen Sie sicher, dass die Datei tsconfig.json die folgende Konfiguration hat.

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

Die Map-API wurde in es5 eingeführt, und daher haben wir die Bibliothek hinzugefügt, um Kompilierungsfehler in unserem Code zu vermeiden.

Verwenden Sie den folgenden Befehl, um den TypeScript-Code in einen JavaScript-Code zu transpilieren, der mit node ausgeführt werden kann.

david@david-HP-ProBook-6470b:~/Documents/map-initialization$ tsc

Sobald der Code kompiliert ist, wird eine Datei mit dem Namen array-class-map.js generiert. Verwenden Sie den folgenden Befehl, um die JavaScript-Datei auszuführen.

david@david-HP-ProBook-6470b:~/Documents/map-initialization$ node array-class-map.js

Ausgabe:

[
  {
    postID: 1,
    postTitle: 'Job promotion',
    message: 'Just promoted got promoted in my job'
  }
]
[
  {
    postID: 2,
    postTitle: 'Birthday',
    message: 'Just turned an year older'
  }
]

Initialisieren Sie eine Map, die ein Array enthält, mit eckigen Klammern [] in TypeScript

In diesem Beispiel verwenden wir die grundlegende Methode, die den meisten Entwicklern bekannt ist, selbst denen mit einem grundlegenden Verständnis von Arrays.

Erstellen Sie im selben Ordner eine Datei namens maps.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

type Post = {
    postID: number
    postTitle: string
    message: string
}

let mapOfPosts: Map<number, Post[]> =
new Map([
    [1,[{postID:1,
        postTitle: 'Job promotion',
        message: 'Just promoted got promoted in my job'
    }]],
    [2,[{postID:2,
         postTitle:'Birthday',
         message:'Just turned an year older'
    }]]

])

mapOfPosts.forEach((post) => console.log(post))

Im obigen Code haben wir eine Map definiert, die Schlüssel vom Typ number und ein Array von Post als Werte akzeptiert.

Die grundlegende Methode zum Erstellen eines Arrays besteht darin, den Typ gefolgt von eckigen Klammern zu definieren, wie durch Post[] angegeben. Die Map wurde auf einer Zeile mit dem Schlüsselwort new initialisiert und zwei konkrete Elemente wurden der Map hinzugefügt.

Dieses Beispiel funktioniert genauso wie das vorherige Beispiel, abgesehen davon, dass es das Array von Posts für die Map-Werte mit eckigen Klammern erstellt.

Um dieses Beispiel auszuführen, verwenden Sie denselben Ansatz wie im vorherigen Beispiel, um die folgende Ausgabe zu erhalten.

Ausgabe:

[
  {
    postID: 1,
    postTitle: 'Job promotion',
    message: 'Just promoted got promoted in my job'
  }
]
[
  {
    postID: 2,
    postTitle: 'Birthday',
    message: 'Just turned an year older'
  }
]