TypeScript Academy · Lektion

Readonly-arrays og uforanderlige data

Brug ReadonlyArray til at forhindre utilsigtede ændringer.

Lektion 2 af 413 trin

Readonly-arrays og uforanderlige data er en gratis TypeScript Academy-lektion på CoddyKit. Dette er lektion 2 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.

Velkommen

Ændrbare arrays kan blive ændret utilsigtet overalt i din kode. TypeScripts ReadonlyArray og readonly-modifikator hjælper dig med at håndhæve uforanderlighed.

readonly-modifikatoren på arrays

Tilføj modifikatoren `readonly` før array-typen for at forhindre ændringer. Arrayet kan læses, men ikke ændres.

const ids: readonly number[] = [1, 2, 3];
// ids.push(4);   // Error
// ids[0] = 99;   // Error
console.log(ids[0]); // OK — reading is fine

Den generiske form ReadonlyArray<T>

`ReadonlyArray` svarer generisk til `readonly T[]`. Begge forhindrer push, pop, splice og tildeling via indeks.

const names: ReadonlyArray<string> = ['Alice', 'Bob'];
// names.push('Charlie'); // Error

Returnering af skrivebeskyttede arrays fra funktioner

Returnér skrivebeskyttede arrays fra funktioner for at signalere til dem, der kalder funktionen, at resultatet ikke bør ændres.

function getConfig(): readonly string[] {
  return ['host', 'port', 'db'];
}

Uforanderlige funktionsparametre

Markér array-parametre som readonly for at forhindre funktionen i at ændre det array, som kalderen har givet den.

function sum(nums: readonly number[]): number {
  return nums.reduce((a, b) => a + b, 0);
  // nums.push(99); // Error inside function
}

as const til litterale arrays

Assert'en `as const` gør et array skrivebeskyttet og udleder en tuple-type med litterale elementtyper i stedet for udvidede typer.

const colors = ['red', 'green', 'blue'] as const;
// type: readonly ['red', 'green', 'blue']
// colors.push('yellow'); // Error

Readonly laver ikke en dyb frysning

readonly forhindrer kun, at selve arrayreferencen ændres. Hvis elementerne er objekter, kan deres egenskaber stadig ændres.

const users: readonly { name: string }[] = [{ name: 'Alice' }];
// users.push({}); // Error
users[0].name = 'Bob'; // Allowed — object itself is mutable

Dyb uforanderlighed med Readonly<T>

For at gøre objekter dybt uforanderlige skal du kombinere ReadonlyArray med Readonly på elementerne. Du kan også bruge et bibliotek som immer.

type ImmutableUser = Readonly<{ name: string; scores: readonly number[] }>;
const u: ImmutableUser = { name: 'Alice', scores: [90, 85] };
// u.name = 'Bob';       // Error
// u.scores.push(100);  // Error

Tildeling mellem ændrbare og skrivebeskyttede arrays

Et skrivebeskyttet array kan IKKE tildeles til en ændrbar array-type. Det beskytter mod utilsigtet at sende et uforanderligt array videre, hvor der forventes ændringer.

const ro: readonly number[] = [1, 2];
const mutable: number[] = ro; // Error!

Hvornår du bør bruge skrivebeskyttede arrays

Brug skrivebeskyttede arrays til konfigurationsobjekter, konstanter, funktionsparametre som du lover ikke at ændre, samt returværdier fra rene funktioner.

Spredning opretter et nyt ændrbart array

Spredning af et skrivebeskyttet array til en ny arrayliteral opretter en ændrbar kopi. Det er et enkelt mønster til at foretage ændringer uden at ændre originalen.

const base: readonly number[] = [1, 2, 3];
const extended: number[] = [...base, 4]; // new mutable array

Hurtigt tjek

Hvilken operation er IKKE tilladt på et `readonly number[]` i TypeScript?

Besvar den i den interaktive lektion

Opsummering

Brug `readonly T[]` eller `ReadonlyArray` for at forhindre ændringer af arrays. Brug `as const` til litterale konstant-arrays. Spredning opretter en ændrbar kopi, når du har brug for at udvide et skrivebeskyttet array.

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 “Readonly-arrays og uforanderlige data” gratis?

Ja — hele teksten til “Readonly-arrays og uforanderlige data” 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 “Readonly-arrays og uforanderlige data”?

Brug ReadonlyArray til at forhindre utilsigtede ændringer. 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 2 af 4.

Hvor lang tid tager lektionen “Readonly-arrays og uforanderlige data”?

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

Typede arrays: T[] og Array
Readonly-arrays og uforanderlige data
Tupler: typede arrays med fast længde
Enumerationer: numeriske konstanter og strengkonstanter

← Tilbage til TypeScript Academy