ProgrammatieFrontend ontwikkelaar

Vertel over het sleutelwoord 'readonly' in TypeScript. Hoe en wanneer moet het worden toegepast? Wat zijn de kenmerken in vergelijking met const?

Slaag voor sollicitatiegesprekken met de Hintsage AI-assistent

Antwoord.

Het sleutelwoord readonly in TypeScript wordt gebruikt voor object- en array-eigenschappen om verandering na initialisatie te voorkomen:

  • Het wordt gebruikt in de beschrijving van interfaces, types en klassen, zodat de waarde van het veld niet kan worden gewijzigd na de instelling.
  • readonly kan alleen op objecteigenschappen worden toegepast, niet op variabelen.
  • In tegenstelling tot const, dat aangeeft dat een variabele niet kan worden heraangewezen, maar geen wijziging van de inhoud van een object verbiedt, verbiedt readonly specifiek de wijziging van het veld of het element van de array.

Voorbeeld:

interface User { readonly id: number; name: string; } const user: User = { id: 1, name: 'Anna' }; user.id = 2; // Fout: Kan geen waarde toewijzen aan 'id' omdat het een read-only eigenschap is.

Voor arrays:

const nums: readonly number[] = [1, 2, 3]; nums.push(4); // Fout: Eigenschap 'push' bestaat niet op type 'readonly number[]'.

Vraag met een valstrik.

Wat is het verschil tussen const en readonly in TypeScript? Kunnen ze elkaar vervangen?

Antwoord: Nee, dat kunnen ze niet. const is een beperking op de variabele zelf (kan niet worden heraangewezen), terwijl readonly een beperking is op afzonderlijke eigenschappen van een object of elementen van een array, maar de variabele zelf kan worden gewijzigd (indien toegestaan in de context).

Voorbeeld:

const arr: readonly number[] = [1, 2, 3]; // arr = [2, 3, 4]; // Fout vanwege const // arr[0] = 5; // Fout vanwege readonly

Geschiedenis

Tijdens een project voor een financieel platform werden gewone arrays number[] gebruikt in plaats van readonly number[] bij het werken met gebruikersgegevens. Hierdoor veranderde een functie per ongeluk de invoergegevens — de somwaarden in de arrays werden op verschillende plaatsen gebruikt, wat leidde tot discrepanties in de rapporten. De fout werd na enkele dagen ontdekt, wat het bedrijf tijd kostte voor audit en gegevensherstel.


Geschiedenis

In de interne API werden const en readonly door elkaar gehaald, in de veronderstelling dat const user: User het wijzigen van velden zou voorkomen. Als gevolg hiervan was het mogelijk om de velden van het object te wijzigen, hoewel dit niet was toegestaan volgens de specificaties. Door de onwetendheid over het verschil ontstonden er lekken van vertrouwelijke gegevens tussen de services.


Geschiedenis

In een open source-bibliotheek werd per ongeluk een van de gegevensstructuren wijzigbaar gemaakt omdat readonly was vergeten in de interface-definitie. Dit stelde externe ontwikkelaars in staat om privégegevens in runtime te wijzigen, wat leidde tot bugs die een refactoring vereisten.