Introducción
¿Ya tomaste el Curso de Fundamentos de TypeScript?
Configuración del proyecto con ts-node
New Types
Enums
Tuples
Unknown type
Never type
Funciones
Parámetros opcionales y nullish-coalescing
Parámetros por defecto
Parámetros rest
Sobrecarga de funciones: el problema
Sobrecarga de funciones: la solución
Interfaces
Interfaces
Estructuras complejas
Extender interfaces
Propiedades de solo lectura
Proyecto
Ejemplo de CRUD
Omit y Pick Type
Partial y Required Type
Readonly Type
Acceder al tipado por indice
ReadonlyArray
Próximos pasos
Toma el Curso de Programación Orientada a Objetos con TypeScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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
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. 😄
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.
const variabeName: ReadonlyArray<dataType> = [value];
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.
Increbleeee que buena claseeee, hubiese sabido antes de estoo
const findProducts = (dto: FindProductDto): Product[] => {
// readonly tags: ......
dto.tags = [];
// tags: ReadonlyArray<string>
dto.tags?.pop();
dto.tags?.push();
return products;
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?