TypeScript Academy · บทเรียน

คุณสมบัติ readonly

กำหนดคุณสมบัติของออบเจ็กต์ให้เปลี่ยนแปลงไม่ได้หลังการเริ่มต้น

คุณสมบัติ readonly เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

ตัวปรับแต่ง readonly

ตัวปรับแต่ง readonly ใช้ระบุคุณสมบัติที่กำหนดค่าได้ครั้งเดียว แต่ไม่สามารถกำหนดค่าใหม่ภายหลังได้ ตัวปรับแต่งนี้แสดงถึงความไม่เปลี่ยนแปลงในระดับชนิดข้อมูล และช่วยป้องกันการเปลี่ยนแปลงโดยไม่ตั้งใจ

interface Point {
  readonly x: number;
  readonly y: number;
}
const p: Point = { x: 1, y: 2 };
console.log(p.x, p.y);
// p.x = 5; // Error: cannot assign to readonly property

readonly กับอินเทอร์เฟซ

ในอินเทอร์เฟซ readonly ใช้บันทึกว่าฟิลด์ใดมีค่าคงที่หลังจากสร้างแล้ว โค้ดที่เรียกใช้สามารถอ่านฟิลด์เหล่านี้ได้อย่างอิสระ แต่คอมไพเลอร์จะป้องกันการกำหนดค่าใหม่

interface Config {
  readonly env: string;
  retries: number; // mutable
}
const c: Config = { env: 'prod', retries: 3 };
c.retries = 5; // allowed
console.log(c.env, c.retries);

ข้อผิดพลาดขณะคอมไพล์เมื่อกำหนดค่าใหม่

การพยายามเขียนลงในคุณสมบัติ readonly จะทำให้เกิดข้อผิดพลาดขณะคอมไพล์ วิธีนี้ช่วยตรวจจับข้อบกพร่องทั้งกลุ่มที่เกิดจากการเปลี่ยนแปลงสถานะที่ใช้ร่วมกันโดยไม่คาดคิด

interface User {
  readonly id: number;
  name: string;
}
const u: User = { id: 1, name: 'Ada' };
u.name = 'Grace'; // ok
// u.id = 2; // Error
console.log(u);

readonly กับคุณสมบัติของคลาส

คลาสก็รองรับ readonly เช่นกัน ฟิลด์ readonly สามารถเริ่มต้นค่าได้ตอนประกาศหรือตอนอยู่ภายในตัวสร้าง แต่ไม่สามารถกำหนดค่าที่อื่นได้

class Circle {
  readonly radius: number;
  constructor(r: number) {
    this.radius = r; // allowed in constructor
  }
}
const c = new Circle(5);
console.log(c.radius);

กำหนดค่าครั้งเดียวในตัวสร้าง

ตัวสร้างเป็นสถานที่เดียวภายนอกการประกาศที่คุณสามารถกำหนดค่าให้ฟิลด์ readonly ได้ หลังจากสร้างอ็อบเจ็กต์แล้ว ค่าดังกล่าวจะถูกล็อกตลอดช่วงอายุการใช้งานของอ็อบเจ็กต์

class Account {
  readonly owner: string;
  constructor(owner: string) {
    this.owner = owner;
  }
  rename() {
    // this.owner = 'x'; // Error: readonly outside constructor
  }
}
console.log(new Account('Sam').owner);

คุณสมบัติพารามิเตอร์แบบ readonly

คุณสมบัติพารามิเตอร์ของ TypeScript ช่วยให้คุณประกาศและเริ่มต้นค่าฟิลด์ readonly ได้โดยตรงในลายเซ็นของตัวสร้าง ซึ่งช่วยลดโค้ดส่วนเกิน

class Vector {
  constructor(
    readonly x: number,
    readonly y: number
  ) {}
}
const v = new Vector(3, 4);
console.log(v.x, v.y);

readonly มีผลเฉพาะขณะคอมไพล์

สิ่งสำคัญคือ readonly มีอยู่เฉพาะในระบบชนิดข้อมูลเท่านั้น และจะถูกลบออกขณะทำงาน — JavaScript ไม่มีแนวคิดนี้ readonly ป้องกันการกำหนดค่าใหม่ในโค้ด TypeScript ของคุณ แต่ไม่ป้องกันในโค้ดผลลัพธ์ที่คอมไพล์แล้วซึ่งเข้าถึงผ่านเส้นทางที่ไม่มีการระบุชนิดข้อมูล

interface Box { readonly value: number; }
const b: Box = { value: 10 };
// At runtime b is a plain object; readonly is not enforced by JS.
console.log(b.value);

readonly เทียบกับค่าคงที่

อย่าสับสนระหว่างสองสิ่งนี้ const ป้องกันไม่ให้ตัวแปรถูกผูกกับค่าใหม่ ส่วน readonly ป้องกันไม่ให้คุณสมบัติถูกกำหนดค่าใหม่ อ็อบเจ็กต์ที่ประกาศด้วย const ยังคงมีคุณสมบัติที่เปลี่ยนแปลงได้ หากคุณสมบัติเหล่านั้นไม่ได้เป็น readonly

const obj = { count: 0 }; // const binding
obj.count = 5; // allowed: property is mutable
console.log(obj.count);

เป็นแบบตื้นโดยธรรมชาติ

readonly เป็นแบบตื้น: ปกป้องตัวคุณสมบัติเอง แต่ไม่ปกป้องเนื้อหาของอ็อบเจ็กต์หรืออาร์เรย์ที่คุณสมบัตินั้นอ้างถึง การอ้างอิงแบบ readonly ไปยังอ็อบเจ็กต์ยังอนุญาตให้เปลี่ยนแปลงฟิลด์ของอ็อบเจ็กต์นั้นได้

interface Holder { readonly data: { n: number }; }
const h: Holder = { data: { n: 1 } };
// h.data = {...}; // Error
h.data.n = 99; // allowed: inner field is not readonly
console.log(h.data.n);

ใช้ readonly เพื่อส่วนติดต่อการเขียนโปรแกรมที่ปลอดภัยยิ่งขึ้น

การกำหนดฟิลด์ของอ็อบเจ็กต์ที่ส่งคืนให้เป็น readonly เป็นการส่งสัญญาณให้ผู้เรียกไม่ควรเปลี่ยนแปลงฟิลด์เหล่านั้น และยังบันทึกเจตนาไว้ในชนิดข้อมูล ทำให้การใช้งานผิดกลายเป็นข้อผิดพลาดขณะคอมไพล์แทนที่จะเป็นข้อบกพร่องเงียบๆ

interface Snapshot { readonly takenAt: number; readonly size: number; }
function snapshot(): Snapshot {
  return { takenAt: Date.now(), size: 1024 };
}
const s = snapshot();
console.log(s.size);

readonly ในลายเซ็นดัชนี

คุณยังสามารถทำให้ลายเซ็นดัชนีเป็น readonly ได้ ทำให้เกิดชนิดที่มีลักษณะคล้ายแผนที่ ซึ่งสามารถอ่านรายการต่างๆ ได้ แต่ไม่สามารถกำหนดค่าใหม่ผ่านดัชนี

interface Scores {
  readonly [name: string]: number;
}
const scores: Scores = { ada: 95, sam: 88 };
console.log(scores.ada);
// scores.ada = 100; // Error

แบบทดสอบสั้นๆ

ทดสอบความเข้าใจเกี่ยวกับคุณสมบัติ readonly

สรุป: คุณสมบัติ readonly

คุณได้เรียนรู้ว่า readonly:

อนุญาตให้กำหนดค่าคุณสมบัติได้ครั้งเดียว แล้วป้องกันการกำหนดค่าใหม่
สามารถกำหนดค่าได้ตอนประกาศหรือตอนอยู่ในตัวสร้างสำหรับฟิลด์ของคลาส
มีผลเฉพาะขณะคอมไพล์และเป็นแบบตื้น — ไม่ได้ทำให้ข้อมูลที่ซ้อนกันถูกแช่แข็งแบบลึก
แตกต่างจาก const: อย่างหนึ่งป้องกันคุณสมบัติ ส่วนอีกอย่างป้องกันการผูกตัวแปร

ถัดไปคืออาร์เรย์และทูเพิลแบบ readonly

interface Meta { readonly id: number; }
const m: Meta = { id: 42 };
console.log(m.id);

คำถามที่พบบ่อย

บทเรียน “คุณสมบัติ readonly” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คุณสมบัติ readonly” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คุณสมบัติ readonly”

กำหนดคุณสมบัติของออบเจ็กต์ให้เปลี่ยนแปลงไม่ได้หลังการเริ่มต้น คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “คุณสมบัติ readonly” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ TypeScript Academy