TypeScript Academy · Lektion

ReadonlyArray og ReadonlyMap

Brug indbyggede readonly-samlingstyper

Lektion 3 af 413 trin

ReadonlyArray og ReadonlyMap er en gratis TypeScript Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i TypeScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Skrivebeskyttede samlingstyper

Ud over arrays leverer TypeScript skrivebeskyttede varianter af sine indbyggede samlinger: ReadonlyArray<T>, ReadonlyMap<K, V> og ReadonlySet<T>. Hver type viser kun de dele af sin API, der ikke ændrer data.

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

Opsummering af ReadonlyArray

ReadonlyArray<T> tillader gennemløb, indeksering og metoder som map og filter, men ikke push, pop eller tildeling via indeks. Det er array-varianten i den skrivebeskyttede familie.

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

ReadonlyMap

ReadonlyMap<K, V> lader dig slå op, gennemløbe og kontrollere nøgler, men fjerner set, delete og clear. Map'ets indhold er fastlåst set fra brugerens perspektiv.

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

Læsning fra en ReadonlyMap

Alle læseoperationer er stadig tilgængelige: get, has, size, keys, values, entries og gennemløb. Kun de metoder, der ændrer data, er fjernet.

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> understøtter medlemskabstjek og gennemløb, men fjerner add, delete og clear. Brug den til faste mængder af tilladte værdier.

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

Gennemløb af en ReadonlySet

Du kan gennemløbe en ReadonlySet og læse dens size, men du kan ikke ændre indholdet. Det gør den ideel til tilladelseslister og mængder af tilladelser.

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

Overfør skrivebeskyttede samlinger til funktioner

Acceptér en skrivebeskyttet samlingstype i funktioner, der kun skal læse. Det tydeliggør hensigten og forhindrer funktionen i at ændre data, som den kaldende kode ejer.

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

Ændrelige samlinger kan tildeles

En almindelig Map eller Set kan tildeles til den tilsvarende skrivebeskyttede type, fordi du indsnævrer mulighederne i stedet for at udvide dem. Funktionen opgiver blot retten til at ændre data.

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

API'er til uforanderlige samlinger

Skrivebeskyttede samlingstyper beskriver en uforanderlig visning. Det underliggende objekt kan stadig ændres andre steder; den skrivebeskyttede type begrænser kun, hvad denne reference kan gøre.

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

Vælg den rigtige skrivebeskyttede type

Vælg den skrivebeskyttede type, der passer til din datastruktur: ReadonlyArray til ordnede lister, ReadonlyMap til opslag med nøgle-værdi-par og ReadonlySet til unikke elementer. Hver type håndhæver uforanderlighed for sin struktur.

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

Sikrere delt tilstand

Hvis du eksponerer interne samlinger som skrivebeskyttede typer, forhindrer du kaldende kode i at ødelægge modulets tilstand. Den kan frit inspicere dataene, men kun din kode kan ændre dem.

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

Hurtigt tjek

Test din forståelse af skrivebeskyttede samlingstyper.

Besvar den i den interaktive lektion

Opsummering: Skrivebeskyttede samlinger

Du har lært familien af skrivebeskyttede samlinger:

ReadonlyArray<T>, ReadonlyMap<K, V> og ReadonlySet<T> viser kun læseoperationer.
Metoder, der ændrer data (set, add, delete, push), er fjernet.
Ændrelige samlinger kan tildeles til deres skrivebeskyttede modstykker.
De er gode parameter- og returtyper til sikrere delt tilstand.

Til sidst ser vi på mønstre for dyb uforanderlighed.

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

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 101
Lektioner: 352

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “ReadonlyArray og ReadonlyMap” gratis?

Ja — hele teksten til “ReadonlyArray og ReadonlyMap” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af TypeScript Academy-kurset, skal du opgradere til CoddyKit PRO. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “ReadonlyArray og ReadonlyMap”?

Brug indbyggede readonly-samlingstyper Du øver dig i TypeScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på TypeScript Academy?

Der kræves ingen tidligere erfaring. TypeScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “ReadonlyArray og ReadonlyMap”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne TypeScript Academy-lektion?

Ja. Alle TypeScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til TypeScript Academy