TypeScript Academy · Lekcja

ReadonlyArray i ReadonlyMap

Używaj wbudowanych typów kolekcji readonly

ReadonlyArray i ReadonlyMap to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Typy kolekcji tylko do odczytu

Oprócz tablic TypeScript udostępnia warianty tylko do odczytu swoich wbudowanych kolekcji: ReadonlyArray<T>, ReadonlyMap<K, V> i ReadonlySet<T>. Każdy z nich udostępnia wyłącznie niezmieniające danych elementy swojego API.

const arr: ReadonlyArray<number> = [1, 2, 3];
console.log(arr.length, arr.includes(2));

Podsumowanie ReadonlyArray

ReadonlyArray<T> pozwala na iterowanie, indeksowanie oraz używanie metod takich jak map i filter, ale nie udostępnia push, pop ani przypisywania do indeksu. To tablicowa odmiana rodziny typów tylko do odczytu.

const tags: ReadonlyArray<string> = ['ts', 'js'];
console.log(tags.map((t) => t.toUpperCase()));
// tags.push('css'); // Error

ReadonlyMap

ReadonlyMap<K, V> pozwala wyszukiwać wartości, iterować i sprawdzać klucze, ale nie udostępnia set, delete ani clear. Z perspektywy użytkownika zawartość mapy jest stała.

const ages: ReadonlyMap<string, number> = new Map([['Ada', 30], ['Sam', 25]]);
console.log(ages.get('Ada'), ages.has('Sam'));
// ages.set('Lee', 40); // Error

Odczyt z ReadonlyMap

Wszystkie operacje odczytu pozostają dostępne: get, has, size, keys, values, entries oraz iterowanie. Usunięte zostają tylko metody modyfikujące.

const m: ReadonlyMap<string, number> = new Map([['a', 1], ['b', 2]]);
for (const [k, v] of m) {
  console.log(k, v);
}
console.log('size:', m.size);

ReadonlySet

ReadonlySet<T> obsługuje sprawdzanie przynależności i iterowanie, ale nie udostępnia add, delete ani clear. Należy go używać do reprezentowania stałych zbiorów dozwolonych wartości.

const allowed: ReadonlySet<string> = new Set(['read', 'write']);
console.log(allowed.has('read'), allowed.has('delete'));
// allowed.add('admin'); // Error

Iterowanie po ReadonlySet

Można iterować po ReadonlySet i odczytywać jego size, ale nie można zmieniać jego zawartości. Dzięki temu doskonale nadaje się do list dozwolonych wartości i zbiorów uprawnień.

const perms: ReadonlySet<string> = new Set(['view', 'edit']);
perms.forEach((p) => console.log('perm:', p));
console.log('count:', perms.size);

Przekazywanie kolekcji tylko do odczytu do funkcji

W funkcjach, które powinny tylko odczytywać dane, należy przyjmować typ kolekcji tylko do odczytu. Komunikuje to intencję i uniemożliwia funkcji modyfikowanie danych należących do wywołującego.

function describe(set: ReadonlySet<string>): string {
  return 'has ' + set.size + ' items';
}
const s = new Set(['x', 'y']);
console.log(describe(s));

Kolekcje zmienne można przypisywać

Zwykły Map lub Set można przypisać do jego odpowiednika tylko do odczytu, ponieważ zawężamy możliwości zamiast je rozszerzać. Funkcja po prostu rezygnuje z prawa do modyfikowania danych.

function keys(m: ReadonlyMap<string, number>): string[] {
  return Array.from(m.keys());
}
const real = new Map([['a', 1]]);
console.log(keys(real));

Niezmienne interfejsy kolekcji

Typy kolekcji tylko do odczytu opisują niezmienny widok. Obiekt bazowy może nadal być modyfikowalny w innym miejscu; typ tylko do odczytu ogranicza wyłącznie działania dostępne za pośrednictwem danego odwołania.

const backing = new Set<number>([1, 2]);
const view: ReadonlySet<number> = backing;
// view.add(3); // Error through the readonly view
backing.add(3); // but the original can still mutate
console.log(view.size);

Wybór właściwego typu tylko do odczytu

Typ tylko do odczytu należy dopasować do struktury danych: ReadonlyArray do uporządkowanych list, ReadonlyMap do wyszukiwania wartości po kluczach, a ReadonlySet do unikatowych elementów. Każdy z nich wymusza niezmienność właściwą dla swojej struktury.

const roles: ReadonlySet<string> = new Set(['admin', 'user']);
const limits: ReadonlyMap<string, number> = new Map([['admin', 100]]);
console.log(roles.has('user'), limits.get('admin'));

Bezpieczniejszy współdzielony stan

Udostępnianie wewnętrznych kolekcji jako typów tylko do odczytu uniemożliwia wywołującym uszkodzenie stanu modułu. Mogą oni swobodnie przeglądać dane, ale tylko Państwa kod może je zmieniać.

class Registry {
  private items = new Set<string>();
  add(name: string): void { this.items.add(name); }
  get all(): ReadonlySet<string> { return this.items; }
}
const r = new Registry();
r.add('a');
console.log(r.all.has('a'));

Szybki test

Proszę sprawdzić swoje rozumienie typów kolekcji tylko do odczytu.

Podsumowanie: kolekcje tylko do odczytu

Poznali Państwo rodzinę kolekcji tylko do odczytu:

ReadonlyArray<T>, ReadonlyMap<K, V> i ReadonlySet<T> udostępniają wyłącznie operacje odczytu.
Metody modyfikujące (set, add, delete, push) są usunięte.
Kolekcje zmienne można przypisywać do ich odpowiedników tylko do odczytu.
Świetnie sprawdzają się jako typy parametrów i wartości zwracanych, zwiększając bezpieczeństwo współdzielonego stanu.

Na koniec omówimy wzorce głębokiej niezmienności.

function count(s: ReadonlySet<number>): number {
  return s.size;
}
console.log(count(new Set([1, 2, 3])));

Często zadawane pytania

Czy lekcja „ReadonlyArray i ReadonlyMap” jest bezpłatna?

Tak — pełny tekst „ReadonlyArray i ReadonlyMap” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „ReadonlyArray i ReadonlyMap”?

Używaj wbudowanych typów kolekcji readonly Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „ReadonlyArray i ReadonlyMap”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do TypeScript Academy