Initialiser une Map contenant des tableaux dans TypeScript

1. Initialiser une Map contenant un tableau à l’aide de la classe Array dans TypeScript
2. Initialiser une Map contenant un tableau à l’aide de crochets [] en TypeScript

Une Map est une structure de données qui conserve les données sous la forme de paires clé-valeur. Vous pouvez utiliser n’importe quel type de données que vous préférez pour les clés et les valeurs.

Dans ce didacticiel, nous apprendrons à créer une Map qui utilise des nombres comme clés et un tableau de types personnalisés comme valeurs.

Initialiser une Map contenant un tableau à l’aide de la classe Array dans TypeScript

Accédez à Visual Studio Code et créez un dossier nommé map-initialization ou utilisez le nom de votre choix. Créez un fichier nommé array-class-map.ts sous le dossier.

Copiez et collez le code suivant dans le fichier.

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

Dans le code ci-dessus, nous avons défini notre objet personnalisé nommé Post que nous utiliserons dans notre Map en tant que valeurs.

Map étant générique, le premier paramètre des chevrons indique que la clé est de type numéro. Le deuxième paramètre utilise un autre type appelé Array<Post> pour indiquer que la valeur est un tableau de publications.

Le Array est une classe générique utilisée pour créer un tableau d’éléments en spécifiant le type d’éléments entre les chevrons. Dans notre cas, nous avons passé Post comme type d’élément entre crochets.

ForEach() est une méthode fonctionnelle qui parcourt le tableau d’éléments de la Map dans les coulisses et les imprime sur la console.

Pour exécuter l’exemple ci-dessus, allez dans le terminal et cd à l’emplacement de ce dossier. Générez un fichier tsconfig.json à l’aide de la commande suivante.

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

Assurez-vous que le fichier tsconfig.json a la configuration suivante.

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

L’API Map a été introduite dans es5, et nous avons donc ajouté la bibliothèque pour éviter toute erreur de compilation dans notre code.

Utilisez la commande suivante pour transpiler le code TypeScript en un code JavaScript exécutable à l’aide de node.

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

Une fois le code compilé, un fichier nommé array-class-map.js sera généré. Utilisez la commande suivante pour exécuter le fichier JavaScript.

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

Production:

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

Initialiser une Map contenant un tableau à l’aide de crochets [] en TypeScript

Dans cet exemple, nous utiliserons la méthode de base connue par la plupart des développeurs, même ceux qui ont une compréhension de base des tableaux.

Créez un fichier nommé maps.ts dans le même dossier. Copiez et collez le code suivant dans le fichier.

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

Dans le code ci-dessus, nous avons défini une Map qui accepte des clés de type number et un tableau de Post comme valeurs.

La méthode de base pour créer un tableau consiste à définir le type suivi de crochets, comme indiqué par Post[]. La Map a été initialisée sur une ligne à l’aide du mot-clé new, et deux éléments concrets ont été ajoutés à la Map.

Cet exemple fonctionne de la même manière que l’exemple précédent, à l’exception du fait qu’il crée le tableau de publications pour les valeurs Map à l’aide de crochets.

Pour exécuter cet exemple, utilisez la même approche que l’exemple précédent pour obtenir la sortie suivante.

Production:

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