TypeScript Academy · Lekcja

Właściwości readonly

Oznaczaj właściwości obiektów jako niezmienne po inicjalizacji

Właściwości readonly to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 1 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.

Modyfikator readonly

Modyfikator readonly oznacza właściwość, którą można ustawić raz, ale której później nie można ponownie przypisać. Wyraża niezmienność na poziomie typów i pomaga zapobiegać przypadkowym zmianom.

interface Point {
  readonly x: number;
  readonly y: number;
}
const p: Point = { x: 1, y: 2 };
console.log(p.x, p.y);
// p.x = 5; // Error: cannot assign to readonly property

readonly w interfejsach

W interfejsie readonly dokumentuje, które pola pozostają stałe po utworzeniu obiektu. Kod korzystający z interfejsu może je swobodnie odczytywać, ale kompilator blokuje każdą próbę ponownego przypisania.

interface Config {
  readonly env: string;
  retries: number; // mutable
}
const c: Config = { env: 'prod', retries: 3 };
c.retries = 5; // allowed
console.log(c.env, c.retries);

Błąd kompilacji przy ponownym przypisaniu

Próba zapisania do właściwości readonly powoduje błąd kompilacji. Pozwala to wykryć całą kategorię błędów, w których współdzielony stan jest nieoczekiwanie modyfikowany.

interface User {
  readonly id: number;
  name: string;
}
const u: User = { id: 1, name: 'Ada' };
u.name = 'Grace'; // ok
// u.id = 2; // Error
console.log(u);

readonly we właściwościach klas

Klasy również obsługują readonly. Pole tylko do odczytu można zainicjalizować w deklaracji lub wewnątrz konstruktora, ale nigdzie indziej.

class Circle {
  readonly radius: number;
  constructor(r: number) {
    this.radius = r; // allowed in constructor
  }
}
const c = new Circle(5);
console.log(c.radius);

Ustawianie raz w konstruktorze

Konstruktor jest jedynym miejscem poza deklaracją, w którym można przypisać wartość polu readonly. Po utworzeniu obiektu wartość pozostaje zablokowana przez cały czas jego istnienia.

class Account {
  readonly owner: string;
  constructor(owner: string) {
    this.owner = owner;
  }
  rename() {
    // this.owner = 'x'; // Error: readonly outside constructor
  }
}
console.log(new Account('Sam').owner);

Właściwości parametrów readonly

Właściwości parametrów TypeScript pozwalają zadeklarować i zainicjalizować pole readonly bezpośrednio w sygnaturze konstruktora, ograniczając ilość kodu pomocniczego.

class Vector {
  constructor(
    readonly x: number,
    readonly y: number
  ) {}
}
const v = new Vector(3, 4);
console.log(v.x, v.y);

readonly działa tylko w czasie kompilacji

Co najważniejsze, readonly istnieje wyłącznie w systemie typów. W czasie działania jest usuwane — JavaScript nie ma pojęcia tego modyfikatora. Zapobiega on ponownemu przypisaniu w kodzie TypeScript, ale nie w skompilowanym kodzie osiągniętym przez ścieżki omijające typowanie.

interface Box { readonly value: number; }
const b: Box = { value: 10 };
// At runtime b is a plain object; readonly is not enforced by JS.
console.log(b.value);

readonly a const

Nie należy ich mylić. const uniemożliwia ponowne przypisanie zmiennej. readonly uniemożliwia ponowne przypisanie właściwości. Obiekt zadeklarowany za pomocą const nadal może mieć modyfikowalne właściwości, chyba że są one oznaczone jako readonly.

const obj = { count: 0 }; // const binding
obj.count = 5; // allowed: property is mutable
console.log(obj.count);

Z natury płytkie

readonly działa płytko: chroni samą właściwość, ale nie zawartość wskazywanego przez nią obiektu lub tablicy. Referencja readonly do obiektu nadal pozwala modyfikować pola tego obiektu.

interface Holder { readonly data: { n: number }; }
const h: Holder = { data: { n: 1 } };
// h.data = {...}; // Error
h.data.n = 99; // allowed: inner field is not readonly
console.log(h.data.n);

readonly na rzecz bezpieczniejszych interfejsów API

Oznaczenie pól zwracanych obiektów jako readonly sygnalizuje, że kod wywołujący nie powinien ich modyfikować. Zamiar zostaje zapisany w typie, dzięki czemu niewłaściwe użycie powoduje błąd kompilacji zamiast cichego błędu.

interface Snapshot { readonly takenAt: number; readonly size: number; }
function snapshot(): Snapshot {
  return { takenAt: Date.now(), size: 1024 };
}
const s = snapshot();
console.log(s.size);

readonly w sygnaturach indeksów

Można również oznaczyć sygnatury indeksów jako readonly, uzyskując typ podobny do mapy, którego wpisy można odczytywać, ale nie można ich ponownie przypisywać za pomocą indeksu.

interface Scores {
  readonly [name: string]: number;
}
const scores: Scores = { ada: 95, sam: 88 };
console.log(scores.ada);
// scores.ada = 100; // Error

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat właściwości readonly.

Powtórzenie: właściwości readonly

Dowiedzieli się Państwo, że readonly:

Pozwala ustawić właściwość raz, a następnie blokuje jej ponowne przypisanie.
W przypadku pól klas można je ustawić w deklaracji lub w konstruktorze.
Działa tylko w czasie kompilacji i płytko — nie zamraża głęboko zagnieżdżonych danych.
Różni się od const: jedno chroni właściwości, a drugie wiązania zmiennych.

Następnie omówimy tablice i krotki tylko do odczytu.

interface Meta { readonly id: number; }
const m: Meta = { id: 42 };
console.log(m.id);

Często zadawane pytania

Czy lekcja „Właściwości readonly” jest bezpłatna?

Tak — pełny tekst „Właściwości 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 „Właściwości readonly”?

Oznaczaj właściwości obiektów jako niezmienne po inicjalizacji Ć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 1 z 4.

Ile czasu zajmuje lekcja „Właściwości 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