TypeScript Academy · Lektion

Readonly-arrayer och oföränderlig data

Använd ReadonlyArray för att förhindra oavsiktliga ändringar.

Lektion 2 av 413 steg

Readonly-arrayer och oföränderlig data är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Välkommen

Muterbara arrayer kan råka ändras var som helst i koden. TypeScripts ReadonlyArray och readonly-modifierare hjälper er att upprätthålla oföränderlighet.

Readonly-modifieraren på arrayer

Lägg till modifieraren `readonly` före arraytypen för att förhindra ändringar. Arrayen kan läsas men inte ändras.

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

Den generiska formen ReadonlyArray<T>

`ReadonlyArray` är den generiska motsvarigheten till `readonly T[]`. Båda förhindrar push, pop, splice och index-tilldelning.

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

Returnera readonly-arrayer från funktioner

Returnera readonly-arrayer från funktioner för att signalera till anroparen att resultatet inte ska ändras.

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

Oföränderliga funktionsparametrar

Markera arrayparametrar som readonly för att förhindra att funktionen ändrar anroparens array.

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

as const för literal-arrayer

Assertionen `as const` gör en array readonly och härleder en tupletyp med literala elementtyper i stället för breddade typer.

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

Readonly innebär inte djupfrysning

readonly förhindrar endast att arrayreferensen ändras. Om elementen är objekt kan deras egenskaper fortfarande ändras.

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

Djupt oföränderlig med Readonly<T>

För djup oföränderlighet hos objekt kombinerar ni ReadonlyArray med Readonly för elementen. Ni kan också använda ett 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

Tilldelning mellan muterbara och readonly-arrayer

En readonly-array kan INTE tilldelas till en muterbar arraytyp. Det skyddar mot att en oföränderlig array av misstag skickas dit där ändringar förväntas.

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

När readonly-arrayer bör användas

Använd readonly-arrayer för konfigurationsobjekt, konstanter, funktionsparametrar som ni lovar att inte ändra och returvärden från rena funktioner.

Spreadning skapar en ny muterbar array

När en readonly-array spreadas in i en ny arrayliteral skapas en muterbar kopia. Det är ett tydligt mönster för att göra ändringar utan mutation.

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

Snabbkontroll

Vilken operation är INTE tillåten på en `readonly number[]` i TypeScript?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Använd `readonly T[]` eller `ReadonlyArray` för att förhindra att arrayer ändras. Använd `as const` för literala konstantarrayer. Spreadning skapar en muterbar kopia när ni behöver utöka en readonly-array.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 101
Lektioner: 352

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Readonly-arrayer och oföränderlig data” gratis?

Ja – hela texten till ”Readonly-arrayer och oföränderlig data” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Readonly-arrayer och oföränderlig data”?

Använd ReadonlyArray för att förhindra oavsiktliga ändringar. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Readonly-arrayer och oföränderlig data”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Typade arrayer: T[] och Array
Readonly-arrayer och oföränderlig data
Tupler: typade arrayer med fast längd
Enum: numeriska konstanter och strängkonstanter

← Tillbaka till TypeScript Academy