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]); // 鉁匰脥 est谩 permitido, imprime el valor 85
console.log(numbers.length); // 鉁匰脥 est谩 permitido, imprime 5 que es la longitud del array

//numbers[0] = 10; // 鉀擭O permitido porque se intenta modificar un valor en el array
//numbers.push(6); // 鉀擭O 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 8

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 鈥渘ormales鈥 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 鈥榯ags鈥 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.

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;
}