Insertar un objeto en una matriz con TypeScript

1. Inicializar el proyecto
2. Use el método array.push para insertar un objeto en una matriz con TypeScript
3. Use el método array.concat para insertar un objeto en una matriz con TypeScript
4. Use el operador de extensión para insertar un objeto en una matriz con TypeScript
5. Use el operador de extensión sin mutar el objeto para insertar un objeto en una matriz con TypeScript
6. Conclusión
7. Referencias

Después de leer esta guía, sabrá cómo insertar un objeto en una matriz con TypeScript.

Inicializar el proyecto

Usaremos Vite para comenzar rápidamente un nuevo proyecto usando vanilla-ts. Después de instalar los paquetes necesarios, crearemos dos interfaces de objetos para usar en el resto de la guía.

export interface Comment {
	rating: number;
	comment: string;
	author: string;
	date: string;
}

export interface Dish {
	id: number;
	name: string;
	image: string;
	category: string;
	description: string;
	comments: Comment[];
}

Como puede ver, existe el objeto Plato, que tiene una propiedad de comentarios con una matriz dentro. Esta matriz puede encajar objetos siguiendo la interfaz Comentario.

El objetivo es enviar nuevos comentarios a la propiedad comentarios. Para mostrar esto, usaremos los siguientes objetos como ejemplos.

import {Dish, Comment} from "./interfaces";

export let pastaDish: Dish = {
	id: 124,
	name: "Carbonara Pasta",
	image: "pasta-carbonara.jpg",
	category: "Italian Food",
	description:
		"Italian pasta dish originating in Lazio based on eggs, cheese, extra virgin olive oil, pancetta or guanciale, and bacon with black pepper.",
	comments: [],
};

export let pastaComment: Comment = {
	rating: 5,
	comment: "Very tasty!",
	author: "Juan Diego",
	date: "04/14/2022",
};

Use el método array.push para insertar un objeto en una matriz con TypeScript

Cuando se llama desde una matriz, push agrega uno o más elementos al final de la matriz. No devuelve la nueva matriz, pero edita la original.

Podemos llamar a este método desde la propiedad comentarios para añadir un nuevo elemento.

import {Dish, Comment} from "./interfaces";
import {pastaDish, pastaComment} from "./pastaDish";

const addNewComment = (dish: Dish, newComment: Comment) => {
	dish.comments.push(newComment);
	console.log(dish.comments);
};

addNewComment(pastaDish, pastaComment);

Rendimiento esperado:

[
	{
		rating: 5,
		comment: "Very tasty!",
		author: "Juan Diego",
		date: "04/14/2022",
	},
];

Desglosemos lo que está pasando aquí: creamos una nueva función llamada añadirNuevoComentario que tomará un plato y un nuevoComentario como argumentos.

Luego accedemos a la propiedad comentarios y llamamos a su método push con el nuevoComentario como único argumento. Con esto, ya empujamos un objeto a la matriz.

Ejemplo de código

Use el método array.concat para insertar un objeto en una matriz con TypeScript

Esta solución funciona bien, pero el método array.push muta el objeto plato. En otras palabras, el objeto plato original cambia, lo que se considera una mala práctica.

Una mutación es un efecto secundario: cuantas menos cosas cambien en un programa, menos habrá para realizar un seguimiento, lo que da como resultado un programa más simple. (Federico Knussel)

Podemos refactorizar nuestro código para usar el método array.concat para resolver el problema de la mutación. El array.concat funciona de manera similar al array.push, pero en lugar de cambiar el arreglo original, devuelve uno nuevo.

const addNewComment = (dish: Dish, newComment: Comment) => {
	const editedComments = dish.comments.concat(newComment);
};

Como puede notar, creamos una nueva matriz de comentarios con este método, pero no tenemos un nuevo objeto plato para devolver. Para resolver esto, podemos usar el método global Object.assign, que copia las propiedades de un objeto origen en un objeto destino y devuelve el objeto de destino modificado.

El primer argumento será nuestro objetivo y los otros argumentos nuestras fuentes. En este caso, usaremos un objeto vacío {} como nuestro objetivo y editedComments y dish como nuestras fuentes.

import {Dish, Comment} from "./interfaces";
import {pastaDish, pastaComment} from "./pastaDish";

const addNewComment = (dish: Dish, newComment: Comment) => {
	const editedComments = dish.comments.concat(newComment);
	const editedDish = Object.assign({}, dish, {comments: editedComments});
	console.log(editedDish.comments);

	return editedDish;
};

addNewComment(pastaDish, pastaComment);

Si olvidamos agregar {} como primer argumento, editedComments se copiará en dish, y mutaremos el objeto dish original.

Rendimiento esperado:

[
	{
		rating: 5,
		comment: "Very tasty!",
		author: "Juan Diego",
		date: "04/14/2022",
	},
];

Ejemplo de código

Use el operador de extensión para insertar un objeto en una matriz con TypeScript

Otra forma de agregar un objeto a una matriz es usar el operador de extensión ES6. El operador de expansión se indica con tres puntos ... y se puede usar, entre otras cosas, para expandir las propiedades de un objeto o una matriz.

Podemos usar el operador de propagación para crear una nueva matriz con los nuevos comentarios y luego asignarla a dish.comments.

import {Dish, Comment} from "./interfaces";
import {pastaDish, pastaComment} from "./pastaDish";

const addNewComment = (dish: Dish, newComment: Comment) => {
	const {comments} = dish;

	dish.comments = [...comments, newComment];
	console.log(dish.comments);
};

addNewComment(pastaDish, pastaComment);

Rendimiento esperado:

[
	{
		rating: 5,
		comment: "Very tasty!",
		author: "Juan Diego",
		date: "04/14/2022",
	},
];

En primer lugar, usamos desestructuración de objetos para acceder a la propiedad comentarios desde plato. Luego usamos el operador de expansión para expandir los elementos comentarios en una nueva matriz con el nuevo comentario como su último elemento y lo asignamos a la propiedad original plato.comentarios.

Ejemplo de código

Use el operador de extensión sin mutar el objeto para insertar un objeto en una matriz con TypeScript

Como puede notar, también mutamos el valor original del plato con el enfoque anterior. Sin embargo, podemos solucionar esto fácilmente creando y devolviendo un nuevo objeto plato con la propiedad comentarios editada.

Afortunadamente, podemos lograr esto usando el operador de propagación una vez más para crear una copia del objeto plato.

import {Dish, Comment} from "./interfaces";
import {pastaDish, pastaComment} from "./pastaDish";

const addNewComment = (dish: Dish, newComment: Comment) => {
	const {comments} = dish;

	const editedDish = {...dish, comments: [...comments, newComment]};
	console.log(editedDish.comments);

	return editedDish;
};

addNewComment(pastaDish, pastaComment);

Rendimiento esperado:

[
	{
		rating: 5,
		comment: "Very tasty!",
		author: "Juan Diego",
		date: "04/14/2022",
	},
];

Primero, creamos un nuevo objeto usando llaves vacías {}; luego expandimos las propiedades de plato dentro del nuevo objeto usando el operador de extensión ..., pero agregamos explícitamente una nueva propiedad de comentarios para que podamos asignarle un nuevo valor, que en este caso será un matriz de los comentarios existentes más el nuevoComentario.

{} // New Object
{...dish} // New Dish
{...dish, comments: []} // New Dish With Empty Comments
{...dish, comments: [...comments, newComment]} // New Dish With New Comments

Ejemplo de código

Conclusión

Puede utilizar cualquier enfoque anterior; sin embargo, recomendamos usar los que no mutan ya que se considera una buena práctica. Por otro lado, usar el operador de propagación puede convertirse en un problema ya que salió con ECMAScript 6, por lo que es posible que no funcione en navegadores heredados antiguos.

Por lo tanto, si la accesibilidad del navegador es una gran preocupación, apéguese a array.push y array.concat, o compile su código usando Babel.

Referencias

1. Red de documentación de Mozilla. (N.D) Array.prototype.push() - JavaScript | MDN. Recuperado el 14 de abril de 2022, de https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
2. Knüssel F. (2017). Arrays, Objetos y Mutaciones. Recuperado el 14 de abril de 2022, de https://medium.com/@fknussel/arrays-objects-and-mutations-6b23348b54aa
3. Red de documentación de Mozilla. (N.D) Array.prototype.concat() - JavaScript | MDN. Recuperado el 14 de abril de 2022, de https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
4. Red de documentación de Mozilla. (N.D) Array.prototype.assign() - JavaScript | MDN. Recuperado el 14 de abril de 2022, de https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
5. Red de documentación de Mozilla. (N.D) Sintaxis extendida (…) - JavaScript | MDN. Recuperado el 14 de abril de 2022, de https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax