No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

ReadonlyArray

21/22
Recursos

En TypeScript, ReadonlyArray es un tipo que representa una versión de solo lectura de un array. Esto quiere decir que una vez creado un ReadonlyArray, no puedes cambiar sus elementos o su longitud.

Cómo usar ReadonlyArray en TypeScript

La sintaxis para crear un ReadonlyArray en TypeScript es la siguiente:

let nombreArray: ReadonlyArray<tipo> = [...];

Donde tipo es el tipado de los elementos del array.

Veamos cómo puedes utilizarlo con un ejemplo:

let numbers: ReadonlyArray<number> = [30, 76, 21, 85, 42];

console.log(numbers[3]); // ✅SÍ está permitido, imprime el valor 85
console.log(numbers.length); // ✅SÍ está permitido, imprime 5 que es la longitud del array

//numbers[0] = 10; // ⛔NO permitido porque se intenta modificar un valor en el array
//numbers.push(6); // ⛔NO permitido porque se intenta agregar un nuevo elemento en el array y con ello aumentar su longitud

El variable numbers es un array de números de solo lectura. Puedes leer los elementos del array y puedes consultar su longitud, pero no puedes modificar los elementos ni cambiar la longitud de este. Si intentas hacerlo, TypeScript lanzará un error en tiempo de compilación.

Contribución creada por: Martín Álvarez (Platzi Contributor).

Aportes 11

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

ReadonlyArray

Este tipo de dato es un array, pero la principal diferencia con los arrays “normales” es que no existen ninguno de los métodos de mutación, tales como pop, push, shift, etc.

cont arr: ReadonlyArray<number> = [1,2,3,4,5]

En caso de tratar de usar alguno de estos metodos nos arroja un error

Les comparto mis apuntes. 😄

¿Qué hace ReadonlyArray?

Tenemos muchos métodos de array que nos permiten mutar un array, pero en programación, en general, se evita hacer mutaciones en un array por lo que se prefiere crear nuevos estados para evitar efectos secundarios.

Para evitar estas mutaciones es que utilizamos a ReadonlyArray como un tipo de dato más.

Sintaxis

const variabeName: ReadonlyArray<dataType> = [value];

Array exclusivamente de lectura

Si solo agregamos ReadonlyArray no vamos a poder mutar los array con sus métodos, pero si vamos a poder realizar una reasignación, para evitar esto debemos emplear la propiedad readonly.

readonly MyPropierty: ReadonlyArray<dataType>; 

Esta clase estuvo cool, creo que demoré mucho en aprender Typescript.

Es sencillo y muy poderoso:

// readonly ─> previene la reasignación.
// ReadonlyArray ─> previene los metodos de modificaciones o mutaciones

Hay algo que se pasó por alto, y es que como ‘tags’ fue omitido antes, no se le aplicaron los efectos de Readonly y Partial, por esto es que después lo definimos como readonly pero también falta el - ? - para decirle que es opcional.
Dejo mis apuntes por si a alguien le sirve:

//* Omito 'tags' y todos los parametros actuales serán opcionales y de solo lectura.
//* Sin embargo vuelvo a agregar 'tags' manualmente para decirle que será un array de solo lectura.
export interface FindProductDto extends Readonly<Partial<Omit<Product, 'tags'>>> {
  //* Al haberse omitido 'tags' con anterioridad, no se le aplican los efectos de Readonly y Partial,
  //* por lo que necesito volver a aplicar readonly y - ? -
  //* readonly evita que se pueda reasignar | ReadonlyArray evita que se pueda modificar con métodos
  readonly tags?: ReadonlyArray<string>;
}

Un recordatorio:

ReadonlyArray puede ser asignado tanto a propiedadesy atributos, como a variables

readonly sólo puede ser asignado a propiedades o atributos de una clase, type o interface. Para replicar las características de readonly en una variable, ya tenemos la palabra reservada const.

`ReadonlyArray` en TypeScript es una forma de definir un array que no permite modificar su contenido una vez creado. Esto ayuda a garantizar la inmutabilidad de los datos, evitando cambios accidentales. Ejemplo: ```typescript const numeros: ReadonlyArray<number> = [1, 2, 3]; numeros.push(4); // Error: Property 'push' does not exist on type 'readonly number[]'. ``` En este ejemplo, `numeros` es un array de números que no puede ser alterado mediante métodos que modifiquen su contenido. Esto es útil para asegurar que ciertas estructuras de datos permanezcan constantes a lo largo de su uso, mejorando la seguridad y la previsibilidad del código.
**ReadonlyArray** es un tipo especial de array que no permite modificar su contenido después de su creación. Esto significa que no se pueden usar métodos que alteren el array, como push, pop, shift, unshift, splice, etc. Sin embargo, se pueden usar métodos que no modifiquen el array, como filter, map, reduce, forEach, etc. Estos métodos devuelven un nuevo array o un valor basado en el contenido del array original, sin cambiar el array original. El uso de **ReadonlyArray** es útil cuando se quiere asegurar que un array no sea modificado accidentalmente en alguna parte del código, proporcionando así una mayor seguridad y predictibilidad.
Hola chiquis por si tienen dudas, ejemplo explicado rapido: ``` type onlyValids = "A" | "B"; interface Producto {  id: string;  tags: onlyValids;} export interface EncontrarProducto  extends Readonly\<Partial\<Omit\<Producto, "tags">>> {  readonly tags: ReadonlyArray\<onlyValids>;} const ObjetoA: EncontrarProducto = {  // id: ""  tags: \["A"],}; ``` // Todo esto es para hacer una interface llamada EncontrarProducto que extiende de Producto, que tiene id y tags. tags en este caso, es un arreglo de un type especifico. Aca EncontrarProducto, omite tags de producto (osea no lo usa) A su vez, usa Partial que usa Product, osea todo lo vuelve opcional, Luego le agrega la propiedad Readonly a todo, osea, nada puede ser modifcado y por ultimo EncontrarProducto asigna una nueva propiedad llamada tags igual, la cual sera solo de lectura y compartira un array de solo lectura tambien que extiende de el tipo onlyValids Sigue aprendiendo! que ya se acaba el curso! 💚💚💚

Increbleeee que buena claseeee, hubiese sabido antes de estoo

Only reads on typescript be like:

const findProducts = (dto: FindProductDto): Product[] => {
 // readonly tags: ...... 
  dto.tags = []; 

// tags: ReadonlyArray<string> 
  dto.tags?.pop(); 
  dto.tags?.push(); 

  return products;
}