TypeScript Academy · Lekcja

Tablice i krotki readonly

Blokuj mutujące metody tablic i krotek

Lekcja 2 z 413 kroki

Tablice i krotki readonly to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 2 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.

Tablice tylko do odczytu

Tablica tylko do odczytu to tablica, z której można odczytywać dane, ale nie można jej modyfikować. Można ją zapisać jako readonly number[] lub równoważnie jako ReadonlyArray<number>. Typ elementów pozostaje taki sam; blokowane są tylko modyfikacje.

const nums: readonly number[] = [1, 2, 3];
console.log(nums[0], nums.length);
// nums[0] = 9; // Error: index signature is readonly

Typ ReadonlyArray

ReadonlyArray<T> to postać generyczna o takim samym znaczeniu jak readonly T[]. Należy użyć tej formy, która jest czytelniejsza; są one wzajemnie zamienne.

const names: ReadonlyArray<string> = ['Ada', 'Sam'];
console.log(names.join(', '));

Brak metod mutujących

Tablice tylko do odczytu nie udostępniają metod mutujących. Metody push, pop, splice, sort i reverse są niedostępne — typ dosłownie ich nie zawiera.

const items: readonly string[] = ['a', 'b'];
// items.push('c'); // Error: push does not exist
// items.splice(0, 1); // Error
console.log(items.length);

Metody niemutujące nadal działają

Metody, które zwracają nową wartość zamiast modyfikować tablicę — map, filter, concat i slice — nadal są dostępne. Tworzą nowe tablice, pozostawiając oryginał bez zmian.

const nums: readonly number[] = [1, 2, 3];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // new array, nums unchanged

Tablice tylko do odczytu jako parametry

Przyjmowanie w funkcji typu readonly T[] sygnalizuje, że funkcja nie zmodyfikuje tablicy kodu wywołującego. Dokumentuje to zamiar i pozwala kompilatorowi wyegzekwować tę obietnicę.

function sum(values: readonly number[]): number {
  return values.reduce((a, b) => a + b, 0);
}
console.log(sum([10, 20, 30]));

Tablice modyfikowalne można przypisać do typu tylko do odczytu

Zwykłą tablicę number[] można przypisać do parametru typu readonly number[] — oznacza to jedynie obietnicę, że tablica nie będzie modyfikowana. Odwrotne przypisanie nie jest dozwolone.

function total(v: readonly number[]): number {
  return v.reduce((a, b) => a + b, 0);
}
const mutable: number[] = [1, 2, 3];
console.log(total(mutable)); // ok

Krotki tylko do odczytu

Krotki również mogą być tylko do odczytu: readonly [string, number]. Typy i kolejność elementów są stałe, a poszczególnych pozycji nie można ponownie przypisywać.

const pair: readonly [string, number] = ['age', 30];
console.log(pair[0], pair[1]);
// pair[1] = 31; // Error: readonly tuple

Krotki tylko do odczytu blokują modyfikacje

Podobnie jak tablice tylko do odczytu, krotki tylko do odczytu usuwają metody mutujące i odrzucają przypisania za pomocą indeksu. Doskonale nadają się do rekordów o stałym kształcie, takich jak pary współrzędnych.

const point: readonly [number, number] = [3, 4];
// point.push(5); // Error
// point[0] = 0; // Error
console.log(point[0] + point[1]);

Asercja const a typ readonly

Istnieją dwa sposoby uzyskania tablic tylko do odczytu i nieznacznie się one różnią. Adnotacja readonly number[] zachowuje ogólny typ elementów. as const idzie dalej: tworzy krotkę tylko do odczytu z typami literałowymi.

const a: readonly number[] = [1, 2, 3]; // elements: number
const b = [1, 2, 3] as const;            // readonly [1, 2, 3]
console.log(a[0], b[0]);

Wybór między nimi

Adnotacji readonly T[] należy użyć, gdy potrzebna jest niezmienność, ale typy elementów mają pozostać ogólne. as const należy użyć wtedy, gdy potrzebne są również dokładne wartości literałowe, na przykład do wyprowadzenia unii.

const DAYS = ['Mon', 'Tue', 'Wed'] as const;
type Day = typeof DAYS[number]; // 'Mon' | 'Tue' | 'Wed'
const d: Day = 'Tue';
console.log(d);

Niezmienność współdzielonych danych

Tablice i krotki tylko do odczytu chronią współdzielone stałe i listy konfiguracji przed przypadkowymi modyfikacjami, dzięki czemu błędy wynikające z nieoczekiwanych zmian stają się niemożliwe do popełnienia już na etapie kompilacji.

const ALLOWED_PORTS: readonly number[] = [80, 443, 8080];
function isAllowed(p: number): boolean {
  return ALLOWED_PORTS.includes(p);
}
console.log(isAllowed(443), isAllowed(22));

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat tablic i krotek tylko do odczytu.

Odpowiedz w interaktywnej lekcji

Powtórzenie: tablice i krotki tylko do odczytu

Dowiedzieli się Państwo, że:

readonly T[] / ReadonlyArray<T> blokuje modyfikacje, ale pozwala odczytywać dane i używać metod niemutujących.
Metody mutujące, takie jak push/splice, są usuwane z typu.
Krotki tylko do odczytu ustalają zarówno długość, jak i typy elementów.
as const idzie dalej, tworząc krotki tylko do odczytu z typami literałowymi.

Następnie omówimy typy kolekcji tylko do odczytu.

const config: readonly string[] = ['a', 'b'];
const upper = config.map((s) => s.toUpperCase());
console.log(upper);

Bezpłatny start

Ucz się TypeScript dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 101
Lekcje: 352

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Tablice i krotki readonly” jest bezpłatna?

Tak — pełny tekst „Tablice i krotki readonly” 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 „Tablice i krotki readonly”?

Blokuj mutujące metody tablic i krotek Ć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 2 z 4.

Ile czasu zajmuje lekcja „Tablice i krotki readonly”?

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