`Readonly` în TypeScript

Tipuri utilitare pentru obiecte TypeScript 2.1

Readonly<T> face toate proprietățile lui T readonly: obiectul poate fi citit, dar nu modificat.

Sintaxă

type Readonly<T> = { readonly [P in keyof T]: T[P] };

Ce face `Readonly`

Readonly<T> pune readonly pe fiecare proprietate a lui T. Orice atribuire pe un astfel de obiect este eroare de compilare. Pentru tablouri, Readonly<string[]> este același lucru cu readonly string[]: fără push, sort sau atribuiri.

Este potrivit pentru parametrii funcțiilor care nu trebuie să modifice obiectul primit și pentru starea aplicației (de exemplu în React sau Redux), care se înlocuiește, nu se modifică. Funcția Object.freeze din JavaScript returnează chiar tipul Readonly<T>.

Ca și readonly, este verificat doar la compilare și este superficial: obiectele imbricate se pot modifica. Pentru literale complet înghețate la compilare folosește as const.

Parametri

Parametru	Descriere
`T`	Tipul obiect sau tablou ale cărui proprietăți devin readonly.

Ce returnează

Un tip cu aceleași proprietăți ca T, toate readonly.

Exemple

Exemplul 1: Funcție care primește date doar pentru citire

raport nu poate modifica elevul primit; pentru o notă nouă se creează un obiect nou.

interface Elev {
    nume: string;
    note: number[];
}

function raport(e: Readonly<Elev>): string {
    const medie = e.note.reduce((s, n) => s + n, 0) / e.note.length;
    return `${e.nume}: ${medie.toFixed(2)}`;
}

function cuNota(e: Readonly<Elev>, nota: number): Elev {
    return { ...e, note: [...e.note, nota] };
}

const ana: Readonly<Elev> = { nume: "Ana", note: [9, 10] };
const ana2 = cuNota(ana, 8);
console.log(raport(ana), "|", raport(ana2));

Rezultat

Ana: 9.50 | Ana: 9.00

Exemplul 2: Object.freeze returnează Readonly

const config = Object.freeze({ oras: "Iași", port: 8080 });   // Readonly<{ oras: string; port: number }>
config.port = 80;
console.log(config);

Eroarea afișată de tsc

exemplu.mts(2,8): error TS2540: Cannot assign to 'port' because it is a read-only property.

Exemplul 3: Superficial: interiorul se poate schimba

interface Elev {
    nume: string;
    note: number[];
}

const e: Readonly<Elev> = { nume: "Ana", note: [9] };
e.note.push(10);           // permis: tabloul în sine nu este readonly
console.log(e);