พร็อพเพอร์ตี readonly และพร็อพเพอร์ตีของพารามิเตอร์

เริ่มต้นใช้งาน

readonly กับพร็อพเพอร์ตีของคลาส

class Invoice {
  readonly invoiceId: string;
  constructor(id: string) { this.invoiceId = id; }
}
const inv = new Invoice('INV-001');
// inv.invoiceId = 'INV-002'; // Error!

readonly ในอินเทอร์เฟซ

interface Point { readonly x: number; readonly y: number; }
const p: Point = { x: 5, y: 10 };
// p.x = 0; // Error

พร็อพเพอร์ตีพารามิเตอร์

class Product {
  constructor(
    public name: string,
    public price: number,
    private sku: string
  ) {} // no need to write this.name = name; etc.
}

พร็อพเพอร์ตีพารามิเตอร์แบบ readonly

class Config {
  constructor(
    public readonly host: string,
    public readonly port: number = 3000
  ) {}
}

การเริ่มต้นค่าในการประกาศ

class AppVersion {
  readonly version: string = '1.0.0';
  readonly buildDate: Date = new Date();
}

readonly กับ const

const API_KEY = 'secret'; // block variable
class Service {
  readonly key: string = API_KEY; // class property
}

ชนิดข้อมูลออบเจ็กต์แบบอ่านอย่างเดียว

interface User { name: string; age: number; }
const frozen: Readonly<User> = { name: 'Alice', age: 30 };
// frozen.name = 'Bob'; // Error

readonly ไม่ได้ทำให้ข้อมูลถูกตรึงแบบลงลึก

class Team {
  readonly members: string[] = [];
}
const t = new Team();
t.members.push('Alice'); // Allowed — the array itself is mutable!
// t.members = []; // Error — can't reassign the property

พร็อพเพอร์ตีพารามิเตอร์ช่วยลดโค้ดซ้ำซ้อน

// Without parameter properties (verbose)
class A {
  private x: number;
  constructor(x: number) { this.x = x; }
}
// With parameter properties (concise)
class B {
  constructor(private x: number) {}
}

เมื่อใดควรหลีกเลี่ยงพร็อพเพอร์ตีพารามิเตอร์

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน