TypeScript Academy · Oppitunti

readonly-ominaisuudet

Merkitkää objektin ominaisuudet muuttumattomiksi alustamisen jälkeen.

Oppitunti 1/413 vaihetta

readonly-ominaisuudet on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

readonly-määre

readonly-määre merkitsee ominaisuuden, joka voidaan asettaa kerran mutta jota ei voi sen jälkeen määrittää uudelleen. Se ilmaisee muuttumattomuuden tyyppitasolla ja auttaa estämään tahattomat muutokset.

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 rajapinnoissa

Rajapinnassa readonly dokumentoi, mitkä kentät pysyvät muuttumattomina luomisen jälkeen. Niitä voi lukea vapaasti, mutta kääntäjä estää kaiken uudelleenmäärittämisen.

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

Käännösvirhe uudelleenmäärittämisestä

readonly-ominaisuuden kirjoittaminen aiheuttaa käännösaikaisen virheen. Näin havaitaan kokonainen virheluokka, jossa jaettua tilaa muutetaan odottamatta.

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 luokan ominaisuuksissa

Myös luokat tukevat readonly-määrettä. readonly-kenttä voidaan alustaa määrittelyn yhteydessä tai konstruktorissa, mutta ei missään muualla.

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

Aseta kerran konstruktorissa

Konstruktori on ainoa määrittelyn ulkopuolinen paikka, jossa readonly-kentän saa määrittää. Konstruktion jälkeen arvo pysyy lukittuna olion koko elinkaaren ajan.

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

readonly-parametriominaisuudet

TypeScriptin parametriominaisuuksien avulla voitte määritellä ja alustaa readonly-kentän suoraan konstruktorin allekirjoituksessa, mikä vähentää toistuvaa koodia.

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

readonly on vain käännösaikainen

On tärkeää huomata, että readonly on olemassa vain tyyppijärjestelmässä. Se poistetaan ajonaikana — JavaScriptissä ei ole sille vastinetta. Se estää uudelleenmäärittämisen TypeScript-koodissa, mutta ei käännetyssä tulosteessa tyypittämättömien polkujen kautta tehtäviä muutoksia.

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 ja const

Älkää sekoittako näitä toisiinsa. const estää muuttujan uudelleensidonnan. readonly estää ominaisuuden uudelleenmäärittämisen. const-olio voi silti sisältää muutettavia ominaisuuksia, ellei niitä ole merkitty readonly-määreellä.

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

Luonteeltaan pinnallinen

readonly on pinnallinen: se suojaa itse ominaisuutta, ei sen viittaaman olion tai taulukon sisältöä. readonly-viittaus olioon sallii edelleen kyseisen olion kenttien muuttamisen.

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 turvallisempien rajapintojen avulla

Palautettujen olioiden kenttien merkitseminen readonly-määreellä ilmaisee kutsujille, ettei niitä pidä muuttaa. Tarkoitus koodataan tyyppiin, jolloin väärinkäytöstä tulee käännösvirhe eikä huomaamaton virhe.

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 indeksiallekirjoituksissa

Myös indeksiallekirjoitukset voi merkitä readonly-määreellä. Näin saadaan karttamainen tyyppi, jonka alkioita voi lukea mutta ei määrittää uudelleen indeksin kautta.

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

Pikatarkistus

Testatkaa, kuinka hyvin hallitsette readonly-ominaisuudet.

Vastaa interaktiivisessa oppitunnissa

Kertaus: readonly-ominaisuudet

Opitte, että readonly:

Sallii ominaisuuden asettamisen kerran ja estää sen jälkeen uudelleenmäärittämisen.
Voidaan asettaa määrittelyn yhteydessä tai luokan kentän konstruktorissa.
On vain käännösaikainen ja pinnallinen — se ei jäädytä sisäkkäisiä tietoja syvällisesti.
Eroaa const-määreestä: toinen suojaa ominaisuuksia ja toinen muuttujasidoksia.

Seuraavaksi readonly-taulukot ja -tuplet.

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

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”readonly-ominaisuudet” ilmainen?

Kyllä – oppitunnin ”readonly-ominaisuudet” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”readonly-ominaisuudet”?

Merkitkää objektin ominaisuudet muuttumattomiksi alustamisen jälkeen. Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”readonly-ominaisuudet”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: TypeScript Academy