Readonly property của object type

Trong TypeScript, có thể đặt property của object thành read-only. Thêm modifier readonly vào property muốn đặt thành read-only. Khi cố gán giá trị cho property read-only, TypeScript compiler sẽ cảnh báo không thể gán.

ts
let obj: {
  readonly foo: number;
};
obj = { foo: 1 };
obj.foo = 2;
Cannot assign to 'foo' because it is a read-only property.2540Cannot assign to 'foo' because it is a read-only property.

ts
let obj: {
  readonly foo: number;
};
obj = { foo: 1 };
obj.foo = 2;
Cannot assign to 'foo' because it is a read-only property.2540Cannot assign to 'foo' because it is a read-only property.

readonly không áp dụng đệ quy

readonly chỉ đặt property được chỉ định thành read-only. Khi object có cấu trúc lồng nhau, readonly không áp dụng cho property của object bên trong. Nghĩa là nó không áp dụng đệ quy.

Ví dụ, nếu property foo là readonly nhưng property foo.bar không phải readonly, việc gán vào foo sẽ báo compile error, nhưng gán trực tiếp vào foo.bar sẽ không báo compile error.

ts
let obj: {
  readonly foo: {
    bar: number;
  };
};
obj = {
  foo: {
    bar: 1,
  },
};
obj.foo = { bar: 2 };
Cannot assign to 'foo' because it is a read-only property.2540Cannot assign to 'foo' because it is a read-only property.
obj.foo.bar = 2; // Không báo compile error

ts
let obj: {
  readonly foo: {
    bar: number;
  };
};
obj = {
  foo: {
    bar: 1,
  },
};
obj.foo = { bar: 2 };
Cannot assign to 'foo' because it is a read-only property.2540Cannot assign to 'foo' because it is a read-only property.
obj.foo.bar = 2; // Không báo compile error

Nếu muốn đặt property thành read-only một cách đệ quy, cần thêm readonly vào từng property con và cháu.

ts
let obj: {
  readonly foo: {
    readonly bar: number;
  };
};

ts
let obj: {
  readonly foo: {
    readonly bar: number;
  };
};

readonly chỉ có tác dụng tại compile time

readonly là khái niệm chỉ tồn tại trong thế giới type của TypeScript. Nghĩa là property được chỉ định read-only chỉ được kiểm tra tại compile time. Sau khi compile thành JavaScript, property từng có readonly vẫn có thể gán giá trị được.

Ví dụ, với code chỉ định property foo là readonly, code gán vào foo sẽ được phát hiện là error tại compile time.

ts
const obj: { readonly foo: number } = { foo: 1 };
obj.foo = 2; // Báo compile error
Cannot assign to 'foo' because it is a read-only property.2540Cannot assign to 'foo' because it is a read-only property.

ts
const obj: { readonly foo: number } = { foo: 1 };
obj.foo = 2; // Báo compile error
Cannot assign to 'foo' because it is a read-only property.2540Cannot assign to 'foo' because it is a read-only property.

Tuy nhiên, trong JavaScript code sau khi compile, ký hiệu readonly sẽ biến mất nên sẽ không được phát hiện là error tại runtime.

JavaScript code sau khi compile
ts
const obj = { foo: 1 };
obj.foo = 2; // Không báo runtime error
 

JavaScript code sau khi compile
ts
const obj = { foo: 1 };
obj.foo = 2; // Không báo runtime error
 

Việc không có kiểm tra tại runtime thoạt nhìn có vẻ nguy hiểm, nhưng nếu không bỏ qua compile error và sửa đúng cách thì sẽ không có vấn đề lớn.

Cách đặt tất cả property thành read-only cùng lúc

Trong TypeScript, để đặt property thành read-only, cần thêm modifier readonly vào từng property. Khi số lượng property nhiều, việc thêm readonly sẽ tốn công sức và lượng code nhiều.

Trong trường hợp đó, có thể sử dụng utility type Readonly. Readonly là type đặt tất cả property thành read-only.

ts
let obj: Readonly<{
  a: number;
  b: number;
  c: number;
  d: number;
  e: number;
  f: number;
}>;

ts
let obj: Readonly<{
  a: number;
  b: number;
  c: number;
  d: number;
  e: number;
  f: number;
}>;

📄️ Readonly<T>

Biến tất cả property thành read-only

Thông tin liên quan

📄️ Readonly modifier trong class

Trong TypeScript, thêm readonly modifier cho field để biến field đó thành chỉ đọc.

📄️ Readonly modifier của interface

Trong interface của TypeScript, có thể định nghĩa field chỉ đọc bằng cách thêm readonly modifier cho field.

📄️ Read-only array

Trong TypeScript, có thể type annotation cho array là read-only (readonly). Có 2 cách type annotation. Cách thứ nhất là sử dụng từ khóa readonly. Cách thứ hai là sử dụng ReadonlyArray.

📄️ Const assertion "as const"

Khi khai báo biến, thêm as const vào cuối sẽ làm cho giá trị đó thành readonly và chuyển thành literal type.