Inicializar un map que contiene arrays en TypeScript

1. Inicialice un map que contenga un array usando la clase Array en TypeScript
2. Inicialice un map que contenga un array usando corchetes [] en TypeScript

Un map es una estructura de datos que mantiene los datos en forma de pares clave-valor. Puede utilizar cualquier tipo de datos que prefiera tanto para las claves como para los valores.

En este tutorial, aprenderemos a crear un map que use números como claves y un array de tipos personalizados como valores.

Inicialice un map que contenga un array usando la clase Array en TypeScript

Vaya a Visual Studio Code y cree una carpeta llamada map-initialization o use el nombre que prefiera. Cree un archivo llamado array-class-map.ts debajo de la carpeta.

Copie y pegue el siguiente código en el archivo.

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

En el código anterior, hemos definido nuestro objeto personalizado llamado Publicar que usaremos en nuestro Map como valores.

Como Map es genérico, el primer parámetro de los corchetes indica que la clave es de tipo número. El segundo parámetro usa otro tipo llamado Array<Post> para indicar que el valor es un array de publicaciones.

El Array es una clase genérica utilizada para crear un array de elementos especificando el tipo de elementos en los corchetes angulares. En nuestro caso, hemos pasado Post como tipo de elemento entre paréntesis angulares.

ForEach() es un método funcional que itera a través del array de elementos en el Map detrás de escena y los imprime en la consola.

Para ejecutar el ejemplo anterior, ve a la terminal y cd a la ubicación de esta carpeta. Genere un archivo tsconfig.json usando el siguiente comando.

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

Asegúrese de que el archivo tsconfig.json tenga la siguiente configuración.

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

La Map API se introdujo en es5, por lo que agregamos la biblioteca para evitar errores de compilación en nuestro código.

Use el siguiente comando para transpilar el código TypeScript a un código JavaScript que se puede ejecutar usando node.

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

Una vez compilado el código, se generará un archivo llamado array-class-map.js. Utilice el siguiente comando para ejecutar el archivo JavaScript.

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

Producción :

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

Inicialice un map que contenga un array usando corchetes [] en TypeScript

En este ejemplo, utilizaremos el método básico conocido por la mayoría de los desarrolladores, incluso aquellos con un conocimiento básico de los arrays.

Cree un archivo llamado maps.ts en la misma carpeta. Copie y pegue el siguiente código en el archivo.

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

En el código anterior, hemos definido un Map que acepta claves de tipo number y un array de Post como valores.

La forma básica de crear un array es definiendo el tipo seguido de corchetes como lo indica Post[]. El Map se ha inicializado en una línea con la palabra clave new y se han añadido dos elementos concretos al Map.

Este ejemplo funciona de la misma manera que el ejemplo anterior, aparte del hecho de que crea el array de publicaciones para los valores del Map usando corchetes.

Para ejecutar este ejemplo, use el mismo enfoque que el ejemplo anterior para obtener el siguiente resultado.

Producción :

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